Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

비전공 프론트엔드 개발자

TypeScript의 기초 개념 본문

TypeScript

TypeScript의 기초 개념

JJ_hyun 2022. 10. 23. 17:37

1. 타입 추론 ( Type inference )

 let course = ' react-type-script ' => 문자열
  course = 1234 => 숫자열

course 는 타입을 지정해 주지않아도 선언된 시점에 문자열로 지정이 된다.

( 매번 타입을 지정해주는건 상당히 귀찮은 행동이다. )

숫자열을 재할당을 하게 될 경우 에러가 발생한다. 

( 결론. 타입을 지정하지 않아도 타입스크립트는 할당된 값에 따라 타입을 자동으로 지정해준다. )

 

2. 유니온 타입

변수를 선언할 때 하나의 타입만 사용하지 않고, 여러 타입을 혼용하게 될 때가 있다. 

let exampleType : number | string = ' This is union type '
-> 문자타입과 숫자타입 모두 사용 가능. ( 현재 문자타입 )

exampleType = 1234 
( 정상 작동 )

let names = string | string[]
이런식으로도 가능

 

3. 타입별칭 ( Type aliases ) 

타입은 인스턴스방식으로 생성하여 재사용성을 높여주는 타입스크립트만의 방식. 

type Person = {
  name: string;
  age: number;
  married: boolean;
  friend: boolean;
  message: string;
};

방법 : type 원하는 이름 = 타입

 

예시. 

let jade: Person | string;
// 타입을 위에서 선언했던 Person 혹은 string으로 선언.

jade = { // Person 타입에 맞는 값을 선언
  name: "jade",
  age: 29,
  married: true,
  friend: true,
  message: "hello",
};

let jun: Person[]; // 타입을 배열 Person로 선언.

jun = [
  {
    name: "jun",
    age: 30,
    married: false,
    friend: true,
    message: `hello i'm jun`,
  },
];
// 배열안에 0번째 인덱스로 Person 타입의 객체가 있음.

 

 

4. function & type

기초

function add(a: number, b: number): number {
  return a + b;
}

매개변수로 a와 b를 받는데 둘다 숫자타입으로 지정했다.

매개변수 우측 number 는 반환값이 숫자형이라는 말이다. 

 

function printOutPut(value: any) {
  console.log(value);
    // return undefined;
}

printOutPut 함수는 반환값이 없다. 이런 경우 해당 함수의 타입은 void 이다. 

void 는 함수에만 있는 특별한 경우로, null 혹은 undefined 와 비슷하다. 특이점으로는 항상 함수와 결합하여 사용해야 한다는 것이다. 

 

만약 함수의 반환값이 필요한 경우 null 혹은 undefined 를 반환해 주면 된다. 

 

'TypeScript' 카테고리의 다른 글

TypeScript의 기초 개념2  (0) 2022.10.24
typescript 기초 문법정리  (2) 2022.10.23