使用 TypeScript 建置：基於樂高的指南-js教程-PHP中文網

「盡其所能，用其所有」——這是我奉行的座右銘之一。這句話也反映了成長型思維模式的一部分。我們大多數前端或JavaScript開發者，都已經開始或完全遷移到TypeScript了。但有些人可能仍難以理解其概念，或難以將思考方式從JavaScript轉換到TypeScript的模式。為了解決這個問題，我們將使用我最喜歡的工具之一：樂高積木。讓我們從這裡開始：「將JavaScript想像成一套基礎樂高積木，你可以自由搭建；而TypeScript則是同一套積木，但配有詳細的說明書和品質控制檢查。」關於TypeScript的更深入探討，可以參考這裡、這裡以及這段影片。本指南旨在展示每個JavaScript概念如何轉換為TypeScript，並使用樂高類比來幫助你更容易理解這些概念。

變數作用域與提升：搭建房間

Building with TypeScript: A Lego-Based Guide

概念定義

變數作用域是指程式中變數可存取和使用的上下文。主要有兩種作用域：局部作用域和全域作用域。在任何函數外部聲明的變數位於全域作用域，這意味著可以在程式碼的任何地方存取和修改它。另一方面，在函數內部宣告的變數位於局部作用域，並且只能在該函數內存取。 JavaScript使用var、let和const關鍵字來聲明變量，每個關鍵字對作用域的影響都不同。用let和const宣告的變數是區塊作用域的，這意味著它們只能在最近的封閉區塊{}內存取。相較之下，var是函數作用域的，使其在其聲明的整個函數中可用。清楚地理解變數作用域有助於避免變數名稱衝突和JavaScript程式中意外的副作用等問題。

提升是指在程式碼執行（編譯階段）之前，變數和函數宣告被移到其包含作用域頂部的行為。這意味著可以在聲明變數和函數之前使用它們。函數宣告是完全提升的，允許即使在程式碼中定義之前也能呼叫它們。但是，使用var聲明的變數會被提升，但不會初始化其初始值，因此在賦值之前訪問它們將導致undefined。用let和const聲明的變數也會被提升，但不會被初始化，如果在聲明之前訪問它們會導致ReferenceError。理解提升有助於開發人員透過正確建構變數和函數宣告來避免常見的陷阱。

樂高類比

將作用域想像成不同的樂高搭建房間：

全域作用域：所有建造者都可以存取積木的共用客廳。
函數作用域：個人的搭建桌。
塊作用域：搭建桌的特定區域。

JavaScript 實作

// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}

登入後複製

TypeScript 演進

// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set&lt;string&gt;;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};

登入後複製

函數與閉包：搭建說明書

Building with TypeScript: A Lego-Based Guide

概念定義

函數是旨在執行特定任務的可重複使用程式碼區塊。這增強了模組化和程式碼效率。它們可以使用function關鍵字定義，後面跟著名稱、括號()和用大括號{}括起來的程式碼區塊。參數可以在括號或大括號內傳遞到函數中，這些參數充當呼叫函數時提供的值的佔位符。 JavaScript也支援匿名函數（沒有名稱）和箭頭函數（提供更簡潔的語法）。函數可以使用return語句傳回值，或是執行不傳回值的運算。此外，JavaScript中的函數是一等對象，這意味著它們可以賦值給變數、作為參數傳遞以及從其他函數返回，從而實現函數式程式設計模式。

閉包是一個強大的特性，它允許函數記住並存取其詞法作用域，即使函數在該作用域之外執行也是如此。當在一個函數內部定義一個函數並引用外部函數中的變數時，可以建立閉包。即使外部函數執行完畢後，內部函數仍然可以存取這些變數。此功能對於資料封裝和在事件處理程序或回調等環境中維護狀態非常有用。閉包支援私有變數等模式，其中函數可以公開特定行為，同時隱藏實作細節。

樂高類比

函數就像搭建說明書。
參數就像所需的積木。
傳回值就像已完成的結構。
閉包就像密封的建造套件，其中包含一些永久包含的積木。

JavaScript 實作

function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}

登入後複製

TypeScript 演進

// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) =&gt; House {
    const foundation = "concrete";

    return (roofStyle: string): House =&gt; ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent&lt;T extends ComponentProps&gt;(
    baseProps: T
): (additionalProps: Partial&lt;T&gt;) =&gt; React.FC&lt;T&gt; {
    return (additionalProps) =&gt; {
        // 组件实现
        return (props) =&gt; &lt;div&gt;&lt;/div&gt;;
    };
}

登入後複製

物件與原型：搭建技巧

Building with TypeScript: A Lego-Based Guide

概念定義

JavaScript中的物件是基本的資料結構，用作相關資料和功能的容器。它們由鍵值對組成，其中每個鍵（屬性）都對應到一個值，該值可以是任何有效的JavaScript類型，包括函數（方法）。物件可以透過幾種方式建立：

物件字面量：const obj = {}
建構子：new Object()
Object.create()方法

原型系統是JavaScript內建的繼承機制。每個物件都與另一個物件（稱為其原型）具有內部連結。當嘗試存取物件上不存在的屬性時，JavaScript會自動在其原型鏈中尋找它。此對象鏈會持續到到達具有null原型的對象，通常是Object.prototype。理解原型對於以下方面至關重要：

實作繼承
在實例之間共用方法
管理記憶體效率
建立物件層次結構

樂高類比

將物件和原型想像成這樣：

物件就像是帶有自己獨特積木和說明書的專用樂高套件。
原型就像多個套件可以參考的主模板。
繼承就像擁有一個基本套件，更高級的套件可以以此為基礎搭建。
屬性就像每個套件中的特定積木。
方法就像每個套件中包含的特殊搭建技巧。

JavaScript 實作

// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}

登入後複製

TypeScript 演進

// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set&lt;string&gt;;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};

登入後複製

非同步程式設計：搭建團隊

Building with TypeScript: A Lego-Based Guide

概念定義

非同步函數與程式設計

非同步函數是JavaScript中一種特殊的函數類型，它提供了一種優雅的方式來處理非同步操作。當用async關鍵字宣告時，這些函數會自動傳回一個Promise，並在其主體中啟用await關鍵字的使用。 await運算子會暫停函數的執行，直到Promise被解決或拒絕，從而允許以更同步、更易讀的風格編寫非同步程式碼。此語法有效地減少了回調的複雜性，並消除了對嵌套Promise鏈的需求。例如，在async function fetchData() { const response = await fetch(url); }中，函數會在繼續執行之前等待fetch操作完成，使程式碼的行為更可預測，同時確保主執行緒保持不被阻塞。當處理相互依賴的多個非同步操作時，此模式特別有用，因為它允許開發人員編寫清楚地表達操作順序的程式碼，而不會犧牲效能。

Promise

Promise表示一個可能現在可用、未來可用或永遠無法使用的值。它是一個有三種可能狀態的物件：等待中、已完成或已拒絕。它用於處理非同步操作。 Promise具有.then()、.catch()和.finally()等方法，用於根據結果連結操作。這使得它們成為嵌套回調的有力替代方案，提高了程式碼的可讀性和錯誤處理能力。

樂高類比

非同步函數就像團隊成員在處理不同的部分。
Promise就像是交付已完成部分的協議。

JavaScript 實作

// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}

登入後複製

TypeScript 演進

// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set&lt;string&gt;;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};

登入後複製

現代特性：高階搭建技巧

Building with TypeScript: A Lego-Based Guide

概念定義

解構

這是一種將數組中的值或物件中的屬性提取到不同的變數中的簡潔方法。數組解構使用方括號[]，而物件解構則使用大括號{}。此語法透過將值直接解包到變數中，減少了對重複程式碼的需求，從而更容易處理複雜的資料結構。例如，const [a, b] = [1, 2]將1賦值給a，將2賦值給b，而const { name } = person從person物件中提取name屬性。

展開運算子

展開運算子由三個點(...)表示。它允許將諸如數組或物件之類的可迭代物件擴展到需要多個元素或鍵值對的地方。它可以用於複製、組合或將陣列元素作為函數參數傳遞。例如，const arr = [1, 2, ...anotherArray]。

可選鏈

可選鏈由?.表示。它提供了一種安全的方式來存取深度嵌套的物件屬性，而不會在屬性未定義或為null時導致錯誤。如果引用為nullish，它會短路並立即傳回undefined。例如，user?.address?.street在訪問street之前檢查user和address是否存在。此語法可防止執行階段錯誤，並使處理巢狀資料結構更加簡潔且不易出錯，尤其是在API或依賴使用者輸入的資料中。

樂高類比

解構就像將積木分類到容器中。
展開運算子就像在套件之間複製積木。
可選鏈就像在使用積木之前檢查積木是否存在。

JavaScript 實作

function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}

登入後複製

TypeScript 演進

// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) =&gt; House {
    const foundation = "concrete";

    return (roofStyle: string): House =&gt; ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent&lt;T extends ComponentProps&gt;(
    baseProps: T
): (additionalProps: Partial&lt;T&gt;) =&gt; React.FC&lt;T&gt; {
    return (additionalProps) =&gt; {
        // 组件实现
        return (props) =&gt; &lt;div&gt;&lt;/div&gt;;
    };
}

登入後複製

總結

Building with TypeScript: A Lego-Based Guide

從JavaScript到TypeScript的過渡就像升級你的樂高搭建過程：

JavaScript（基礎搭建）：
- 自由形式的搭建
- 靈活的積木使用
- 運行時錯誤發現
TypeScript（專業搭建）：
- 詳細和具體的說明書
- 積木相容性檢查
- 建造前的錯誤預防

關鍵過渡技巧：

從基本型別註解開始。
逐漸加入介面和型別定義。
使用編譯器儘早捕獲錯誤。
盡可能利用型別推論。
逐漸加入嚴格的null檢查和其他編譯器選項。

記住：TypeScript是在你的JavaScript知識的基礎上建構的，它增加了安全性和清晰度，而不是改變基本的搭建過程。也就是說，我的建議還是…先學習JavaScript，然後再學習TypeScript。

參考文獻

W3Schools. (n.d.). JavaScript scope. W3Schools. Retrieved January 12, 2025, from https://www.php.cn/link/84b184211c5d929d9435a371eb505cad
Mozilla. (n.d.). Variables — JavaScript. MDN Web Docs. Retrieved January 14, 2025, from https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

Building with TypeScript: A Lego-Based Guide