타입 별칭이란?
타입 별칭 은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.
1
2
3
4
5
6
// string 타입을 사용할 때
const name: string = 'capt';
// 타입 별칭을 사용할 때
type MyName = string;
const anme: MyName = 'capt';
복잡한 타입 별칭
간단한 타입 뿐만 아니라 interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있다.
1
2
3
4
type Developer = {
name: string;
skill: string;
}
타입 별칭 예제 코드
타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다.
1
2
3
4
5
6
7
8
9
type MyString = string;
var str: MyString = 'hello';
type Todo = { id: string; title: string; done: boolean};
// 위에 있는 타입(Todo) 사용하기
function getTodo (todo: Todo) {
...
}
타입을 별칭으로 사용하면 좀 더 쉽게 타입을 지정할 수 있고, 코드의 가독성이 올라간다.
type vs interface
VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인해볼 수 있다.
우선 interface 로 정의한다면, 다음과 같이 나온다.
1
2
3
4
interface Person2 {
name: string;
age: number;
}
위에 작성한 코드를 타입 별칭으로 정의한다면?
1
2
3
4
type Person2 = {
name: string;
age: number;
}
마우스가 focus가 되면, 각 타입을 확인할 수 있다.
가장 큰 차이점
- 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부다.
인터페이스는 확장이 가능하고,타입 별칭은 확장이 불가능하다.
따라서, type 보다는 interface 로 선언해서 사용하는 것이 좋다.
추천 문서
🧸 Feelings …
타입 별칭보다는 인터페이스로 선언해서 사용하는 것이 좋다는 것만 기억하자..!
Reference
[캡틴판교 TS] 타입스크립트 입문 - 기초부터 실전까지
타입스크립트 핸드북
본 포스팅은 캡틴판교 강사님의
타입스크립트 입문 - 기초부터 실전까지강의를 수강하고 난 후, 본인의 주관적인 견해에 의하여 작성되었습니다.