TypeScript - 類型注解：初學者指南

你好呀，未來的編程超級巨星！? 歡迎來到我們令人興奮的TypeScript和類型注解之旅。作為你親切鄰居的計算機科學老師，我非常興奮能夠引導你進行這次冒險。別擔心你對編程是新手——我們將從最基礎的知識開始，一起逐步學習。那麼，拿起你的虛擬背包，我們一起跳進去吧！

TypeScript - Type Annotations

什麼是類型注解？

想像你正在為一次旅行打包。你有不同的袋子裝不同的物品——一個裝衣服，一個裝洗漱用品，還有一個裝電子產品。TypeScript中的類型注解就像這些袋子上的標籤。它告訴我們和計算機我們正在處理什麼樣的“東西”（數據）。

在TypeScript的世界中，類型注解是一種明確告訴編譯器一個變量、函數參數或對象屬性能夠持有什麼類型的值的方式。這就像給計算機一個預警，告訴它我們期望什麼。

為什麼使用類型注解？

及早捕獲錯誤：它們幫助我們在運行代碼之前發現錯誤。
更好的代碼文檔：它們使我們的代碼更容易理解。
改善開發體驗：它們在我們的代碼编辑器中提供更好的自動完成和智能感知。

現在，讓我們看看我們可以使用類型注解的不同方式。

變量類型注解

當我們在TypeScript中創建一個變量時，我們可以添加一個類型注解來指定它應該持有什麼樣的值。

基本語法

let 變量名稱: 類型 = 值;

讓我們看一些例子：

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

在這些例子中，我們告訴TypeScript：

myName 只應包含文字（字符串）
myAge 只應該是數字
isStudent 只應該是true或false（布尔值）

如果我們稍後嘗試賦予不同類型的值，TypeScript會警告我們：

myName = 42; // 錯誤：類型 'number' 不能賦值給類型 'string'

数组與特殊類型

我們也可以注解数组和使用特殊類型：

let favorites: string[] = ["披薩", "編程", "貓"];
let anything: any = "我可以是任何東西！";
let maybe: unknown = 4;

string[] 意味著字符串数组
any 是一個可以為任何東西的特殊類型（謹慎使用！）
unknown 是一個比 any 更安全的選擇

函數類型注解

函數可以有參數和返回值的類型注解。

基本語法

function 函數名稱(參數1: 類型1, 參數2: 類型2): 返回類型 {
// 函數體
}

讓我們看一些例子：

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

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

function logMessage(message: string): void {
console.log(message);
}

在這些例子中：

greet 接受一個字符串並返回一個字符串
add 接受兩個數字並返回一個數字
logMessage 接受一個字符串但不返回任何東西（void）

箭頭函數

箭頭函數也可以有類型注解：

const multiply = (a: number, b: number): number => a * b;

對象屬性類型注解

當我們使用對象時，我們可以注解它們的屬性。

基本語法

let 對象名稱: { 屬性1: 類型1; 屬性2: 類型2 } = {
屬性1: 值1,
屬性2: 值2
};

讓我們看一個例子：

let user: { name: string; age: number; isAdmin: boolean } = {
name: "Bob",
age: 25,
isAdmin: false
};

在這裡，我們定義了一個具有特定屬性類型的對象。

接口與複雜對象

對於更複雜的對象，我們可以使用接口：

interface Person {
name: string;
age: number;
hobbies: string[];
greet: () => void;
}

let employee: Person = {
name: "Charlie",
age: 30,
hobbies: ["閱讀", "遊戲"],
greet: () => console.log("Hello!")
};

接口幫助我們定義可重用的對象結構。

組合所有知識

現在，我們已經學習了不同的類型注解，讓我們通過一個更複雜的例子來看看它們在實際應用中的情況：

interface Book {
title: string;
author: string;
pages: number;
isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
return books.map(book => `${book.title} by ${book.author}`);
}

const myBooks: Book[] = [
{ title: "TypeScript 101", author: "Code Wizard", pages: 200, isPublished: true },
{ title: "JavaScript Adventures", author: "JS Ninja", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

這個例子結合了我們學過的許多概念：

我們定義了一個接口 Book
我們創建了一個函數 createBookList，它接受一個 Book 对象数组並返回一個字符串数组
我們創建了一個 Book 对象数组
我們調用函數並將結果存儲在一個具有正確類型注解的變量中

結論

恭喜你！你已經踏出了進入TypeScript類型注解世界的第一步。記住，這些注解就像友好的路標，引導你和你的代碼走向安全。它們可能起初看起來有些令人却步，但隨著練習，它們會變得習以為常。

在你繼續編程旅程時，請持續嘗試不同的類型和注解。不要害怕犯錯誤——這是我們學習和成長的方式！

這裡有一個方便的表格，總結了我們所學的類型注解：

類型注解	示例	描述
基本類型	`let name: string = "Alice";`	為字符串、數字、布尔值等簡單值使用
数组類型	`let numbers: number[] = [1, 2, 3];`	為特定類型的数组使用
函數類型	`function add(a: number, b: number): number`	為函數參數和返回值使用
對象類型	`let user: { name: string; age: number }`	為對象屬性使用
接口	`interface Person { name: string; age: number }`	為定義複雜對象結構使用

繼續編程，保持好奇心，記住——每個大師都曾經是初學者。快樂TypeScripting！??‍??‍?

Credits: Image by storyset