[모던리액트딥다이브] 1.7 선택이 아닌 필수, 타입스크립트

1.7 선택이 아닌 필수, 타입스크립트

타입스크립트란?

TypeScript is JavaScript with syntax for types.
(= 자바스크립트 문법에 타입을 추가한 것)

왜 사용하는가?

자바스크립트는 동적 타입 언어이기 때문에 코드를 실행했을 때만 에러를 확인 할 수 있습니다.
하지만 타입스크립트는 빌드 타임에 타입 에러를 확인 할 수 있기 때문에 에러를 미리 찾을 수 있어 디버깅하기에 유리합니다.

타입스크립트를 사용할 때 참고할 팁

1. any 대신 unknown을 사용하자

any 타입은 모든 타입을 받아들이기 때문에 타입스크립트의 이점을 없앱니다.
불가피한 경우에만 사용하는 것을 권장합니다.

타입을 아직 단정할 수 없는 경우에는
unknown을 사용한 후 타입가드를 통해 타입을 좁혀나가는 것이 좋습니다다.

2. 타입 가드

타입 가드는 타입을 좁히는 것을 의미합니다.
타입 가드를 하는 방법에는 여러 가지가 있습니다.

instanceof와 typeof

function padLeft(padding: number | string, input: string): string {
  if (typeof padding === 'number') {
    return ' '.repeat(padding) + input;
  }
  return padding + input;
}

위와 같이 padding의 타입이 한 가지가 아닐 경우,
typeof를 사용하여 타입을 구체화 할 수 있습니다.

class CustomError extends Error {
  constructor() {
    super();
  }

  get message() {
    return '커스템 에러입니다';
  }
}

async function fetchSomething() {
  try {
    //fetch로 요청을 하는 함수
  } catch (e) {
    //e는 unknown 타입. Error 타입을 명시적으로 입력해줄 수 없음.

    if (e instanceof CustomError) {
      //do something
    }
  }
}

위와 같은 경우에는 catch 문의 e의 타입을 Error 타입으로 명시적으로 선언해줄 수 없기 때문에

instanceof Error 또는 Error 타입을 상속받은 클래스를 활용하여 type을 좁힌 후에 error 처리를 해줄 수 있습니다.

in

객체에 키가 존재하는지 확인하는 용도로 사용됩니다.

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    return animal.swim();
  }

  return animal.fly();
}

in을 사용해서 객체 안에 해당 키값이 있는지 확인하는 방식으로 타입가드를 할 수 있습니다.

3. 제네릭

제네릭은 다양한 타입의 값으로 비슷한 작업을 할 때 사용할 수 있습니다.

function identity<Type>(arg: Type): Type {
  return arg;
}

const myIdentity = identity<number>(123);
console.log(myIdentity);
// 123

const myIdentity2 = identity<string>('123');
console.log(myIdentity2);
// '123'

identity 함수는 제네릭을 사용했습니다.
같은 동작을 하지만 함수를 사용할 때 타입을 입력하여 다양한 타입의 인자들을 받을 수 있게 했습니다.

4. 인덱스 시그니처

객체의 키에 원하는 타입을 부여하는 방식입니다.

type OnlyBoolsAndHorses = {
  [key: string]: boolean | Horse;
};

const conforms: OnlyBoolsAndHorses = {
  del: true,
  rodney: false,
};

동적인 객체를 정의할 때 유용하지만,
키의 범위가 지나치게 커지기 때문에 객체의 키를 동적으로 선언하는 경우를 지양해야 합니다.

런타임 때까지 객체의 속성을 알 수 없을 경우에만 인덱스 시그니처를 사용하는 것을 권장합니다.
(예를 들어 CSV 파일을 로드해서 데이터를 가져오는 경우)

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = 'miffy' | 'boris' | 'mordred';

//Record 타입
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: 'Persian' },
  boris: { age: 5, breed: 'Maine Coon' },
  mordred: { age: 16, breed: 'British Shorthair' },
};

//매핑된 타입을 사용한 인덱스 시그니처
type Cat = { [name: 'miffy' | 'boris' | 'mordred']: CatInfo };

Record나 매핑된 타입을 사용하는 것이 좋습니다.

---

참고:

이펙티브 타입스크립트

https://www.typescriptlang.org/docs/handbook/intro.html,