從 JavaScript 到 TypeScript：初學者指南

你好，未來的編程超新星！我很興奮能成為你從 JavaScript 過渡到 TypeScript 的驚險旅程中的導遊。作為一位教導計算機科學多年的老師，我見過無數學生完成這種轉變，我在這裡就是為了讓這個過程對你來說盡可能順暢。所以，拿起你喜歡的飲料，放鬆一下，我們來開始吧！

From JavaScript To TypeScript

TypeScript 是什麼？

在我們開始我們的遷移冒險之前，讓我們先了解 TypeScript 是什麼，以及為什麼它越來越受歡迎。

TypeScript 是 JavaScript 的更有組織和紀律的表親。它是一個超集，這意味著所有有效的 JavaScript 代碼同時也是有效的 TypeScript 代碼。然而，TypeScript 添加了可選的靜態類型和其它功能，這些功能使得編寫大型應用程序更為容易且不易出錯。

想像你正在蓋房子。JavaScript 就像用樂高積木蓋房子——靈活且有趣，但有時候東西並不完全適合。TypeScript 則像使用帶有詳細說明書的樂高積木——你知道每個部件該放在哪裡，從而減少了犯錯的機會。

為什麼從 JavaScript 遷移到 TypeScript？

你可能會想，"如果 JavaScript 用得很好，為什麼要麻煩使用 TypeScript 呢？" 這個問題問得好！這裡有幾個原因：

提升代碼質量：TypeScript 的靜態類型有助於在開發過程的早期發現錯誤。
更好的工具支持：IDE 可以提供更好的自動完成和重構工具。
增強可讀性：類型注釋使得代碼更自文檔化，更易於理解。
更容易維護：隨著專案的增長，TypeScript 的功能有助於管理複雜性。

既然我們知道了 TypeScript 的優點，讓我們開始我們的遷移旅程吧！

從 JavaScript 遷移到 TypeScript 的步驟

1. 安裝 TypeScript

首先，我們需要安裝 TypeScript。打開你的終端並運行以下命令：

npm install -g typescript

這個命令會在你的電腦上全局安裝 TypeScript。現在你可以使用 tsc 命令來編譯 TypeScript 代碼。

2. 將 .js 檔案重命名為 .ts

下一步是將你的 JavaScript 檔案從 .js 重命名為 .ts。例如，app.js 變成 app.ts。別擔心，你的代碼還是會正常運作！

3. 創建 tsconfig.json 檔案

現在，讓我們為 TypeScript 創建一個配置檔案。在專案根目錄下，創建一個名為 tsconfig.json 的文件，並添加以下內容：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}

這個配置告訴 TypeScript 如何編譯你的代碼。這就像給廚師提供如何為你準備食物的指示！

4. 開始添加類型注釋

現在來到有趣的部分——為你的 JavaScript 代碼添加類型！讓我們看一些例子：

示例 1：變量

// JavaScript
let name = "Alice";
let age = 30;

// TypeScript
let name: string = "Alice";
let age: number = 30;

在這個例子中，我們告訴 TypeScript name 應該始終是一個字符串，而 age 則始終是一個數字。如果我們之後嘗試將一個數字分配給 name，TypeScript 會警告我們。這就像有一個熱心的朋友在旁邊看著你並說，"你確定你想這樣做嗎？"

示例 2：函數

// JavaScript
function greet(name) {
return "Hello, " + name + "!";
}

// TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}

在這裡，我們指定 greet 函數接受一個 string 參數並返回一個 string。這有助於防止像意外傳遞一個數字給 greet 的錯誤。

示例 3：對象

// JavaScript
let person = {
name: "Bob",
age: 25
};

// TypeScript
interface Person {
name: string;
age: number;
}

let person: Person = {
name: "Bob",
age: 25
};

在這個例子中，我們定義了一個接口 Person 來描述我們對象的結構。這有助於確保 person 始終具有正確的屬性和類型。

5. 處理任何類型

在遷移過程中，你可能會遇到 TypeScript 無法推斷類型的情況。在這些情況下，你會看到 any 類型。雖然在各處使用 any 會很誘人，但請儘量避免。相反，定義適當的類型或接口。

6. 使用 TypeScript 獨有的功能

TypeScript 提供了一些在 JavaScript 中不可用的酷炫功能。讓我們看一些：

枚舉

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

枚舉允許我們定義一組命名常量。這就像創建一個我們可以從中選擇的選項菜單。

聯合類型

function printId(id: number | string) {
console.log("Your ID is: " + id);
}

printId(101);  // 可以
printId("202");  // 也行
printId(true);  // 錯誤！

聯合類型允許一個值是幾種類型中的一種。就像說，"這可以是數字或字符串，但不能是其它東西！"

7. 逐漸提高嚴格性

TypeScript 有幾個嚴格性標誌，你可以在 tsconfig.json 中啟用。從較不嚴格的設定開始，並在你對 TypeScript 更為熟悉時逐漸提高它們。

標誌	描述
`noImplicitAny`	對於有暗示 'any' 類型的表達式和聲明提出錯誤
`strictNullChecks`	启用嚴格的 null 檢查
`strictFunctionTypes`	启用函數類型的嚴格檢查
`strictBindCallApply`	启用對函數的 'bind'、'call' 和 'apply' 方法的嚴格檢查
`strictPropertyInitialization`	启用類屬性初始化的嚴格檢查
`noImplicitThis`	對於有暗示 'any' 類型的 'this' 表達式提出錯誤
`alwaysStrict`	使用嚴格模式進行解析，並為每個源文件發射 "use strict"

8. 重構和優化

在你遷移的過程中，你很可能会發現重構和改善代碼的機會。TypeScript 的靜態類型可以幫助你發現錯誤並使你的代碼更健壯。

結論

恭喜你！你已經邁出了從 JavaScript 遷移到 TypeScript 的第一步。記住，這是一個旅程，而不是比賽。慢慢來，試驗，不要害怕犯錯誤——這是我們學習的方式！

TypeScript 最初可能會讓人覺得有些令人生畏，但相信我，一旦你掌握了它，你就會奇怪自己是如何在没有它的情況下生活的。這就像從自行車升級到摩托車——學習曲線有點陡峭，但你獲得的功率和速度是驚人的。

繼續練習，保持好奇心，最重要的是，玩得開心！在你意識到之前，你將會像專家一樣寫 TypeScript。快樂編程！

Credits: Image by storyset

上一教程:

TypeScript - tsconfig.json