타입 별칭과 인덱스 시그니처

한 입 크기로 잘라먹는 타입스크립트 - 타입 별칭과 인덱스 시그니처

- src/chapter4.ts

// 타입 별칭 : 타입을 변수처럼 정의해서 사용
// 2명의 변수로 페이지가 꽉찰 뿐만 아니라, 타입 정의 코드가 중복된다.
let user: {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
} = {
    id: 1
  , name: '송진성'
  , nickname: 'Jint'
  , birth: '1994.05.05'
  , bio: '안녕하세요'
  , location: '연신내'
};

let user2: {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
} = {
    id: 2
  , name: '홍길동'
  , nickname: 'Hong'
  , birth: '1894.05.05'
  , bio: '안녕하세요'
  , location: '고양시'
};

// 별칭으로 만든 User 타입 생성 - 공통적으로 type을 적용해야 할 때
// 코드 중복 제거
type User = {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
    // extra: string; // User 타입을 사용하는 객체들에 일괄 적용
};

// 타입 어노테이션으로 객체 타입 리터럴을 일일이 다 작성할 필요 없다.
// 타입 별칭 명시
let user3: User = {
    id: 1
  , name: '송진성'
  , nickname: 'Jint'
  , birth: '1994.05.05'
  , bio: '안녕하세요'
  , location: '연신내'
};

let user4: User = {
    id: 2
  , name: '홍길동'
  , nickname: 'Hong'
  , birth: '1894.05.05'
  , bio: '안녕하세요'
  , location: '고양시'
};

// 타입 별칭 사용시 주의사항
// 1. 같은 스코프 내에서 동일한 이름 사용하지 않기 (중복X)
function func() { // 다른 스코프라 가능
    type User = {};
}

타입스크립트 타입 관련 코드들은 컴파일 결과 자바스크립트 코드에선 제거되는데, 타입 별칭으로 만든 타입들도 제거되는지 확인한다.

- Terminal

tsc

컴파일 후 자바스크립트 파일을 확인한다.

- dist/chapter4.js

// 타입 별칭 : 타입을 변수처럼 정의해서 사용
// 2명의 변수로 페이지가 꽉찰 뿐만 아니라, 타입 정의 코드가 중복된다.
let user = {
    id: 1,
    name: '송진성',
    nickname: 'Jint',
    birth: '1994.05.05',
    bio: '안녕하세요',
    location: '연신내'
};
let user2 = {
    id: 2,
    name: '홍길동',
    nickname: 'Hong',
    birth: '1894.05.05',
    bio: '안녕하세요',
    location: '고양시'
};
// 타입 어노테이션으로 객체 타입 리터럴을 일일이 다 작성할 필요 없다.
// 타입 별칭 명시
let user3 = {
    id: 1,
    name: '송진성',
    nickname: 'Jint',
    birth: '1994.05.05',
    bio: '안녕하세요',
    location: '연신내'
};
let user4 = {
    id: 2,
    name: '홍길동',
    nickname: 'Hong',
    birth: '1894.05.05',
    bio: '안녕하세요',
    location: '고양시'
};
// 타입 별칭 사용시 주의사항
// 1. 같은 스코프 내에서 동일한 이름 사용하지 않기 (중복X)
function func() {
}
export {};

타입 별칭 정의가 다 사라진 것을 확인할 수 있다.

- src/chapter4.ts

...
// 인덱스 시그니처 : 객체 타입의 정의를 더 유연하게 하도록 도와줌
// 즉, key 와 value 의 규칙을 기준으로 객체의 타입을 정의할 수 있는 문법이다.
/*
type CountryCodes = {
    Korea: string;
    UnitedState: string;
    UnitedKingdom: string;
    // 200개가 더 추가되려면 끔찍하다.
};
*/
type CountryCodes = {
    [key: string]: string;
};

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

// 인덱스 시그니처 활용2
type CountryNumberCodes = {
    [key: string]: number;
}

let countryNumberCodes: CountryNumberCodes = {
    Korea: 410
  , UnitedState: 840
  , UnitedKingdom: 826
};

// 인덱스 시그니처 사용시 주의사항
type CountryNumberCodes2 = {
    [key: string]: number;
    Korea: number; // 반드시 포함해야 하는 항목 추가
    // Korea: string; // 항목 추가시, 인덱스 시그니처의 value 타입과 일치하거나 호환해야 된다.
}
// 타입 오류 발생X : 인덱스 시그니처 타입은 규칙을 위반하지만 않으면 모든 객체를 허용.
// let countryNumberCodes2: CountryNumberCodes2 = {};
// 해결 방법 : 인덱스 시그니처에 반드시 포함해야 하는 항목 추가
let countryNumberCodes3: CountryNumberCodes2 = {
    Korea: 410
};

참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런