Zenn
🚧

【TypeScript】型定義ファイルが存在しないライブラリを利用する方法

2021/10/08に公開
React
TypeScript
tech

TypeScriptを導入したプロジェクトにライブラリを新たに導入したところ、以下のエラーメッセージにが表示された。

エラーメッセージ

Could not find a declaration file for module 'lodash'. '.../xxx/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

事象の原因

TypeScriptを利用する際には、導入するライブラリに@types付きのパッケージの導入が必要です。
メッセージにある通り、@types/lodashの導入を進められたが、どうやら無いらしい？

対策

ということで、lodash.d.tsファイルを用意して/types/ディレクトリを新規作成しました。
型定義ファイルを参照できるようにtsconfig.jsonも編集

lodash.d.ts

declare module 'lodash'

tsconfig.json

"compilerOptions": {
    // 以下の記述を追加
    "baseUrl": ".",
    "paths": {
      "lodash": ["types/lodash"]
    },
  }

新たな問題発生...

上記の対策を行って、コンパイルを行うと、tsconfig.jsonのpathsプロパティが消えて結局エラーが出る...

create-react-appで作っているサービスだったため、どうやら上書きされているらしい
（詳しくはこちらをご覧ください。）

新しくpathsプロパティ用のファイルを用意

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "lodash": ["types/lodash"]
    },
  }
}

tsconfig.jsonにextends

{
  // 以下の記述を追加
  "extends": "./tsconfig.paths.json",
  ...
}

上手くいった

2021/10/10 追記

この記事で紹介しているlodashは@types/lodashは型定義ファイルありました！

参考

https://github.com/facebook/create-react-app/issues/5645#issuecomment-435201019

Discussion