從 JavaScript 遷移到 TypeScript

TypeScript 是 JavaScript 的超集，提供了比 JavaScript 更多的特性。在任何專案中使用 TypeScript 而不是 JavaScript 的主要目的是為了實現型別安全，因為 TypeScript 允許為每個變數、函式引數、函式返回型別等定義型別。

此外，TypeScript 還具有靜態型別檢查等特性，並支援類、介面、模組和其他 JavaScript 不支援的高階特性。在這裡，您將學習如何將您的 JavaScript 程式碼遷移到 TypeScript。

為什麼要從 JavaScript 遷移到 TypeScript？

以下是一些任何人應該在 JavaScript 之上使用 TypeScript 的原因

型別安全：TypeScript 的核心特性是其執行靜態型別檢查的能力。
改進程式碼質量：TypeScript 可以在開發過程的早期捕獲錯誤，這可以節省軟體開發的成本和時間。
高階特性：TypeScript 支援介面等高階特性，而 JavaScript 不支援。
可擴充套件性：使用 TypeScript 更容易管理和擴充套件大型程式碼庫。

從 JavaScript 遷移到 TypeScript 的步驟

您可以按照以下步驟將您的 JavaScript 程式碼遷移到 TypeScript

先決條件

您應該有一個包含 JavaScript 程式碼的 JavaScript 檔案。

步驟 1：設定您的環境

如果您尚未安裝 TypeScript，您可以在終端中執行以下命令來安裝 TypeScript

npm install -g typescript

步驟 2：在專案中新增 tsconfig.json 檔案

將 JavaScript 專案轉換為 TypeScript 專案的主要部分是在專案的根目錄中新增 tsconfig.json 檔案。

tsconfig.json 檔案包含一個包含各種屬性的單個 JSON 物件。它定義了將 TypeScript 程式碼編譯成純 JavaScript 程式碼的配置。

您可以建立一個新的 tsconfig.json 檔案，並將以下程式碼新增到其中

 {
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs",
    }
    "include": [
        "src/**/*"
    ],
}

但是，您也可以根據您的需求在 tsconfig.json 檔案中刪除某些屬性或新增某些屬性。

步驟 3：將 JavaScript 檔案轉換為 TypeScript 檔案

現在您可以使用 TypeScript 檔案了。TypeScript 編譯器僅編譯 TypeScript 檔案（.ts 和 .tsx）。將其中一個 .js 檔案重新命名為 .ts。如果您的檔案包含 JSX，則將其重新命名為 .tsx。重新命名檔案後，您可能會注意到 TypeScript 檔案可能包含一些型別錯誤。為了處理型別錯誤，我們執行型別註解。

新增型別註解

將 JavaScript 檔案重新命名為 TypeScript 檔案後，我們開始向變數、函式引數和返回型別新增型別註解。這將幫助 TypeScript 編譯器捕獲潛在的錯誤。讓我們舉個例子。

假設，我們在 JavaScript 檔案中具有以下程式碼

function add(a, b) {
  return a + b;
}

以上程式碼包含 add() 函式，該函式以 ‘a’ 和 ‘b’ 兩個變數作為引數，並返回它們的和。

為了將以上程式碼轉換為 TypeScript，您需要為函式引數新增型別，併為函式指定返回型別。

function add(a: number, b: number): number {
  return a + b;
}

在這裡，我們為兩個引數和函式的返回型別都使用了 number 型別。

步驟 4：解決錯誤並安裝外部庫

將 JavaScript 程式碼轉換為 TypeScript 後，確保解決程式碼編輯器中給出的任何錯誤。否則，在將 TypeScript 程式碼編譯成純 JavaScript 程式碼時，您也會收到錯誤。

如果您在 JavaScript 專案中使用外部庫，則可以使用 Node 包管理器 (NPM) 在 TypeScript 專案中安裝這些庫。如果您不安裝這些外部庫，編譯器將丟擲錯誤。

步驟 5：編譯 TypeScript 程式碼

解決錯誤後，在終端中執行以下命令以編譯 TypeScript 程式碼

npx tsc filename

在上述命令中，您可以用 TypeScript 檔案的實際名稱替換 filename。

執行命令後，它將生成一個與 TypeScript 檔案同名的 JavaScript 檔案。此 JavaScript 檔案可以像普通 JavaScript 檔案一樣與 HTML 一起使用或使用 NodeJS 執行。

本課講解了將您的 JavaScript 專案轉換為 TypeScript 的基本步驟。但是，藉助這些步驟，您還可以將複雜的 JavaScript 專案轉換為 TypeScript。

列印頁面