5. 타입 추론 / 별칭

2021. 11. 5. 00:28재주껏 하는 Front-End/타입스크립트 (준비중)

반응형

이번 글에서는 타입스크립트의 타입 추론, 별칭에 대해 알아보자.

 

1. 타입 추론

 

타입 추론이란 타입스크립트가 대상 코드를 해석하는 과정을 말한다. 타입스크립트가 타입 추론을 해나가는 과정은 아래와 같다. 예를 들어, 아래와 같이 변수 하나를 선언했다고 가정해보자.

 

let exampleA

 

타입스크립트에서는 위의 코드를 보고 아래와 같이 타입을 추론한다. exampleA 변수에 어떤 값이 들어올지 모르기 때문에 타입스크립트는 exampleA의 타입을 Any로 추측한다.

 

 

이번에는 아래와 같이 exampleA에 문자열을 넣어보자.

 

let exampleA = '리뷰하는 개발자'

 

타입스크립트에서 위의 코드를 보고 아래와 같이 타입을 추론한다.

 

 

exampleA 변수에 들어온 값이 문자열 타입이라는 것을 추론할 수 있다. 즉, 변수에 값이 할당되거나 초기화할 때 타입을 추론한다. 변수에 값을 할당하거나 초기화하는 작업 외에도 속성, 리턴, 파라미터 초기화 등을 수행할 때도 타입 추론 과정이 일어난다.

 

타입스크립트는 타입을 추론할 때 가장 근접한 타입을 추론하는 특징이 있다. 아래의 코드를 살펴보자.

 

const exampleArray = ['리뷰하는 개발자', 32, true, {name: '리뷰하는 개발자'}]

 

VS Code의 프리뷰를 살펴보면 아래와 같다.

 

 

프리뷰에서 타입 옆에 "|" 기호로 여러 타입이 묶여 있는 것을 볼 수 있는데, 이것을 유니온 타입이라고 하며 추론 대상에서 사용할 수 있는 모든 타입을 나열한 것이다. 타입스크립트는 이 유니온 타입을 이용하여 추론 대상의 타입에 가장 근접한 타입을 찾는데 이것을 "Best Common Type" 이라고 한다.

 

아래의 링크에서 Best Common Type에 대해 확인할 수 있다.

 

https://www.typescriptlang.org/docs/handbook/type-inference.html

 

Documentation - Type Inference

How code flow analysis works in TypeScript

www.typescriptlang.org

 

2. 타입 별칭

 

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다. 아직 인터페이스를 알아보지 않았으므로 이번 글에서는 타입 별칭을 어떻게 사용하는지에 대해서만 알아본다. 아래와 같이 타입 별칭을 정의하고 사용할 수 있다.

 

// 1. 단일 타입
type aliasA : string;
type aliasB : number;
type aliasC : boolean;

// 2. 복합 타입
type aliasD = {
  property1: string;
  property2: number;
}

// 3. 사용 예제
const aliasEx : aliasD = {
  property1: '타입 별칭 예제',
  property2: 1124
}

 

예제 코드를 보면 마치 타입을 하나 생성하는 것 같은 느낌이 든다. 하지만 실제로는 타입을 생성하는 것이 아니고 이미 정의되어 있는 타입에 별명을 붙여 복잡한 타입도 쉽게 사용하는 것이 주목적이다. VS Code에서 타입 별칭에 마우스 커서를 올리면 아래와 같이 타입 별칭에 대한 프리뷰를 볼 수 있다.

 

 

타입 별칭에 대해서 좀 더 언급할 내용이 있는데 이 부분은 인터페이스에서 확인해보도록 하자. 타입 별칭과 인터페이스는 비슷하지만 개념은 완전히 다르기 때문에 혼동할 여지가 많다.

 


 

이번 글에서는 타입 추론, 호환, 별칭에 대해 알아보았다. 다음 글에서는 타입스크립트에서 가장 중요한 개념 중 하나인 인터페이스에 대해 알아보도록 하겠다. 오늘은 여기까지~

반응형

'재주껏 하는 Front-End > 타입스크립트 (준비중)' 카테고리의 다른 글

7. 인터페이스 (2)  (0) 2021.11.07
6. 인터페이스 (1)  (0) 2021.11.07
4. 기본 타입  (0) 2021.10.31
3. JS DOC  (0) 2021.10.29
2. 타입 스크립트 개발 환경 구성  (0) 2020.12.18