TypeScript - 函数類型

你好，有志於成為程序員的各位！今天，我們將要深入TypeScript函數類型的迷人世界。別擔心如果你是編程新手；我會一步步地引導你理解每個概念，就像我這些年來對無數學生所做的一樣。讓我們一起踏上這個令人興奮的旅程！

為函數指定類型

在TypeScript中，函數是第一公民，這意味著我們可以像對待其他任何值一樣對待它們。但使TypeScript特別的是它給這些函數指定類型的能力。想像你是一位廚師（函數）並擁有一個特殊的食譜（函數類型）。食譜告訴你需要哪些食材（參數）以及你將創造哪種菜肴（返回類型）。

讓我們看一個簡單的例子：

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

在這個例子中，greet是我們的函數。它接受一個類型為string的name作為輸入並返回一個string。括號後面的: string指定了返回類型。

現在，讓我們試著使用這個函數：

const greeting = greet("Alice");
console.log(greeting); // 輸出：Hello, Alice!

TypeScript會確保我們正確地使用這個函數。如果我們試著傳遞一個數字而不是字符串：

greet(123); // 錯誤：參數類型為'number'，無法賦值給類型為'string'的參數。

TypeScript會在我們甚至還未運行代碼之前捕獲這個錯誤。這就像在廚房裡有一個有用的助手，確保你不會不小心用糖代替鹽！

TypeScript函數類型表達式

現在，讓我們學習函數類型表達式。這些就像是我們函數的藍圖。它們描述了函數應該是什麼樣的，而不實際實現它。

這裡有一個一般的語法：

(parameter1: type1, parameter2: type2, ...) => returnType

例如：

let mathOperation: (x: number, y: number) => number;

這聲明了mathOperation作為一個變量，它可以持有任何接受兩個數字並返回一個數字的函數。這就像說，“我需要一位能夠用兩種食材創造一道菜的廚師。”

然後我們可以將一個函數賦值給這個變量：

mathOperation = function(x, y) {
return x + y;
}

console.log(mathOperation(5, 3)); // 輸出：8

聲明函數類型變量

我們也可以使用類型別名來給我們的函數類型命名。這在我們想在多個地方重用同樣的函數類型時很有用。

type GreetFunction = (name: string) => string;

let greet: GreetFunction;

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

console.log(greet("Bob")); // 輸出：Hello, Bob!

在這個例子中，GreetFunction是我們的類型別名。這就像給我們的食譜取一個名字，以後我們可以很容易地引用它。

指定函數參數為函數

有時候，我們想要將函數作為參數傳遞給其他函數。這是一個在編程中非常強大的概念，叫做“高階函數”。這就像有一個總廚可以指導其他廚師。

讓我們看一個例子：

function applyOperation(x: number, y: number, operation: (a: number, b: number) => number): number {
return operation(x, y);
}

let result = applyOperation(5, 3, (a, b) => a + b);
console.log(result); // 輸出：8

result = applyOperation(5, 3, (a, b) => a * b);
console.log(result); // 輸出：15

在這裡，applyOperation是我們的高階函數。它接受兩個數字和一個操作函數作為參數。我們可以傳遞不同的操作函數來得到不同的結果。

使用類型別名處理函數類型

類型別名可以使我們在處理複雜函數類型時的代碼更具可讀性。讓我們看一個更複雜的例子：

type MathOperation = (x: number, y: number) => number;
type MathOperationWithDescription = (description: string, operation: MathOperation) => string;

const add: MathOperation = (x, y) => x + y;
const subtract: MathOperation = (x, y) => x - y;

const describeMathOperation: MathOperationWithDescription = (description, operation) => {
return `${description}: ${operation(10, 5)}`;
}

console.log(describeMathOperation("加法", add)); // 輸出：加法: 15
console.log(describeMathOperation("減法", subtract)); // 輸出：減法: 5

在這個例子中，我們創建了兩個類型別名：MathOperation和MathOperationWithDescription。這使我們的代碼更具可讀性和可維護性。

以下是我們討論過的函數類型的總結：

函數類型	描述	示例
基本函數類型	指定參數類型和返回類型	(name: string) => string
函數類型變量	可以持有特定類型的函數的變量	let greet: (name: string) => string;
函數類型別名	可以重用的命名函數類型	type GreetFunction = (name: string) => string;
高階函數	接受函數作為參數的函數	(x: number, y: number, operation: (a: number, b: number) => number) => number

記住，TypeScript的函數類型是關於確保我們正確使用我們的函數。它們就像道路上的護欄，幫助我們保持在正確的軌道上並避免錯誤。隨著練習，你會發現它們使你的代碼更加健壯且更易於理解。

持續編碼，持續學習，並記得在途中玩得開心！

Credits: Image by storyset