Help us understand the problem. What is going on with this article?

TypeScript で型定義ファイル( d.ts )がないときの対処法

More than 1 year has passed since last update.

はじめに

例えば npm からインストールした foobarモジュールの型定義がないとき

import foobar from 'foobar'

のようにモジュールをインポートすると、

Could not find a declaration file for module 'foobar'.
Try npm install @types/foobar if it exists or add a new declaration (.d.ts) file containing declare module 'foobar';

とコンパイルエラーが発生します。

大まかに分けると3対処法があります。

  • @types からインストールする
  • 型定義ファイル( d.ts )を自作する
  • require でモジュール読み込み

1. @types からインストールする

型定義ファイルが提供されているか試します。
TypeScript コンパイラの指示通り @types からのインストールを試します。

# npm
npm install --save @types/foobar
# yarn
yarn add @types/foobar

無事インストール出来たら解決です。

もし型定義が提供されておらず、 error An unexpected error occurred: "https://registry.yarnpkg.com/@types%2ffoobar: Not found". と表示された場合、

  • 型定義ファイル( foobar.d.ts )を自分で実装

もしくは

  • require でモジュール読み込み

をします。

2. 型定義ファイル( d.ts )を自作する

src/@types ディレクトリを作成します。
foobar.d.ts@types 下に作成します。

tsconfig.jsontypeRoots のデフォルト設定が @types ディレクトリになっています。
※ 型定義ファイルの保存場所を変える場合、tsconfig.json を設定します。

{
  "compilerOptions": {
    "typeRoots" : [".d.tsを入れるディレクトリのパス"]
  }
}

型定義ファイル( .d.ts ) の実装についてはこちらが参考になりました。
TypeScript の型定義ファイルと仲良くなろう

3. require でモジュールを読み込む

型定義ファイル( d.ts )を書くのが面倒な時の対処法です。
require でモジュールを読み込みます。

const foobar = require('foobar')

暗黙的に any 型になるので、型定義ファイル d.ts が見つからないエラーは消えます。

ただし TSLint の設定によっては [tslint] require statement not part of an import statement (no-var-requires) という警告がでます。
// tslint:disable-next-line:no-var-requires とコメントで require('foobar') についてだけ警告を無効にします。

// tslint:disable-next-line:no-var-requires
const foobar = require('foobar')

この状態では foobarany 型になり、型チェックも賢い補完も行われません。
自分の使う API を型付けして置くと良さそうです。

interface IFooBar {
  bazMethod(qux: string): string;
  fuga(hoge: number): boolean
}
// tslint:disable-next-line:no-var-requires
const foobar = require('foobar') as IFooBar;

読んでいただきありがとうございました❗

Nossa
C#、TypeScriptが好きです。
https://twitter.com/nosa_programmer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした