타입 별칭

김동현·2022년 3월 19일
0

TypeScript

목록 보기
10/18
post-thumbnail

타입 별칭

타입 별칭은 "특정 타입"이나 "인터페이스", "함수 시그니처" 등을 참조할 수 있는 "타입 변수"를 의미합니다.

즉, 타입 별칭은 새로운 타입을 생성하는 것이 아니라 정의된 타입을 타입 변수에 할당하는 것입니다. 이를 이용하여 복잡한 타입을 불필요하게 반복하지 않고 타입 별칭을 재사용할 수 있습니다.

// main.ts
// string 타입을 사용
const name: string = 'donghyun';

// string 타입을 가리키는 MyName 타입 별칭 선언
type MyName = string;
const name: MyName = 'donghyun';

즉, type이라는 키워드를 통해 타입 변수을 선언하고, 값으로 "특정 타입"이나 "인터페이스"를 할당해줍니다.

이때 타입 변수와 같이 사용자 정의 타입의 경우 파스칼 케이스를 이용하여 선언해줍니다.


인터페이스도 타입 별칭으로 사용할 수 있습니다.

// main.ts
// 객체 구조 인터페이스를 가리키는 타입 별칭 Developer 선언
type Developer = {
    name: string;
    skill: string;
}

// 함수 스펙 인터페이스를 가리키는 타입 별칭 SumFunc 선언
type SumFunc = {
    (a: number, b: number): number;
}

// 배열 스펙 인터페이스를 타입 별칭으로 선언
type StringArray = {
    [index: number]: string;
}

// 객체 스펙 인터페이스를 가리키는 타입 별칭 StringObj 선언
type StringObj = {
    [key: string]: RegExp;
}

type 키워드로 타입 별칭을 선언하고, 값으로 interface의 규격을 할당하여 사용할 수 있습니다.

타입 별칭의 Preview

// main.ts
// MyName 인터페이스 정의
interface MyName {
    name: string;
    age: number;
}

const user: MyName = {
    name: 'donghyun',
    age: 25
};  

위 코드와 같이 MyName이라는 interface를 정의하고 user 변수의 타입을 MyName interface를 사용하는 경우 user 변수 옆 MyName에 커서를 올려두면 다음과 preview 창이 보입니다.

위 그림처럼 단지 interface MyName이라고만 표시됩니다.


그럼 타입 별칭의 경우에는 다음과 같은 preview 창이 표시됩니다.

즉, MyName 타입 별칭이 가리키는 "타입에 대한 구조"가 preview 창에 표시됩니다.

profile
Frontend Dev

0개의 댓글