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

챔수·2023년 5월 31일
0

개발 공부

목록 보기
71/101

열거형(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}살 입니다.`);
  }
}
  • JS와는 다르게 constructor이용해 초기화하는 값들을 전부 상단에 정의 해줘야 한다.
  • constructor내 인자로 받을 때에도 정확히 타입을 명시 해줘야 한다.
profile
프론트앤드 공부중인 챔수입니다.

0개의 댓글