1. ホーム
  2. javascript

[解決済み] typescript サードパーティモジュールの宣言

2022-03-14 21:34:11

質問

このようなサードパーティモジュールを宣言するにはどうしたらよいでしょうか。

をサードパーティーモジュールに追加します。

module.exports = function foo(){
  // do somthing
}

を私のコードに追加してください。

import * as foo from 'foo-module'; // Can not find a declaration module for ...
foo();

解決方法は?

をチェックしてください。 サードパーティモジュールとの連携に関するドキュメント .

宣言をどのように書くかは、モジュールがどのように書かれ、何をエクスポートするかに大きく依存します。

いただいた例では、CommonJSのモジュール( module.exports = ... をエクスポートすることができないため、実際には有効なES6モジュールではありません。 をモジュールとして (関数のメンバをエクスポートするか デフォルト 関数)。

TypeScript 2.7+に対応したアップデート

追加された esModuleInterop コンパイラオプション を使用すると、ES6互換性のないエクスポートを持つCommonJSモジュールに対して、以下に示す "namespace hack" を使用する必要がなくなります。

まず esModuleInterop の中で tsconfig.json (と一緒にデフォルトで含まれるようになりました)。 tsc --init ):

{
  "compilerOptions" {
    ...
    "esModuleInterop": true,
    ...
   }
}

を宣言してください。 foo-example における .d.ts のようなファイルを作成します。

declare module "foo-module" {
  function foo(): void; 
  export = foo;
}

これで、望んだように名前空間としてインポートできるようになりました。

import * as foo from "foo-module";
foo();

またはデフォルトのインポートとして。

import foo from "foo-module";
foo();

旧来のワークアラウンド

を宣言することができます。 foo-example における .d.ts のようなファイルを作成します。

declare module "foo-module" {
  function foo(): void; 
  namespace foo { } // This is a hack to allow ES6 wildcard imports
  export = foo;
}

そして、思い通りの輸入を。

import * as foo from "foo-module";
foo();

あるいはこんな感じ。

import foo = require("foo-module");
foo();


があります。 のドキュメントに、宣言ファイルに関する良い資料があります。 および一部 各種宣言ファイル用テンプレート .