TypeScript 是 JavaScript 的超集，為 JavaScript 添加了類型註解和其他高級特性，使得編碼更加可靠、易於維護和高效。TypeScript 可以編譯成純 JavaScript，被廣泛應用於開發大型的 Web 應用程序和框架。本教程將從入門基礎到高級特性，逐步展示 TypeScript 的強大。

一、TypeScript 入門

1、安裝 TypeScript

對於新手，建議使用 npm（Node.js 自帶的包管理器）進行安裝。打開終端，輸入以下命令即可安裝 TypeScript。

npm install -g typescript

2、第一個 TypeScript 程序

首先，我們需要創建一個 TypeScript 文件，即以 .ts 後綴結尾的文本文件。在我們的編輯器中，創建一個 main.ts 文件，寫入以下代碼：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "TypeScript";

document.body.innerHTML = greeter(user);

3、編譯 TypeScript

通過以下命令編譯 TypeScript 文件：

tsc main.ts

該命令將 main.ts 編譯為 main.js 文件，我們可以在瀏覽器中打開該文件來運行我們的程序。

二、TypeScript 基礎

1、類型註解

TypeScript 的一個關鍵特性是類型註解，在變數聲明或函數參數前面加上類型註解，可以指定變數或參數的類型。例如：

let num: number = 42;

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

2、介面

TypeScript 中的介面用來描述對象的形狀，即對象具有哪些屬性和方法。例如：

interface Person {
    firstName: string;
    lastName: string;
    age?: number;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "TypeScript", lastName: "Learner", age: 25 };

document.body.innerHTML = greeter(user);

注意，age 屬性是可選的，即可以有也可以沒有。

三、TypeScript 進階

1、類和繼承

TypeScript 支持面向對象編程，可以通過 class 關鍵字定義類和繼承關係。例如：

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) {
        super(name);
    }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy");

sam.move();

2、泛型

TypeScript 支持泛型，即可以在定義函數、類、介面時使用未知類型。例如：

function identity(arg: T): T {
    return arg;
}

let output = identity("TypeScript");

console.log(output);

3、枚舉

TypeScript 中的枚舉用於定義命名常量，可以方便地表示一組關聯的值。例如：

enum Color {
    Red,
    Green,
    Blue,
}

let c: Color = Color.Green;

console.log(c);

四、TypeScript 實戰

1、React with TypeScript

TypeScript 可以為 React 提供類型檢查，使得 React 開發更加穩定可靠。以下是一個簡單的 TypeScript React 組件的示例：

interface Props {
    name: string;
}

const Hello: React.FC = ({ name }) => {
    return 
Hello, {name}!
;
};

ReactDOM.render(, document.getElementById("root"));

2、Express with TypeScript

TypeScript 可以為 Express 提供類型檢查和智能提示，使得 Node.js 後端開發更加高效。以下是一個簡單的 TypeScript Express 應用程序的示例：

import express, { Request, Response } from "express";

const app = express();

app.get("/", (req: Request, res: Response) => {
    res.send("Hello, TypeScript!");
});

app.listen(3000, () => {
    console.log("Server started on port 3000");
});

3、TypeScript with Firebase Cloud Functions

Firebase Cloud Functions 可以使用 TypeScript 進行開發，通過 TypeScript 提供的類型安全和智能提示，可以更加輕鬆地構建出高效可靠的雲函數。以下是一個簡單的 TypeScript Firebase Cloud Function 的示例：

import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
    response.send("Hello, TypeScript!");
});

總結

本教程只是介紹了 TypeScript 的入門、基礎、進階和實戰等方面，實際上 TypeScript 還有很多其他強大的特性和用法。希望本教程能夠幫助大家快速入門 TypeScript，從而提高開發效率和代碼質量。