web-dev-qa-db-ja.com

Node.jsでJavaScriptとTypeScriptを混在させる

単純なES6でNode.jsの一部を持っている間、同じプロジェクト内でいくつかのTypeScriptモジュールを混在させることは可能ですか？

例えば。 requireを介してプレーンES6ファイルにインポートされるTypeScriptで定義されたいくつかのタイプがありますか？

javascriptnode.jstypescriptjsdoc
15
Alexander Zeitler

はい、これは可能です。

次のコンパイラフラグを組み合わせます

  1. --allowJs

    JavaScriptとTypeScriptの混合ソースを明示的にサポート

  2. --outDir

    すべてのファイルがトランスコンパイルされるため、結果のJavaScriptを別のディレクトリに出力する必要があります。そうでない場合は、入力.jsファイルは上書きされます1。

  3. --checkJs

    これは完全にオプションです。指定されている場合、コンパイラはJavaScriptファイルの型チェックを行い、TypeScriptファイルと同様にエラーを報告します。

TypeScriptファイルで宣言された型をJavaScriptファイルで使用することに関して、これは実際に行うことができます。

TypeScriptは、実際にはVisual Studio CodeなどのツールですべてのJavaScriptインテリセンスを強化します。

タイプはJSDocに配置できます2 コメント。これらのコメントは、TypeScript（.ts/.tsx/.d.ts）ファイル。 Visual Studio CodeなどのIDEは、これらのコメント内で構文の強調表示と自動補完を提供します。

ただし、注意点があります。 JavaScriptには型のマニフェスト構文がないため、個別にインポートすることはできませんが、インポートされるvalueに添付する必要があります。これは、以下に示すように、TypeScriptの宣言のマージによって最も便利に達成されます。

例：

a.ts

export default createThing;

function createThing(...args): createThing.Thing  {...}

namespace createThing {
  export interface Thing {...}
}

b.js

import createThing from './a';

/**
 * @param {createThing.Thing} thing
 */
export function takesThing(thing) {}

注：

1：--outDirは、--noEmitフラグ。 SystemJS （with plugin-TypeScript ）または Webpack （with awesome-TypeScript- loader または ts-loader ）TypeScriptトランスパイラーをホストします。 TS Node を使用している場合も同様です。

2： JSDoc コメントと呼ばれていますが、TypeScript型システムのコンテキストで解釈されますnotJSDocシステム。 TypeScriptやGoogleの Closure Compiler などの言語とツールは、JSDoc構文を効果的にハイジャックして独自の目的で使用し、コンストラクトに潜在的に矛盾する意味を付与します。通常、これは問題ではありませんが、これらのコメントの適用性と正確性、およびそれらが参照または宣言する型の互換性を判断することが難しい場合があるため、知る価値があります。

備考：

この質問と回答はすべてJavaScriptファイルで使用するための型のインポートに関するものですが、コンパイラが式の値から型を推測するため、非常に多くの場合不要です。

JSDocスタイルの型注釈を大量に記述する必要がある場合は、JSDocで型を表現するための構文が面倒であるため、ファイルをTypeScriptに変換することをお勧めします。おかげ --allowJsオプションを使用すると、上記のようにファイルごとにこれを行うことができます。

22
Aluan Haddad