型のないサードパーティライブラリへの対応

問題：型の不足

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); }

まとめ：型のないライブラリ

確認問題

学んだこと