[이펙티브 타입스크립트] 아이템59 ~ 아이템62

[아이템59] 타입스크립트 도입 전에 @ts-check와 JSDoc으로 시험해 보기

• 파일 상단에 // @ts-check를 추가하면 자바스크립트에서도 타입 체크를 수행할 수 있다.
• 전역 선언과 서드파티 라이브러리의 타입 선언을 추가하는 방법을 익히자.
• JSDoc 주석을 잘 활용하면 자바스크립트 상태에서도 타입 단언과 타입 추론을 할 수 있다.
• JSDoc 주석은 중간 단계이기 때문에 너무 공들일 필요는 없습니다. 최종 목표는 .ts로 된 타입스크립트 코드다.

[아이템60] allowJs로 타입스크립트와 자바스크립트 같이 사용하기

• 점진적 마이그레이션을 위해 자바스크립트와 타입스크립트를 동시에 사용할 수 있게 allowJs 컴파일러 옵션을 사용하자

• 대규모 마이그레이션 작업을 시작하기 전에, 테스트와 빌드 체인에 타입스크립트를 적용해야 한다.

[아이템61] 의존성 관계에 따라 모듈 단위로 전환하기

의존성과 관련된 오류 없이 작업하려면, 다른 모듈에 의존하지 않는 최하단 모듈부터 작업을 시작해서 의존성이 최상단에 있는 모듈을 마지막으로 완성해야 한다.

• 서드파티 라이브러리와 외부 API 의 타입 정보를 가장 먼저 해결해야 한다.

ex) lodash 라이브러리 사용

npm install --save-dev @types/lodash

@types/lodash는 lodash의 타입 정보를 담고 있으며, 타입 정보는 lodash 라이브러리를 사용하는 모든 부분에 적용된다.

❗ 타입스크립트로 전환하며 발견하게 되는 오류

• 선언되지 않은 클래스 멤버

자바스크립트는 클래스 멤버 변수를 선언할 필요가 없지만, 타입스크립트에서는 명시적으로 선언해야 한다.

class Greeting {
  greeting: string;
  name: any;
  constructor(name) {
    this.greeting = "Hello";
    this.name = name;
  }
  greet() {
    return this.greeting + " " + this.name;
  }
}

• 타입이 바뀌는 값

const state = {};
state.name = "New York"; // ❌ '{}' 유형에 'name' 속성이 없습니다.
state.capital = "Seoul"; // ❌ '{}' 유형에 'capital' 속성이 없습니다.

const state = {
  name: "New York",
  capital: "Seoul",
}; // 정상

interface State {
  name: string;
  capital: string;
}
const state = {} as State;
state.name = "New York"; // 정상
state.capital = "Seoul"; // 정상

[아이템62] 마이그레이션의 완성을 위해 noImplicitAny 설정하기

• noImplicitAny 설정을 활성화하여 마이그레이션의 마지막 단계를 진행해야 한다. noImplicitAny 설정이 없다면 타입 선언과 관련된 실제 오류가 드러나지 않는다.

• noImplicitAny를 전면 적용하기 전에 로컬에서부터 타입 오류를 점진적으로 수정해야 한다. 엄격한 타입 체크를 적용하기 전에 팀원들이 타입스크립트에 익숙해질 수 있도록 시간을 주자.