0043. TypeScript 공부하기3 - 구조적/명목적 타입 시스템, 타입 별칭, 인덱스 시그니처, 열거형 타입(enum)

섹션 2. 타입스크립트 기본

4강. 객체

객체 리터럴 타입 : { }를 이용하여 객체의 타입을 정의하는 방식

user.id에 마우스를 올려보면 property 타입에 id가 number로 나타나는 것을 볼 수 있다.

 

1) 구조적 타입 시스템

• 타입스크립트에서는 Object 같은 이런 단순한 이름으로 Type을 정의하는 것이 아니라, 이 객체를 이루는 프로퍼티나 매소드가 어떻게 생겼는지 구조를 기준으로 타입을 정의한다.
• 프로퍼티를 기준으로 타입을 결정하는 시스템
  = Property Based Type System
• 타입스크립트

 

2) 명목적 타입 시스템

• 이름만으로 타입을 정의하는 것
• 구조적 타입 시스템과 반대의 개념
• 자바스크립트

 

3) 선택적 프로퍼티(Optional Property)

id를 모르면 안 적어도 되는데 적으면 number 형식으로 적어야 함

 

4) 바뀌면 안되는 값 고정하기(readonly)

바뀌면 안 될것 같은 Key값은 읽기만 가능하도록 만들어야 한다.

 

readonly를 붙여주면 에러가 나면서 수정을 방지한다.

 

 

 

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

1) 타입 별칭(Type Alias)

변수를 선언하듯 타입을 별도로 정의하여 코드 중복을 막고 편의성을 높임

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

let user: User = {
    id: 1,
    name: "임혁신",
    nickname: "innovation IM",
    birth: "2000,01.01",
    bio: "Hello",
    location: "seoul",
};

let user2: User = {
    id: 2,
    name: "김혁신",
    nickname: "innovation KIM",
    birth: "2001,01.01",
    bio: "Hello~",
    location: "busan",
};

User라는 타입을 별도로 정의함으로써, 매번 정의해야 되는 낭비를 막음

 

2) 인덱스 시그니처(Index Signature)

Key와 Value의 타입을 기준으로 규칙을 이용해서 아주 유연하게 객체의 타입을 정의하는 문법

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

let countryCodes: CountryCodes = {
    Korea: "KO",
    UnitedStates: "US",
    UnitedKingdom: "UK",
};

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

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

 

이 문법은 위반만 하지 않으면 오류를 걸러내지 않으므로 객체 내의 값이 비어 있어도 문제가 없다.

 

꼭 넣어야 하는 필수 항목이 있다면 key와 value를 정의하는 부분에 기입하면 필수값이 된다.

 

 

6강. 열거형 타입(Enumerable Type)

1) enum 타입

여러 가지 값들에 각각 이름을 부여해 열거해 두고 사용하는 타입

자바스크립트에는 없고, 타입스크립트에서만 특별히 제공되는 새로운 타입

 

enum Role {
    ADMIN = 0,
    USER = 1,
    GUEST = 2,
}

const user1 = {
    name: "임혁신",
    role: Role.ADMIN,
};

const user2 = {
    name: "홍길동",
    role: Role.USER,
};

const user3 = {
    name: "아무개",
    role: Role.GUEST,
};

console.log(user1, user2, user3);

각각의 Role을 미리 지정하고 할당하는 방식

유저 종류의 이름을 잊어버리거나 헷갈리지 않게 된다.

 

console 실행 결과

 

2) 숫자형 enum

enum Role {
    ADMIN,
    USER,
    GUEST,
}

첫 부분에 숫자를 할당하지 않아도 0부터 지정이 된다.

시작 숫자를 바꾸고 싶으면 맨 위에 ADMIN만 지정하면 그 뒤부터 +1씩 지정된다.

 

enum Role {
    ADMIN = 100,
    USER,
    GUEST,
}

각각 100, 101, 102로 지정된 것을 볼 수 있다.

 

 

3) 문자형 enum

enum Role {
    ADMIN = 100,
    USER,
    GUEST,
}

enum Language {
    Korean = "KO",
    English = "EN",
}

const user1 = {
    name: "임혁신",
    role: Role.ADMIN,
    language: Language.English,
};

const user2 = {
    name: "홍길동",
    role: Role.USER,
    language: Language.Korean,
};

const user3 = {
    name: "아무개",
    role: Role.GUEST,
};

console.log(user1, user2, user3);

숫자뿐만 아니라 문자도 지정이 가능하다.

 

출력 결과

 

enum은 컴파일 결과로 사라지지 않는다.