TypeScript - 남의 라이브러리 쓸 때 d.ts 파일이 없는 경우

BigbrotherShin·2020년 1월 27일
1

커스텀 패키지 타이핑

tsconfig.json 파일에서 compilerOptions의 typeRoots 설정

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "strict": true,
    "typeRoots": ["./types"], // 보통 types 폴더를 만들어 타입 정의
    "declaration": true, // lib 만들 때 .d.ts 파일을 자동으로
    "declarationDir": "./types" // 이 폴더에 만들어주는 옵션
  }
}

엠비언트 모듈 types/example-lib.d.ts 에서 타이핑

declare module 'example-lib' { // 이 부분 'example-lib'과
  const exampleLib: boolean;
  export default exampleLib;

example1.ts에서 불러오기

import example from 'example-lib'; // 불러오는 'example-lib'이 일치해야함. 파일 이름이 중요한 것은 아님.
~

전역 객체 window 커스텀 타이핑

window.hello = 'a'
const error = new Error('');
error.code;

이 코드를 TypeScript에서 사용하려고 할 때는, 타입에러가 발생한다. 해결을 위해서는 다음과 같이 한다.

types/example-global.d.ts 파일 작성

export {} // global 객체를 확장하려는 경우, ambient 또는 external module을 사용해야 하는데,
// ambient module을 사용할 수 없으므로,
// export {} 를 통해 external module로 만들어줌
declare global {
  interface Window {
    hello: string;
  }
  interface Error {
    code?: any;
  }
}
profile
JavaScript, Node.js 그리고 React를 배우는

0개의 댓글