타입스크립트 interface, type 컨벤션과 readonly 속성

자판기 미션에서 처음으로 적용한 타입스크립트!

타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲

앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑

이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해 정리해보았다.

interface / type

• 이름은 PascalCase를 사용한다.

• 멤버는 camelCase를 사용한다.

• I/T prefix를 사용하지 않는다.

나쁜 예

interface IFoo {
  Bar: string;
}

type TFoo = {
  Bar: string;
};

좋은 예

interface Foo {
  bar: string;
}

type Foo = {
  bar: string;
};

참고 자료: ts-style-guide

readonly 속성

readonly 속성은 interface 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다.

문법

interface CraftBeer {
  readonly brand: string;
}

interface객체로 선언하고 해당 프로퍼티를 수정할 경우 error가 발생한다.

let myBeer: CraftBeer = {
  brand: "Belgian Monk",
};
myBeer.brand = "Korean Carpenter"; // error!

readonly<T>

아래와 같이 작성해도 동일한 효과를 낼 수 있다.

interface IEmployee {
  empCode: number;
  empName: string;
}

let emp1: Readonly<IEmployee> = {
  empCode: 1,
  empName: "Steve",
};

readonly array

배열을 선언할 때 ReadonlyArray<T> 타입을 사용하면 읽기 전용 배열을 생성할 수 있다.

let arr: Readonly<number> = [1, 2, 3];
arr.splice(0, 1); // error
arr.push(4); // error
arr[0] = 100; // error

배열을 ReadonlyArray로 선언하면 배열의 내용을 변경할 수 없다.
선언하는 시점에만 값을 정의할 수 있으니 주의가 필요!

class에서 readonly

클래스의 속성에 readonly 키워드를 사용하면 접근은 가능하지만 변경이 불가능하다.

class Developer {
  readonly name: string;
  constructor(theName: string) {
    this.name = theName;
  }
}
let kkojae = new Developer("kkojae");
kkojae.name = "kkkkojae"; // error! name is readonly!

class 에서의 readonly는 단축해서 사용할 수 있다.

class Developer {
  constructor(readonly name: string) {}
}
let kkojae = new Developer("kkojae");
kkojae.name = "kkkkojae";

readonly속성과 interface 컨벤션을 확인한 후

코드를 너무 무지성으로 작성했던 것 같다...
앞으로는 컨벤션도 확인해가며 타입스크립트 코드를 작성해나가야겠다.

readonly에 대해서는 아직 궁금한 점이 남아있어 리뷰어님께 추가적으로 질문을 해보려한다!!

참고 자료: 타입스크립트 핸드북-class, 타입스크립트 핸드북-interface