6장 타입 선언과 @types

item 45

• npm 내 의존성은 dependenices, devDependencies, peerDependencies로 나뉨.
• 이들의 구분은 런타임 사용 여부로 나뉘며, peerDependencies의 경우, 플러그인같이 런타임에 필요하지만 의존성을 직접 관리하지 않는 라이브러리들이 포함됨.

• npx tsc를 통해 devDependencies에 설치된 타입스크립트 컴파일러를 실행할 수 있음.

• 타입 정보가 포함되어 있지 않을 때, DefinitelyTyped (타입스크립트 커뮤니티에서 유지보수하고 있는 js 라이브러리 타입을 정의한 모음)에서 타입 정보를 얻을 수 있음.

item 46

• 타입스크립트 사용 시 타입 선언과 관련된 세 가지 고려사항이 있음.
• 라이브러리의 버전
• 라이브러리를 업데이트하는 경우 해당 타입 역시 업데이트 해야 함.
• 타입 선언 버전
• 타입스크립트로 작성된 라이브러리라면 타입 선언을 자체적으로 포함하고, js로 작성된 라이브러리라면 타입 선언을 DefinitelyTyped에 공개하는 것이 좋음.
• 타입스크립트 버전

• npx install --save-dev @types/loadash@ts3.1과 같이 특정 버전에 대한 타입 정보를 설치할 수 있음.

item 47

• 공개 API 매개변수에 사용되는 타입은 명시적으로 export 하자.

item 48

• 주석 시 //대신 /**/를 사용하자.

• 이 외에도 @param, @returns로 매개변수와 리턴값에 대한 정보, 간단한 마크다운도 주석으로 보여줄 수 있음.

• 다만 주석에 타입 정보를 쓰지 않도록 주의하자.

item 49

• 콜백 함수에서 this를 사용해야 한다면, 타입 정보를 명시하자.

function addKeyListener (
  el: HTMLElement,
  fn: (this: HTMLElement, e:KeyboardEvent) => void
) {
  el.addEventListener('keydown', e => {
    fn(e); // this 바인딩 체크
  })
}

item 50

• 오버로딩 타입보다는 조건부 타입 사용하기.

// 오버로딩 타입
function double(x: number | string): number | string;

// 조건부 조건 
function dobule<T extends number | string>(
  x: T
): T extends string ? string : number; //=> string 의 부분 집합이면 string, 그외는 number

function double(x: any) {
  return x + x;
}

item 51

• 의존성 분리를 위해 미러 타입을 사용하자.
• 미러 타입 : 라이브러리에서 필요한 선언부만 추출하여 작성중인 라이브러리에 넣는 것.

• 필요한 타입을 devDependencies로 추가하기보다, 각자가 필요한 모듈만 사용할 수 있도록 구조적 타이핑 을 적용하면 좋음.

• 그러나 타입의 대부분을 추출해야하는 경우는 명시적으로 @types의존성을 추가하는게 나음.

item 52

• dtslint를 사용해 타입 테스트코드를 작성하자.

const beatles = ['john', 'paul', 'george', 'ringo'];
map(beatles, function(
  name, // $ExpectType string
  i, // $ExpectType number
  array // $ExpectType string[]
) {
  this // $ExpectType string[]
  return name.length;
}) // $ExpectType number[]