[TIL] 내배캠4기-Typescript-80일차

ts를 프로젝트에 셋업하기

tsc --init

tsconfig.json의 "OutDir" 수정 시
➡️ ts파일이 컴파일될 곳 결정

컴파일 방법

tsc -w

코드 가독성

class User {
  // default: public 속성
  email: string;
  private name: string;
  readonly city: string = "";
  constructor(email: string, name: string) {
    this.email = email;
    this.name = name;
  }
}

생성자 부분 코드가 한눈에 들어오지 않는다.

class User {
  protected _courseCount = 1;
  readonly city: string = "";
  constructor(
    public email: string,
    public name: string 
    private userId: string
  ) {}

더 직관적인 코드.

interface

클래스보다 넓고 피상적인 관점으로 쓰인다.

interface Member {
  readonly dbId: number;
  email: string;
  userId: number;
  googleId?: string;

interface의 method 작성법

  // startTrail: () => string;
  // 직관적인 작성법
  startTrail(): string;
  getCoupon(couponname: string, value: number): number;
}

reopening

interface의 특징 중 하나로 reopening 이 있다.

interface Member {
  github: string;
}

앞서 Member를 선언했어도, 재 선언이 가능.

extends

interface Admins extends Member {
  role: "admin" | "ta";
}

실습 예시

const hj: Admins = {
  dbId: 22222,
  role: "admin",
  email: "h@h.com",
  userId: 233,
  github: "github",
  startTrail: () => {
    return "trail started";
  },

💡 인터페이스에 정의한 파라미터의 이름과 똑같이 짓지 않아도 됨.
💡 couponname과 이름을 똑같이 매칭시키지 않아도 된다.

  getCoupon: (name: "할인권", off: 10) => {
    return 10;
  },
};

📌 readonly 이외의 속성 값은 바꿀 수 있음

hj.userId = 224;
// hj.dbId = 22223; // error를 뱉는다.

interface 와 type의 차이점

= 이 있고 없고..

 type Guitarist = {
   name: string;
   active: boolean;
   albums?: (string | number)[];
 };

interface Guitarist {
  name: string;
  active: boolean;
  albums?: (string | number)[];
}