타입 별칭

김동현·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개의 댓글

관련 채용 정보