web-dev-qa-db-ja.com

typescriptがサードパーティモジュールを宣言する

次のようなサードパーティモジュールを宣言するにはどうすればよいですか。

サードパーティモジュール：

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

私のコードで：

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

サードパーティのモジュールの使用に関するドキュメント を確認してください。

宣言の記述方法は、モジュールの記述方法とエクスポート内容に大きく依存します。

指定した例はCommonJSモジュール（module.exports = ...）です。これは実際には有効なES6モジュールではありません。ES6は関数をモジュール（関数メンバーまたはdefault関数のみをエクスポートします。

TypeScript 2.7+の更新

追加された esModuleInteropコンパイラオプション を使用すると、非ES6互換のエクスポートを持つCommonJSモジュールに対して、以下に示す「名前空間のハック」を使用する必要がなくなります。

まず、tsconfig.json（デフォルトでtsc --initに含まれるようになりました）でesModuleInteropを有効にしていることを確認します。

{
  "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();

ドキュメントには、宣言ファイルに関する優れたリソースがあります および一部の さまざまな種類の宣言ファイル用のテンプレート 。

22
Aaron Beall

その関数を宣言します：

Var foo：any;を宣言します

これはTypeScriptにfooという関数がどこかにあることを伝え、サイトに確実に挿入されるようにします。

0
Poku

同様の問題がありました。そして、私のプロジェクトに型定義を追加するのに苦労しました。ついに考えました。

これはいくつかのモジュール（定数のみ）で、some-module-node_modules/some-module/index.jsと呼びます。

'use strict';

exports.__esModule = true;
var APPS = exports.APPS = {
    ona: 'ona',
    tacq: 'tacq',
    inetAcq: 'inetAcq'
};

最初にtsconfig.jsonにbaseUrlとtypeRootsを追加します

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "types",
    "typeRoots": ["types"]
  }
  ...
}

次に、プロジェクトルートで、モジュールtypes/some-module/index.jsと同じフォルダー構造を持つフォルダーtypesを作成し、コードを配置します。

declare module 'some-module' {
    type Apps =  {
        ona: string;
        tacq: string;
        inetAcq: string;
    };
    let APPS: Apps
}

最後に、入力してmy-file.tsにインポートできます！

import { APPS } from 'some-module';
0
Michael Klishevich