繁體中文

TypeScript 基礎

TypeScript 基礎類型

TypeScript 控制流程

TypeScript 函數

TypeScript 介面

TypeScript 類與物件

TypeScript 高級類型

TypeScript 類型操作

TypeScript 泛型

TypeScript 雜項

TypeScript 教學：初學者的超強 JavaScript 指南

你好啊，未來的編程超新星！? 歡迎來到我們的 TypeScript 教學。我很興奮能成為你進入 TypeScript 世界的導遊。作為一個教了多年編程的人，我迫不及待地想分享我的知識，幫助你解鎖這個令人驚艷語言的力量。

TypeScript - Home

TypeScript 是什麼？

我們先從基礎開始。TypeScript 就像是 JavaScript 的更酷、更複雜的表哥。它是一種建立在 JavaScript 之上的編程語言，增加了新功能，並幫助在問題變成麻煩之前捕獲錯誤。想像一下 JavaScript 穿著一套時髦的西裝和單片眼鏡 - 那就是 TypeScript！

一個簡單的例子

讓我們直接進入一個簡單的例子：

function greet(name: string) {
console.log(`Hello, ${name}!`);
}

greet("Alice"); // 輸出: Hello, Alice!
greet(123); // 錯誤: 數字類型的參數不能分配給字符串類型的參數。

在這個例子中，我們定義了一個名為 greet 的函數，它接受一個 name 參數。name: string 的部分告訴 TypeScript name 應該是一個字符串。當我們嘗試用數字調用 greet 時，TypeScript 會在我們甚至運行代碼之前捕獲錯誤！

為什麼學習 TypeScript？

你可能會想，"當 JavaScript 已經存在時，我為什麼要麻煩學習 TypeScript？" 好問題！這裡有幾個令人信服的理由：

  1. 及早捕獲錯誤：TypeScript 帮助你在代码运行之前找到并修复错误。
  2. 更好的工具：在编辑器中获得更智能的代码提示和自动完成。
  3. 更清晰的代码：TypeScript 使你的代码更容易阅读和理解。
  4. 可扩展性：它非常适合大型项目和团队。

誰應該學習 TypeScript？

TypeScript 适合所有人！無論你是：

  • 一個完全的编程新手
  • 一個尋求提升的 JavaScript 開發者
  • 一個在大型应用程序上工作的团队成員

TypeScript 都有東西可以提供給你。就像學習騎自行車時帶著輔助輪一樣 - 它在你學習時給你额外的支持，但你仍然可以做出所有酷炫的動作！

學習 TypeScript 的前提條件

在我們深入之前，這裡是你應該知道的：

  • 對編程概念（變量、函數等）的基本理解
  • 對 JavaScript 的一些熟悉（如果你變得不熟練，也沒問題！）

沒有這些？沒問題！我們會在進行的過程中涵蓋基礎。

TypeScript 入門

安裝

首先，讓我們在你的電腦上設置 TypeScript。打開你的終端並運行：

npm install -g typescript

這將在您的机器上全局安装 TypeScript。現在你可以開始編程了！

你的第一個 TypeScript 程序

讓我們寫一個簡單的程序來計算圓的面積：

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`圓的面積是 ${area.toFixed(2)} 平方單位。`);

讓我們分解一下：

  1. 我們定義了一個名為 calculateCircleArea 的函數，它接受一個類型為 number 的 radius 參數。
  2. 函數聲明後面的 : number 指定該函數將返回一個數字。
  3. 我們使用公式 πr² 計算面積。
  4. 我們用半徑 5 调用函數並將结果存储在 area 中。
  5. 最後，我們輸出结果，使用 toFixed(2) 來四舍五入到小數點後兩位。

要運行這個程序，將它保存為 circle.ts，然後編譯並運行它：

tsc circle.ts
node circle.js

你應該看到輸出："圓的面積是 78.54 平方單位。"

TypeScript 類型

TypeScript 的一個超能力是它的類型系統。讓我們探討一些常見類型：

類型 描述 示例
number 數值 let age: number = 30;
string 文本值 let name: string = "Alice";
boolean 真/假值 let isStudent: boolean = true;
array 值的列表 let fruits: string[] = ["apple", "banana"];
object 鍵-值對 let person: { name: string, age: number } = { name: "Bob", age: 25 };
any 任何類型（慎用！） let data: any = 42;

這裡有一個使用多種類型的更複雜例子：

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`Name: ${student.name}`);
console.log(`Age: ${student.age}`);
console.log(`Average Grade: ${calculateAverage(student.grades)}`);
console.log(`Active: ${student.isActive ? "Yes" : "No"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "Alice",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

這個例子演示了：

  1. 使用 interface 定義一個複雜類型 (Student)。
  2. 使用數組和對象。
  3. 在函數參數和返回類型中使用類型注釋。
  4. 使用三元運算符進行簡潔的 if/else 邏輯。

編譯和執行 TypeScript 程序

要運行 TypeScript 程序，你需要先將它們編譯成 JavaScript。以下是過程：

  1. 寫你的 TypeScript 代碼（例如，app.ts）
  2. 編譯它：tsc app.ts
  3. 運行生成的 JavaScript：node app.js

專業提示：使用 tsc --watch app.ts 會在您保存更改時自動重新編譯！

TypeScript 在現實世界中的應用

TypeScript 不僅用於學習 - 它還被許多流行的庫和框架使用：

  • Angular（Google 的網絡應用程序框架）
  • React（支持 TypeScript）
  • Node.js（服務器端 JavaScript）
  • Vue.js（支持 TypeScript）

學習 TypeScript 為你打開了使用這些強大工具的大门！

結論

恭喜你！你已經邁出了進入 TypeScript 世界的第一步。我們已經涵蓋了基礎，但還有許多東西等待你去探索。記住，學習編程就像學習一種新語言 - 練習、耐心和堅持是關鍵。

在你繼續 TypeScript 的旅程時，不要害怕犯錯誤。每一個錯誤都是一個學習的機會。持續編程，持續嘗試，最重要的是，玩得開心！

快樂編程，願你的 TypeScript 冒險沒有 bug，充滿樂趣！?✨

Credits: Image by storyset

 
下一教程:
TypeScript - 概覽