[TypeScript] 이펙티브 타입스크립트 정리 - 아이템 17 ~ 19

이펙티브 타입스크립트 읽고 정리

아이템 1 ~ 5 보러가기
아이템 6 ~ 8 보러가기
아이템 9 ~ 13 보러가기
아이템 14 ~ 16 보러가기

 

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

함수의 매개변수를 수정하지 않는다면 readonly로 선언하는 것이 좋다. 함수 내부에서 매개변수를 수정하는 코드를 추가하면 타입에러를 발생시켜 준다.

 

아래 코드와 같이 Readonly를 사용하더라도 중첩된 객체까지 readonly가 적용되지 않는다. 얕게만 적용된다.

interface A {
  a: {
    b: number;
  }
}

const obj: Readonly<A> = {
  a: {
    b: 1
  }
};

obj.a.b = 2;

 

 

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

매핑 된 타입은 한 객체가 또 다른 객체와 정확히 동일한 속성을 가지는지를 확인할 때 유용하다.

 

두 객체를 비교할 때 oldProps[k] !== newProps[k] 이 코드만으로 비교가 가능하지만, 속성 중 비교하지 않아도 될 속성이 존재하는 경우 아래의 REQUIRES와 같은 매핑된 타입을 사용해서 타입으로 제한을 추가할 수 있다.

const REQUIRES: {[k in keyof Props]: boolean} = {
  a: true,
  b: true,
  c: false,
}

function diff(oldProps: Props, newProps: Props) {
  for (let k in oldProps) {
    if (oldProps[k] !== newProps[k] && REQUIRES[k]) {
        return true;
    }
  }
	
  return false;
}

 

 

1️⃣9️⃣ 아이템 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기

타입스크립트에서는 항상 명시적으로 타입을 작성하지 않아도 타입 추론 기능을 제공해준다. 이를 활용하여 모든 값에 타입을 명시하지 않아도 된다.

 

아래의 코드는 number라는 타입을 명시하지않아도 12값만 봐도 숫자 타입으로 추론될 것을 예측하기가 쉽다. 그래서 굳이 number라는 타입을 추가할 필요는 없다.

let num: number = 12

 

✨ 원시 타입의 경우 함수의 매개변수정도를 제외하고는 타입을 명시하지 않고 초기값만 표시 하는 것이 좋다.

 

함수 시그니처에는 타입 구문을 포함하는 것이 좋다. 함수 작성시부터 타입을 추가하여 함수의 기능을 명확히 할 수 있고, 함수의 코드 작성 시 잘못된 값을 사용하는 것을 금방 파악할 수 있다.

 

변수 선언시 타입을 사용하게 되면 타입 오류의 시점을 변수 선언시로 옮길 수 있다. 만약, 변수 선언 시 타입을 작성하지 않았다면 변수를 사용하는 코드에서 오류가 발생하게 된다. 이는 문제의 원인을 찾기 어렵게 만든다.

interface Person {
  name: string;
}

const person: Person = {
  nmme: ''; // 여기에서 타입 오류 발생
};

const person2 = {
  nmme: '';
};

const fn = (person: Person) => {

};

fn(person2); // 여기에서 타입 오류 발생

 

함수가 비동기 함수라면 함수에 async 키워드를 붙여서 Promise를 반환하는 것이 좋다.

 

아래와 같이 fetch를 사용 후 값을 캐시에 저장하는 함수이다. 이때 캐시에 저장된 값은 즉시 반환 되어 Promise를 반환하지 않게 되어 타입 오류가 발생하게 된다. 해당 함수를 사용하는 입장에서는 캐싱된 값인지 Promise인지 판별하여 코드를 작성하지 않기 때문에 항상 Promise를 반환해도 상관이 없다. 그래서 비동기 함수를 생성하는 경우 async를 활용하게 되면 타입오류를 피할 수 있다.

const fn = (key: string): Promise<number> => {
  if (cache[key]) {
    return cache[key];
  }

  return fetch('url');
}

 

 

🎁 정리

1. 함수의 매개변수와 반환 타입은 타입을 정의하자
2. 지역 변수가 원시타입이면서 초기값을 할당한다면 타입을 생략하자
3. 객체는 변수 선언 시 타입을 지정해주자
4. 비동기함수라면 async 를 붙여주자