[TypeScript] 문법 (열거형, 타입별칭, 타입 추론, 클래스)

챔수·2023년 5월 31일

typescript

개발 공부

목록 보기

71/100

열거형(Enum)

특정 값의 집합을 정의할때 사용한다. 숫자열 열거형와 문자형 열거형을 지원한다.

숫자형 열거형

디폴트 값으로 숫자형을 사용.
각 값은 자동으로 0부터 1씩 증가.
수동으로 값을 지정해 줄수도 있다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
  
let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

열거형은 가독성을 높게 만들어주고 오타와 같은 실수를 방지 해준다.

문자형 열거형

열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화 해야 한다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

문자형 열거형에는 숫자형 열거형과 다르게 auto-incrementing이 없어 항상 명확한 값이 나와 읽기 편하다.
주로 문자열 열거형은 외부에서 가져온 값을 다루기 위해 사용한다. 그 예로 HTTP요청 방식을 나타내는 열거형을 정의할 수 있다.

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  (생략)
}

makeRequest("/api/data", HttpMethod.Post);

역 매핑

숫자형 열거형에만 존재하는 특징.
열거형의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수 있음.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

타입 별칭

타입의 새로운 이름을 만드는 것(새로운 이름으로 기존의 타입을 참조하는 것).
키워드 type을 사용해서 작성.

type Person = {
  id: number;
  name: string;
  email: string;
}

//Commentary 인터페이스에서 Person 타입을 참조.
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

//객체에서 Commentary 인터페이스를 참조.
let comment1: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@abcd.com",
    },
}

// Commentary를 참조하고 있기 때문에 content 프로퍼티를 작성하지 않아서 컴파일 에러 발생.
let kimcoding: Commentary = {
    id: 1,
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@abcd.com",
    },
};

// Person 타입 내부에 isDeveloper 프로퍼티가 존재하지 않기 때문에 isDeveloper 프로퍼티를 작성할 시 컴파일 에러 발생.
let kimcoding: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@abcd.com",
        isDeveloper: true,
    },
};

타입 별칭으로 만들어진 타입을 참조할 시 인터페이스와 마찬가지로 내부에 정의된 프로퍼티들을 전부 참조해야 한다.

인터페이스와 타입별칭

이 둘은 타입스크립트에서 거의 비슷하지만 조금 다른 특징들을 가지고 있다.

타입별칭

vsCode에디터 작성시 참조하고있는 부분에 마우스를 올려보면 타입별칭 내부에 어떤 프로퍼티들이 정의되어 있는지 확인가능.
extends로 확장 불가.

인터페이스

vsCode에디터 작성시 참조하고있는 부분에 마우스를 올려보면 타입별칭 내부에 어떤 프로퍼티들이 정의되어 있는지 확인불가.
extends로 확장 가능.

인터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입 둘 다 상속 가능하기 때문에 extends를 이용해 유연한 코드작성 가능.

타입추론

변수나 함수의 타입을 선언하지 않아도 타입스크립트가 자동으로 유추하는 기능이다.

let isNumber = 123;

이 경우, 타입스크립트는 isNumber의 타입을 자동으로 숫자(Number)로 추론한다.

클래스

타입스크립트에서의 클래스는 JS의 클래스와 비슷하지만 몇가지 추가된 기능이 있다.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}