[모던 리액트 Deep Dive] 타입스크립트

TypeScript is JavaScript with syntax for types
자바스크립트 문법에 타입을 가미한것이 타입스크립트이다.

 

타입스크립트는 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다.

런타임까지 가지 않더라도 코드를 빌드하는 시점에서 이미 에러가 발생할 가능성이 있는 코드를 확인할 수 있다.

---

타입스크립트 활용법

any 대신 unknown을 사용하자

• any
  • 모든 타입을 허용하므로 타입 안전성이 낮다.
  • 타입 추론이 어렵다.
• unknown
  • 모든 타입을 허용하지만, 실제 사용 시 타입 검사가 필요하므로 타입 안전성이 높다.
  • 다른 타입으로 좁혀질 수 있어, 타입 추론이 용이하다. 

타입 가드를 적극 활용하자

조건문 + 타입가드를 사용하면 타입을 효과적으로 좁힐 수 있어 조금 더 명확하게 사용할 수 있다.

instanceof : 지정한 인스턴스가 특정 클래스의 인스턴스인지 확인할 수 있는 연산자
typeof : 특정 요소에 대해 자료형을 확인하는데 사용
in : property in object로 사용되며, 주로 어떤 객체에 키가 존재하는지 확인하는 용도

 

제네릭(generic)

단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와주는 도구, 타입을 변수화 한 것

function getFirstAndLast<T>(list: T[]) : [T, T] {
  return [list[0], list[list.length - 1]]
}

const [first, last] = getFirstAndLast([1,2,3,4,5])

first // number
last // number

const [first, last] = getFirstAndLast(['a', 'b', 'c', 'd', 'e'])

first // string
last // string

• 타입스크립트 컴파일러가 입력 배열의 타입을 자동으로 추론하여 T에 대입한다. 
• 따라서 함수 반환값의 타입도 자동으로 추론되는 것이다.

---

타입스크립트 전환 가이드

tsconfig.json 먼저 작성하기

{
    // TypeScript 컴파일러의 옵션들을 지정하는 속성
    "compilerOptions": { 
        "outDir": "./dist", 
        "allowJs": true,
        "target": "es5", 
    },
    "include": ["./src/**/*"]
}

• compilerOptions:
  • outDir: 컴파일된 JavaScript 파일이 ./dist 디렉토리에 출력, .ts나 .js가 만들어진 결과를 넣어두는 폴더
  • allowJs: .js 파일을 허용할 것인지 여부
  • target: 결과물이 될 js 버전을 지정
• include: 트랜스파일할 js와 ts 파일을 지정한다.

JSDoc과 @ts-check를 활용해 점진적으로 전환하기

js 파일을 ts 로 전환하지 않더라도 타입을 체크할 수 있는 방법

하지만 JSDoc을 추가하는 것도 손이 가는 작업이기에 추천하지 않는다.

 

타입 기반 라이브러리 사용을 위해 @types 모듈 설치하기

타입스크립트로 작성되지 않은 코드에 대한 타입을 제공하는 라이브러리 @types 설치하기

.ts로 전환시 import에 "Cannot find modul 'lodash' or its corresponding type declarations" 에러가 출력된다면 반드시 설치

 

파일 단위로 조금씩 전환하기

상수와 유틸과 같이 별도의 의존성을 가지고 있지 않은 파일을 먼저 전환해보기

상수의 경우 string, number와 같이 원시값 대신 가능한 한 타입을 좁혀보는 것을 추천