이번 포스팅에서는 타입 별칭과 인덱스를 소개하겠습니다.
먼저 타입 별칭에 대해 알아보겠습니다.

🎯 타입 별칭이란?

타입 별칭이란 어떠한 특정 타입에 대해 새로운 이름을 지정하는 것 입니다. 타입 별칭을 사용하면 코드를 더 읽기 쉽고 이해하기 쉽게 만들 수 있으며 구조가 같은 타입을 재사용하고 보다 쉽게 유지보수할 수 있도록 만들어줍니다.

✅ 타입 별칭 사용 예시

그럼 이제부터 타입 별칭을 사용한 예시를 보여드리겠습니다.

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

let user:User = {
    id:1,
    name: "정다희",
    nickname: "winterload",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location:"부천시",
};

let user2:User = {
    id:2,
    name: "홍길동",
    nickname: "winterload",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location:"부천시",
};

변수 user와 user2를 보시면 key의 값이 동일한 형식인 것을 볼 수 있습니다. 이렇게 같은 구조의 key값의 각각의 타입을 지정해 주기 위해서 먼저 변수처럼 User라는 타입을 정의해주고 그 안에 각각의 타입들을 정해주었습니다.

// 타입 별칭
type User = { 
    id: number;
    name: string;
    nickname: string,
    birth: string,
    bio: string,
    location: string,
};

만약 여기서 타입 별칭을 사용하지 않고 코드를 작성했다면 어떻게 되었을까요?

let user:{ 
    id: number;
    name: string;
    nickname: string,
    birth: string,
    bio: string,
    location: string,
} = {
    id:1,
    name: "정다희",
    nickname: "winterload",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location:"부천시",
};

let user2:{ 
    id: number;
    name: string;
    nickname: string,
    birth: string,
    bio: string,
    location: string,
}= {
    id:2,
    name: "홍길동",
    nickname: "winterload",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location:"부천시",
};

이런식으로 변수 user와 user2의 코드가 중복되고 길어지는 것을 볼 수 있습니다. 이러한 문제점을 방지하고자 우리는 동일한 내용의 타입이 있다면 마치 타입을 변수처럼 정의해서 쓰는 타입 별칭 을 사용하는 것 입니다.

아 그리고 한 가지 더 말씀드리면 동일한 이름의 타입 별칭이 있다면 오류가 뜨므로 주의해야합니다.

대신 함수 밖과 안에 동일한 이름의 타입 별칭이 각각 하나씩 있는 것은 가능합니다. 함수 안에서의 있는 동일한 이름의 타입 별칭이 함수 내에서만 작동이 되기 때문입니다.

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

function func() {
  type User = { 
    // 함수 내에서는 이 타입 별칭이 적용됨.
  };
}

이렇게 간단하게 타입 별칭에 대해서 알아보았습니다.
이 다음으로는 인덱스 시그니처에 대해서 알아보겠습니다.

🎯 인덱스 시그니처란?

인덱스 시그니처란 key와 value의 규칙을 기준으로 객체의 타입을 정의할 수 있는 것입니다. 즉, 객체의 동적 속성 접근을 정의하는 방법입니다.

✅ 인덱스 시그니처 사용 예시

간단하게 인덱스 시그니처에 대한 예시를 보도록 하겠습니다.

// 예시 1
type CountryCodes = {
    [key : string] : string;
};

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

타입 별칭 CountryCodes 안에 있는 대괄호 안에 있는 부분인 '[key : string]' 이 부분은 key에 대한 타입입니다. 그리고 '[key : string] : string;' 여기에서 대괄호 다음에 오는 ': string' 이 부분은 value의 타입입니다.

한 가지 예시를 더 보겠습니다.

// 예시 2
type CountryNumberCodes = {
    [key : string] : number;
    Korea: string; // 반드시 있어야하는 프로퍼티 지정
};

let countryNumberCodes = {
    Korea: "ko",
};

위의 예시는 잘 못 된 예시입니다. 천천히 하나씩 보면서 수정해보겠습니다.
일단 위 타입 별칭 CountryNumberCodes에서 'Korea: string;' 는 꼭 있어야하는 프로퍼티입니다. 그래서 아래 변수 countryNumberCodes를 보면 Korea: "ko" 가 꼭 들어가 있는게 보입니다. 하지만 이 코드를 돌려보면 오류가 납니다. 이유가 무엇일까요?

위 코드에서 오류가 나는 이유는 '[key : string] : number;' key와 value의 타입과 'Korea' 의 타입이 일치하지 않기 때문입니다. 그래서 코드를 올바르게 수정을 하려면

// 올바른 예시 2
type CountryNumberCodes = {
    [key : string] : number;
    Korea: number; // 반드시 있어야하는 프로퍼티 지정
};

let countryNumberCodes = {
    Korea: 410,
};

key와 value의 타입과 'Korea' 의 타입이 일치하도록 코드를 작성해야합니다.

이렇게 이번 포스팅에서는 타입 별칭과 인덱스 시그니처에 대해 알아보았습니다.
그럼 다음 포스팅으로 만나겠습니다.

위의 내용은 <한 입 크기로 잘라먹는 타입스크립트> 강의 내용을 참고하면서 작성했습니다.