web-dev-qa-db-ja.com

Typescriptとd3

D3ライブラリを使用するアプリがあります。 TypeScriptコードでd3を正常に使用するには（つまり、コンパイラエラーTS2686なしで、d3はUMDグローバルを参照しますが、現在のファイルはモジュールです）、次の行を含める必要があります：_import * as d3 from 'd3';_問題JavaScriptでrequire('d3');を発行します。これは、d3ライブラリがアプリケーションにある場所ではありません。これは、Webアプリのルートの下の「d3」というディレクトリにあります。また、index.htmlはグローバルとしてロードするため、JavaScriptではまったく必要ありません。 TypeScriptソースを取得してインポートなしでd3を参照できるようにする方法を理解するのに苦労しました。

typescriptd3.js
9
rdiddly

次の2つのオプションがあります。

警告を抑制する

TypeScript 3.5 a --allowUmdGlobalAccessフラグが追加されました 以降では、モジュールファイルからグローバル定義にアクセスできます。あなたの場合、これは、importまたはrequireステートメントがなくても、d3をグローバル名前空間として使用できることを意味します。これは明らかにプロジェクト内のすべてのモジュールファイルと他のUMDタイプ定義（Reactなど）に適用されるため、使用しているコードセットアップとライブラリによっては、すべてのコンテキストで正しくない可能性があることに注意してください。

グローバル名前空間を宣言する

TS 3.5以前では、--allowUmdGlobalAccessフラグなし MD typedefはグローバル名前空間として参照できません モジュールファイル内から。 （モジュール以外のファイルからグローバル名前空間を参照することのみを許可します。）これは、厳密にモジュールベースのプロジェクトで使用できないグローバル名前空間を誤って参照しないようにするための意図的な安全対策です。 回避策 は、プロジェクト内でグローバル名前空間を手動で宣言することです。

// global.d.ts
import * as _d3 from "d3";

declare global {
  const d3: typeof _d3;
}

これで、d3からインポートすることなく、モジュールから"d3"を参照できるようになり、d3に基づく@types/d3オブジェクトに対するすべての正しい型チェックを取得できるはずです。

これは--allowUmdGlobalAccessよりも優れており、特定のコード設定について非常に明確です。言い換えると、コードセットアップがグローバルに提供していない他のUMDモジュールを誤ってコンパイルすることはありません。

9
Aaron Beall