Typescript에 관한 기초 정리 - (2)

InterSection Type

인터섹션 타입은 여러 타입을 만족하는 하나의 타입을 말합니다.

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

interface Developer {
	name : string;
	skill : string;
}

type Capt = Person & Developer

위 코드는 Person과 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt라는 타입에 할당하는 코드입니다. 이렇게 되면 Capt의 타입은 아래와 같이 정의됩니다.

{
	name : string;
	age : number;
	skill : string;
}

 

Interface

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

interface personAge {
	age : number ;
}

 

타입을 정의할 때에 정의되어있지 않은 속성을 꼭 사용하지 않아도 됩니다. 이를 옵션 속성이라고 합니다.

interface personAge {
	age : number ;
}

 

제네릭

제네릭은 C#, Java등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 기능입니다. 한 가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용합니다.

function logText<T>(text: T) : T {
	return text;
}

 

Declare

declare 키워드는 타입스크립트 컴파일러에게 특정한 변수가 있다고 선언하는 키워드입니다.

주로 전역변수를 사용하거나 d.ts 파일을 만들 때 사용합니다.

declare interface Article {
	title : string
	slug : string
	body : string
}

delcare const pi = 3.14;

 

타입 추론

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 말합니다.

타입스크립트는 기본적으로 타입 표기가 없을 시 타입 정보를 제공하기 위해 타입을 추론합니다.

예를 들면

let x = 3;

 

타입을 정의하지 않은 x의 타입은 number로 추론됩니다.

 

최적 공통 타입

여러 표현식에서 타입 추론이 발생할 때, 해당 표현식의 타입을 사용하여 “최적 공통 타입”을 계산합니다.

let arr = [0, 1, null] ;

배열의 각 아이템의 타입은 number와 null로 구분됩니다. 이 때 최적 공통 타입 알고리즘을 통한 다른 타입과의 가장 잘 호환되는 타입을 타입스크립트에서 선정합니다.

 

문맥상 타이핑

타입스크립트에서 타입을 추론하는 또 하나의 방식은 바로 문맥상으로 타입을 결정하는 것입니다.

문맥상의 타이핑은 코드의 위치를 기준으로 일어납니다.

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button) // success!
  console.log(mouseEvent.kangaroo) //error
}

검사기에선 window.onmousedown에 할당되는 함수의 타입을 추론합니다.

이렇게 했을 때, mouseEvent매개변수의 타입은 button 프로퍼티는존재하는 반면, kangroo 프로퍼티는 없다고 추론할 수 있습니다.

다른 예제를 보죠.

window.onscroll = function(uiEvent) {
	console.log(uiEvent.button); // error
}

위 함수가 window.onscroll에 할당되어 있다는 사실을 기반으로 봤을 때, 타입스크립트는 함수의 인자 uiEvent를 UIEvent 타입으로 간주합니다. 따라서 앞에서 보았던 mouseEvent와 다르게 button 속성이 없다고 추론합니다.

 

문맥상 타이핑은 이름 그대로 문맥을 통해 타입을 예측하는 방법입니다. 만약 함수가 문맥적으로 타입 추론을 하기 힘들 시, 함수의 인자는 암묵적으로 any 타입을 반환합니다.

물론 이는 좋은 방법이 아닙니다. 따라서 문맥상 타이핑을 통한 설정보다는 직접적인 설정을 권장합니다.

 

타입 별칭

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 말합니다.

type myName = string;
const name : myName = 'capt';

type Developer = {
	name : string;
	skill : string;
}

type user<T> = {
	name : T
}

인터페이스와의 차이점이라면 type은 새로운 속성을 추가하기 위해 같은 이름으로 다시 선언할 수 없지만, 인터페이스는 선언적 확장이 가능하다는 장점이 있습니다.