이펙티브 타입스크립트(4)

남자김용준·2021년 11월 6일
0

아이템16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기

배열은 객체이므로 키는 숫자가 아니라 문자열이다. 인덱스 시그니처로 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드이다.

인덱스 시그니처에 number를 사용하기보다 Array나 튜플, 또는 ArrayLike 타입을 사용하는 게 좋다.

아이템17. 변경 관련된 오류 방지를 위해 readonly를 사용하기

function arraySum(arr: number[]){
  let sum = 0, num;
  while((num = arr.pop()) !== undefined){
    sum += num;
  }
  return sum;
}

function arraySum(arr: readonly number[]){
  let sum = 0, num;
  while((num = arr.pop()) !== undefined){
    // ~~~~ 'readonly number[]' 형식에 'pop' 속성이 없습니다.
    sum += num;
  }
  return sum;
}

readonly number[]

  • 배열의 요소를 읽을 수 있지만, 쓸 수는 없다.
  • length를 읽을 수 있지만, 바꿀 수는 없다(배열을 변경함).
  • 배열을 변경하는 pop을 비롯한 다른 메서드를 호출할 수 없다.
const a: number[] = [1,2,3];
const b: readonly number[] = a;
const c: number[] = b;
// ~ 'readonly number[]' 타입은 'readonly' 이므로 변경 가능한 'number[]' 타입에 할당될 수 없다.

readonly를 사용하면

  • 타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크한다.
  • 호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장을 받게 된다.
  • 호출하는 쪽에서 함수에 readonlyu배열을 매개변수로 넣을 수도 있다.

만약 함수가 매개변수를 수정하지 않는다면, readonly로 선언하는 것이 좋다.

readonly 매개변수는 인터페이스를 명확하게 하며, 매개변수가 변경되는 것을 방지한다.

readonly를 사용하면 변경하면서 발생하는 오류를 방지할 수 있고, 변경이 발생하는 코드도 쉽게 찾을 수 있다.

const와 readonly 차이를 이해해야 한다.

readonly는 얕게 동작한다.

아이템18. 매핑된 타입을 사용하여 값을 동기화하기

매핑된 타입을 사용해서 관련된 값과 타입을 동기화하도록 하자.

인터페이스에 새로운 속성을 추가할 때, 선택을 강제하도록 매핑된 타입을 고려해야한다.

=> 다시 읽어보기

profile
frontend-react

0개의 댓글