230531_TIL(TypeScript 기초 (2))

🌱오늘 한 것

• 타입스크립트의 열거형(Enum), 인터페이스, 타입 별칭, 타입 추론, 클래스에 대해 학습 및 간단 실습을 진행했다.

🌱기억해야할 것

• HTTP Method들은 API 통신 시 자주 사용하기 때문에 아래와 같이 Enum으로 정의할 수 있다. 오타를 방지하고 코드의 가독성과 안정성을 높일 수 있다.

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

• 숫자형 Enum에서는 역매핑을 사용할 수 있다. key로 value를 얻을 수 있고, value로도 key를 얻을 수 있다.

• 인터페이스와 타입의 차이점

  • 인터페이스의 사용목적은 객체의 구조를 정의하기 위해서이고 타입 별칭은 다양한 타입 이름(닉네임)을 참조하기 위해서이다.

  • 인터페이스는 객체를 구성하는 프로퍼티나 메서드를 명시하고 유지하는게 유용하고 타입 별칭은 복잡한 타입을 단순화하고 공통적으로 사용되는 타입의 중복정의를 방지하기 위해 활용된다.

  • 타입별칭으로 정의한 타입은 마우스를 위에 가져다 대면 내부 프로퍼티를 알 수 있다.

  • 가장 중요한 차이점은 인터페이스는 상속받아서 확장이 가능한데 비해, 타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것 뿐이라 확장이 되지 않는다는 점이다.

• TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의해주어야 한다.

• 타입스크립트의 클래스 역시 extends 키워드를 사용하여 상속해서 확장할 수 있다.

• 외부에 드러내지 않을 멤버가 있다면 아래 코드처럼 private를 명시해 주자.

  class Person {
   public name: string;
   private age: number;
   ...

• readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

  • 프로퍼티를 초기화 할 때 readonly name: string; 이렇게 읽기 전용으로 설정했는데, 이후에 spooky.name = "멋진 스푸키"; 와 같이 값을 변경하려고 하면 에러가 발생한다. (당연함. 읽기전용임)

• TS와 클래스 간단 실습

class Animal {
  name: string;
  sound: string;

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

  speak(sound: string): void {
    console.log(`${this.name}(은/는) ${sound}하고 웁니다.`);
  }
}

class Mouse extends Animal {
  name: string;

  constructor(name: string) {
    super(name);
  }

  speak(sound = '찍찍') {
    super.speak(sound);
  }
}

class Cat extends Animal {
  name: string;
  constructor(name: string) {
    super(name);
  }

  speak(sound = '야옹') {
    super.speak(sound);
  }
}

let jerry = new Mouse('제리');
let tom = new Cat('톰');

jerry.speak();
tom.speak('냥냥');

🌱더 알아볼 것

• 타입 단언
• React에 TypeScript를 사용하는 예시 (Function 컴포넌트에 props를 인터페이스로 정의하는 방법 등)

🌱한 줄 감상

타입스크립트... 어렵다...! 그치만 아직 안 익숙해서 그런걸거라고 ... 자신을 다독여 본다 ^^ 그래도 이론이 잘 정리되어 있어서 공부하는데 엄청 막히진 않았다. JS 지식이 있으니 살짝 살짝 다른 문법을 적용시키는 게 은근 흥미롭기도 했다. 근데 아직까지는 실무에서 타입스크립트가 어떤식으로 적용되는 건지 명확하게 와닿지는 않았다. 다음 프리 프로젝트에서 타입 스크립트 사용해봐야 겠다!!!!!