아이템 58) 모던 자바스크립트로 작성하기

1. ECMAScript 모듈 사용하기

2. 프로토타입 대신 클래스 사용하기

class Person {
  first: string;
  last: string;

  constructor(first: string, last: string) {
    this.first = first;
    this.last = last;
  }

  getName() {
    return this.first + ' ' + this.last;
  }
}

const marie = new Person('Marie', 'Curie');
const personName = marie.getName();

3. var대신 let/const 사용하기

4. for(;;;) 대신 for-of 또는 배열 매서드 사용하기

declare let array: number[];
for (const el of array) {
  // ...
}

인덱스가 필요한 경우 forEach 사용하기

declare let array: number[];
array.forEach((el, i) => {
  // ...
});

5. 함수 표현식보다 화살표 함수 사용하기

class Foo {
  method() {
    console.log(this);
    [1, 2].forEach(function(i) {
      console.log(this);
    });
  }
}
const f = new Foo();
f.method();
// Prints Foo, undefined, undefined in strict mode
// Prints Foo, window, window (!) in non-strict mode

위의 예시보다는 아래의 예시처럼 사용하기

class Foo {
  method() {
    console.log(this);
    [1, 2].forEach(i => {
      console.log(this);
    });
  }
}
const f = new Foo();
f.method();
// Always prints Foo, Foo, Foo

6. 단축 객체 표현과 구조 분해 할당 사용하기

단축 객체 표현 예시)

declare let obj: {props: {a: string; b: number; }; };
const {props} = obj;
const {a, b} = props;

구조 분해 할당 예시)

declare let obj: {props: {a: string; b: number; }; };
const points = [
  [1, 2, 3],
  [4, 5, 6],
];
points.forEach(([x, y, z]) => console.log(x + y + z));
// Logs 6, 15

7. 함수 매개변수 기본값 사용하기

function parseNum(str, base=10) {
  return parseInt(str, base);
}

8. 저수준 프로미스나 콜백 대신 async/await 사용하기

async function getJSON(url: string) {
  const response = await fetch(url);
  return response.json();
}

9. 연관 배열에 객체 대신 Map과 Set 사용하기

10. 타입 스크립트에 use strict 넣지 않기

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

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

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

• 점진적 마이그레이션을 위해 자바스크립트와 타입스크립트를 동시에 사용할 수 있게 allowJs 컴파일러 옵션을 사용합시다.
• 대규모 마이그레이션 작업을 시작하기 전에, 테스트와 빌드 체인에 타입스크립트를 적용해야 합니다.

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

• 마이그레이션의 첫 단계는, 서드 파티 모듈과 외부 API 호출에 대한 @types를 추가하는 것입니다.
• 의존성 관계도의 아래에서부터 위로 올라가며 마이그레이션을 하면 됩니다. 첫 번째 모듈은 보통 유틸리티 모듈입니다. 의존성 관계도를 시각화하여 진행 과정을 추적하는 것이 좋습니다.
• 이상한 설계를 발견하더라도 리펙터링하면 안됩니다. 마이그레이션 작업은 타입스크립트 전환에 집중해야 하며, 나중의 리펙터링을 위해 목록을 만등러 두는 것이 좋습니다.
• 타입 스크립트로 전환하며 발전하게 되는 일반적인 오류들을 놓치지 않아야합니다. 타입 정보를 유지하기 위해 필요에 따라 JSDoc 주석을 활용해야 할 수도 있습니다.

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

• noImplicitAny 설정을 활성화하여 마이그레이션의 마지막 단계를 진행해야 합니다. noImplicitAny 설정이 없다면 타입 선언과 관련된 실제 오류가 드러나지 않습니다.
• noImplicitAny를 전면 적용하기 전에 로컬에서부터 타입 오류를 점진적으로 수정해야 합니다. 엄격한 타입 체크를 적용하기 전에 팀원들이 타입스크립트에 익숙해질 수 있도록 시간을 줍니다.

출처

<이펙티브 타입스크립트> (댄 밴더캅 지음, 장원호 옮김, 인사이트, 2021)