타입 별칭(Type Alias)
은 타입스크립트에서 타입을 정의할 때 변수처럼 선언이 가능하도록 해주는 기능입니다.
타입 별칭
은 다음과 같은 형태로 선언합니다.
type 타입명 = 타입;
예를들어 다음과 같이 학생(Student)라는 타입을 선언할 수 있습니다.
type Student = {
name: string;
id: number;
grade: number;
birth: string;
address: string;
};
위에서 선언한 타입을 다음과 같이 타입 선언에 이용하게 됩니다.
const student: Student = {
name: 'Freddie',
id: 230101,
grade: 1,
birth: '2000.01.01',
address: '서울특별시',
};
이때 당연히 위에서 선언한 타입에 맞지않는 값을 주게 되면 타입 오류가 발생하게 됩니다.
동일한 스코프 범위 내에서 중복된 이름의 타입 별칭 선언은 불가능합니다.
type alias = number; type alias = string; //불가능!!!
type alias = number; const func = () => { type alias = string; //스코프 범위가 다르므로 이건 가능!!! //func 내부에서는 스코프로 인해 alias의 타입이 string으로 동작. }; //func 스코프를 벗어나면 alias의 타입은 number로 동작.
인덱스 시그니처
는 타입을 정의에서 수많은 객체 타입을 일일히 지정할 수 없는 경우에 사용할 수 있는 문법입니다.
예를들면 다음과 같이 색상 코드를 무수히 많이 저장하는 객체가 있다고 합니다.
type HexColorCodes = {
black: string;
red: string;
orange: string;
(... 엄청 많은 색상들)
white: string;
};
const hexColorCodes: HexColorCodes = {
black: '#000000',
red: '#ff0000',
orange: '#ffa500',
(... 엄청 많은 색상들)
white: '#ffffff',
};
이런 경우에 객체에도 색상을 추가할 때 마다 일일히 타입 별칭 정의에도 색상을 추가해주어야하는 큰 불편함이 발생하게 됩니다. 그래서 이러한 경우에 인덱스 시그니처
를 사용해서 간단하게 타입을 정의할 수 있게 됩니다.
인덱스 시그니처
를 사용해서 위 코드를 아래와 같이 축약할 수 있습니다.
type HexColorCodes = {
[key: string]: string;
};
const hexColorCodes: HexColorCodes = {
black: '#000000',
red: '#ff0000',
orange: '#ffa500',
(... 엄청 많은 색상들)
white: '#ffffff',
};
[key: 키 타입]: 값 타입
형태의 선언을 통해 해당 별칭의 타입에 key 타입이 string이고, 값이 string인 프로퍼티들을 갖는다라고 정의할 수 있습니다. 일일히 모든 키값의 타입을 명시하지 않아도 되기 때문에 상당히 편해졌습니다.
이때, 당연하게도 타입이 맞지 않으면 타입 오류를 반환하게 됩니다.
또한, 인덱스 시그니처
에 필수 프로퍼티를 포함해야한다면 다음과 같이 명시할 수 있습니다.
type HexColorCodes = {
[key: string]: string;
black: string;
white: string;
};
필수 프로퍼티를 명시할때 주의할 점은
인덱스 시그니처
로 선언한 값 타입과 필수 프로퍼티의 값 타입이 일치하지 않으면 오류가 발생하게 됩니다.type HexColorCodes = { [key: string]: string; black: string; white: number; // 오류!!! };
이러한 오류가 발생하는 원인은
타입 호환
때문입니다.
타입 호환
은 A와 B 두 가지 타입이 있을 때, 한 타입을 다른 타입으로 판단해도 되는가를 의미합니다. 예를들면 정사각형은 직사각형이 될 수 있지만, 직사각형은 정사각형이 될 수 없다라는 개념이라고 보시면 됩니다. (추후에 호환에 대해서 좀 더 자세하게 다뤄볼까하므로 현재는 이정도 개념이다라고만 익히시면 될 것 같습니다.)
좋은 글 감사합니다.