(TypeScript) - TypeScript 타입 별칭과 인덱스 시그니처

■ 타입 별칭

: 타입을 마치 변수처럼 정의해서 사용할 수 있는 것이다.

예시로 아래 코드의 user 를 들 수 있다. 

let user: {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
} = {
    id: 1,
    name: '송송송',
    nickname: 'songsong',
    birth: '2000-01-01',
    bio: '안녕',
    location: '서울',
};

let user2: {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
} = {
    id: 1,
    name: '송송송',
    nickname: 'songsong',
    birth: '2000-01-01',
    bio: '안녕',
    location: '서울',
};

 

이렇게 타입 별칭으로 만드는 이유는 코드에 나와있다.

코드에서는 user1 user2 가 각각의 객체가 있는데 해당 객체마다 타입을 정해줘야 한다.

그런데 지금같이 만약 여러개의 객체가 여러개의 프로퍼티를 가지고 있다면 너무나 많은 코드가 중복되기 때문이다.

 

type User = {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
};

let user: User = {
    id: 1,
    name: '송송송',
    nickname: 'songsong',
    birth: '2000-01-01',
    bio: '안녕',
    location: '서울',
};

 

따라서 다음과 같이 타입 별칭을 만들고 그대로 사용해주면 된다.

선언한 객체 : 뒤에 우리가 지정한 타입 별칭을 사용하면 객체 타입을 일일이 지정하지 않아도 된다. 

 

단 타입 별칭을 사용할 때 주의할 점이 있다.

타입 별칭은 동일한 스코프에 중복된 이름으로 타입 별칭을 사용하면 오류가 생기니 조심해야 한다.

 

■ 인덱스 시그니처

: 객체 타입의 정의를 더 유연하게 도와준다.

type CountryCodes = {
    Korea: string;
    UnitedState: string;
    UnitedKingdom: string;
};

let countryCodes = {
    Korea: 'ko',
    UnitedState: 'us',
    UnitedKingdom: 'uk',
};

 

여기에서 CountryCodes 를 보면 countryCodes 에 대한 객체 프로퍼티를 각각 정해주고 있다.

지금은 단순히 3개의 나라지만, 만약 나라가 늘어나면 그만큼 해당하는 국가와 타입을 계속 세팅해줘야 한다는 번거로움이 있다. 

 

// 인덱스 시그니처
type CountryCodes = {
    [key: string]: string;
};

let countryCodes: CountryCodes = {
    Korea: 'ko',
    UnitedState: 'us',
    UnitedKingdom: 'uk',
};

 

따라서 해당 객체의 키와 밸류의 규칙을 기준으로 객체의 타입을 정의할 수 있는 문법이 인덱스 시그니처이다.

 

코드와 같이 key는 string 타입으로 지정해주고 value값도 string 으로 지정해준다.

그리고 변수에 할당할 때 변수 타입을 우리가 지정한 타입 별칭으로 넣어주면 많은 코드 타입을 일일이 적을 필요가 없다.

 

type CountryNumberCodes = {
    [key: string]: number;
};

let countryNumberCodes: CountryNumberCodes = {};

 

다만 주의할 점은 해당 타입 별칭은 위반하지만 않으면 오류가 뜨지 않는다.

따라서 빈 객체는 타입 오류를 범하지 않으므로 오류는 뜨지 않는 것은 알고 있어야 한다.

 

type CountryNumberCodes = {
    [key: string]: number;
    Korea: number;
};

let countryNumberCodes: CountryNumberCodes = {};

 

만약 해당 type 이 반드시 받아야 할 프로퍼티가 있다면,

타입 안에 해당 타입을 넣어주면 그 프로퍼티가 없을 경우 해당 속성이 없다는 오류를 표시해준다.

 

type CountryNumberCodes = {
    [key: string]: number;
    Korea: string;
};

let countryNumberAndStringCodes: CountryNumberCodes = {
    Korea: 'ko',
};

 

다음과 같이 인덱스 시그니처로 지정한 [key: string]: number 와

하나의 프로퍼티 Korea: string 다른 타입을 가지면 오류로 인식한다.

따라서 인덱스 시그니처를 이용할 경우 인덱스 시그니처와 다른 프로퍼티 해당 타입을 일치시켜줘야 한다.