형식이 없는 서드파티 라이브러리 다루기

문제: 누락된 타입

import legacyLib from "untyped-lib"; // legacyLib: any

@types 패키지

npm install --save-dev @types/lodash
npm install --save-dev @types/express
# Now lodash and express have full TypeScript types

선언 파일(.d.ts) 작성하기

// src/types/untyped-lib.d.ts
declare module "untyped-lib" {
  export function doSomething(x: string): number;
  export const version: string;
}

모듈 보강

// Extend Express Request with a custom property
declare namespace Express {
  interface Request {
    user?: AuthUser;
  }
}

와일드카드 모듈 선언

// src/types/assets.d.ts
declare module "*.svg" {
  const content: string;
  export default content;
}
declare module "*.json" {
  const value: Record<string, unknown>;
  export default value;
}

noImplicitAny와 타입이 지정되지 않은 라이브러리

// Quick fix for a single untyped import:
// @ts-ignore
import untypedLib from "untyped-lib";

DefinitelyTyped에 기여하기

# Fork DefinitelyTyped and add:
# types/your-library/index.d.ts
# types/your-library/package.json
# Submit a PR at github.com/DefinitelyTyped/DefinitelyTyped

최후의 수단으로 any 사용하기

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const lib: any = require("untyped-lib"); // TODO: add types

선언 오류에 skipLibCheck 사용하기

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

안전하지 않은 라이브러리를 위한 타입 래퍼

// src/lib/safe-legacy.ts
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const raw: any = require("untyped-lib");
export function doSomething(x: string): number { return raw.doSomething(x); }

복습: 타입이 지정되지 않은 라이브러리

빠른 확인

학습 내용