web-dev-qa-db-ja.com

TypeScript 2.0でjsファイルをインポートする

抽象

私は外部の場所から「.js」ファイルをインポートしようとしています（つまりnode_modules）commonjsモジュールパターンを使用してこれを実行しようとしていますが、 importは、「。js」ファイルタイプで「.js」ファイルの近くに「.d.ts」ファイルを追加するまで動作しません。同じフォルダ。

しかし、問題は、「。d.ts」ファイルを使用してnode_modulesに影響を与えたくないことです。 node_modulesとは別の別のフォルダーに配置したいのですが、それをするとすぐに、TypeScriptコンパイラーはエラーをスローします：

例

次のフォルダー構造があります。

|- DTS
|   |- y.d.ts
|- main.ts
|- y.js

y.jsには次のコンテンツがあります

module.export = function (x) {
    console.log(x);
};

y.d.tsの内容は次のとおりです

export interface Y {
    (x): any;
}
declare let y: Y;
export default y;

main.tsの内容は次のとおりです

import * as y from './y'

今、私がmain.tsをコンパイルしようとしているとき：

tsc -m commonjs -t ES2015 main.ts

エラーが発生します：

x.ts(1,20): error TS2307: Cannot find module './y'.

質問

「.js」ファイルをインポートし、「。d.ts」宣言を定義しながら、両方のファイルを異なる場所に配置する方法。

編集

ここにサンプルプロジェクトへのリンクがあります 。必ずTypeScriptバージョン2.0コンパイラを使用してください。上記のtscコマンドを使用してエラーを確認します。

javascriptnode.jstypescripttypescript2.0
17
Lu4

注： 型定義を証明するための公式の推奨事項 は、以下に示すものとは少し異なるアプローチを取ります。 * .d.tsファイルは実際には最終製品と同一であるため、以下のアプローチの方がわずかに優れていると思います。

タイプチェック中（ビルド時）、TypeScriptは* .tsファイルで機能し、（大部分）*。jsファイルを無視します。あなたが提案していること（私が信じていること）の動機付けとなる例を挙げましょう。残念ながらタイピングのない完全に優れたJavaScriptライブラリが存在するとします（例 N ）。 npm経由でインストールされているため、次のようになります。

npm install n3 --save

これは、通常のように、./ node_modules/n3 /...およびproject.jsonに追加されます。前述のように、タイピングは存在しないため、手動で追加する必要があります。この目的のために./@ types/n3.d.tsファイルを作成します。私たちの目的にとって、定義が実際に何であるかは特に重要ではありませんが、次のようなものが良いスタートです。

declare namespace N3 {
}

declare module "n3" {
    export = N3;
}

さてあなたの質問に。 「tsconfig.json」を更新します：

...
"compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "@types"
    ],
...
"paths": {
  "*": [
    ...
    "./@types/*"
  ]

対応する* .jsファイルの場所を特定するには、実行時の解決に対処する必要がありますが、それはあなたが尋ねたものとは異なる質問です。

参考のため、 TypeScriptの新機能 および このディスカッションスレッド が便利です。

このアプローチは、グローバル変数を使用する場合は正常に機能しますが、モジュールではあまり機能しません。

「tsconfig.json」を更新します：

...
"paths": {
  "*": [
    ...
    "./@types/*"
  ],
  "foo": [ "./@types/foo.d.ts" ]
  },
 ...
17
phreed

両方のファイルを異なる場所に配置しながら、「。d.ts」宣言を定義できます。

importは、.jsまたは.d.tsファイルに相対ファイルが指定されている場合、同じモジュール解決プロセスに従います。

0
basarat