JSTS

[TS] 3. 타입 별칭, 유니온 타입, 인터섹션 타입

Jaaaay 2022. 6. 29. 00:48

타입 별칭

타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다.

// interface Person {
//   name: string;
//   age: number;
// }

type Person = {
  name: string;
  age: number;
};

var seho: Person = {
  name: "세호",
  age: 30,
};

type MyString = string;
var str: MyString = 'hello';

type Todo = { id: string; title: string; done: boolean};
function getTodo(todo: Todo){
    
}

타입 별칭과 인터페이스의 차이점

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부이다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능하다. 따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천한다.


유니온 타입

유니온 타입의 장점

// function logMessage(value: string) {
//   console.log(value);
// }
// logMessage("hello");
// logMessage(100);

function logMessage(value: string | number) {
  if(typeof value === 'number'){
    value.toLocaleString();
  }
  if(typeof value === 'string'){
    value.toString();
  }
  throw new TypeError('value must be string or number');
}
logMessage("hello");
logMessage(100);

유니온 타입을 이용하면 지정한 여러 타입을 인자로 받을 수 있고, if문 등으로 각 타입에 맞는 메서드를 적용하기 용이하다.

타입 에러를 throw 해주기도 용이하다.

타입 가드: 특정 타입으로 타입의 범위를 좁혀나가는(필터링하는) 과정(코드에 if)

유니온 타입의 특징

유니온 타입으로 참조한 두 인터페이스의 모든 요소를 제공할 것 같지만 공통된 특성만 제공한다.

타입세이프한 경우만 제공하는 것

타입 가드를 사용해야 접근할 수 있음.

인터섹션 타입

Developer와 Person의 모든 속성을 하나로 합친 타입이라 볼 수 있음.

유니온 타입과 인터섹션 타입의 차이점

실제 사용은 주로 유니온 타입으로 한다.

인터섹션 타입의 경우 객체를 전달할 때 모든 속성 값을 요구하기 때문에 유니온 타입으로 하되, if로 타입 구분을 해서 사용하면 될 것 같다.


https://joshua1988.github.io/ts/guide/type-alias.html#타입-별칭의-특징

'JSTS' 카테고리의 다른 글

[TS] 5. 제네릭  (0) 2022.07.07
[TS] 4. 이넘, 클래스  (0) 2022.07.07
[TS] 2. 인터페이스  (0) 2022.06.29
[TS] 1. 타입스크립트 시작하기  (0) 2022.06.08
[JS][ES6] 객체  (0) 2022.06.05