在 Node.js 中混合使用 JavaScript 和 TypeScript

Question

雖然在純 ES6 中有部分 Node.js，但是否可以在同一個項目中混合一些 Typescript 模塊？

例如，在 TypeScript 中定義了一些通過require導入普通 ES6 文件的類型？

Answer 1

是的，這是可能的。

結合以下 TypeScript 編譯器選項

1. --allowJs

   明確支持混合的 JavaScript 和 TypeScript 源

2. --outDir

   由於所有文件都將被轉譯，因此有必要將生成的 JavaScript 輸出到不同的目錄，否則輸入的.js文件將被覆蓋¹ 。

3. --checkJs

   這是完全可選的。 如果指定，編譯器將對 JavaScript 文件進行類型檢查，報告錯誤，就像在 TypeScript 文件中一樣，否則它會容忍不一致。

至於在 JavaScript 文件中使用 TypeScript 文件中聲明的類型，確實可以做到。

TypeScript 實際上為 Visual Studio Code 等工具中的所有 JavaScript 智能感知提供支持。

類型可以放在 JSDoc ²注釋中。 這些注釋可以引用從 TypeScript ( .ts / .tsx / .d.ts ) 文件導入的類型。 像 Visual Studio Code 這樣的 IDE 將在這些注釋中提供語法高亮和自動完成。

但是有一個警告。 因為 JavaScript 中的類型沒有清單語法，所以它們不能單獨導入，而必須附加到導入的值上。 這可以通過 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 （帶有plugin- typescript）或Webpack （帶有ts-loader ）之類的工具來托管 TypeScript 轉譯器時，您會這樣做。 如果您使用的是TS Node ，這同樣適用。

2 ：雖然稱為JSDoc注釋，但它們是在 TypeScript 類型系統的上下文中解釋的，而不是JSDoc 系統。 TypeScript 和 Google 的Closure Compiler等語言和工具有效地劫持了 JSDoc 語法以達到自己的目的，從而賦予其構造潛在的沖突含義。 這通常不是問題，但值得了解，因為很難確定這些注釋的適用性和正確性以及它們引用或聲明的類型的兼容性。

評論：

盡管這個問題和答案都是關於導入類型以在 JavaScript 文件中使用，但它通常是不必要的，因為編譯器會根據表達式的值推斷類型。

還值得一提的是，如果您發現自己需要編寫大量 JSDoc 樣式的類型注釋，則幾乎可以肯定將文件轉換為 TypeScript 更好，因為在 JSDoc 中表達類型的語法很笨拙。 多虧了--allowJs選項，您可以逐個文件地執行此操作，如上所述。