Typescript - 3. 函数在 TypeScript 中，函数的声明和使用与 JavaScript 相似，但 T

在 TypeScript 中，函数的声明和使用与 JavaScript 相似，但 TypeScript 提供了类型注解来提高代码的可靠性和可读性。下面详细介绍如何在 TypeScript 中使用函数类型注解、可选参数、默认参数、剩余参数和 this 参数。

1. 函数类型注解

在 TypeScript 中，可以为函数的参数和返回值添加类型注解，以确保函数的输入输出符合预期。

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

let sum: number = add(1, 2);  // 正常调用
// let sumError: number = add(1, '2');  // Error: '2' 不是 number 类型

2. 可选参数和默认参数

可选参数

在 TypeScript 中，可以使用 ? 标记参数为可选参数。可选参数必须放在必需参数之后。

function buildName(firstName: string, lastName?: string): string {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

let result1 = buildName("Bob");  // OK
let result2 = buildName("Bob", "Adams");  // OK
// let result3 = buildName("Bob", "Adams", "Sr.");  // Error: 多余参数

默认参数

可以为参数提供默认值，当调用函数时如果没有提供该参数，则使用默认值。

function buildNameWithDefault(firstName: string, lastName: string = "Smith"): string {
    return firstName + " " + lastName;
}

let result3 = buildNameWithDefault("Bob");  // 输出: "Bob Smith"
let result4 = buildNameWithDefault("Bob", "Adams");  // 输出: "Bob Adams"

3. 剩余参数

TypeScript 支持使用剩余参数（rest parameters）来处理不定数量的参数。剩余参数使用 ... 语法，并且它们会被收集到一个数组中。

function buildFullName(firstName: string, ...restOfName: string[]): string {
    return firstName + " " + restOfName.join(" ");
}

let fullName = buildFullName("Joseph", "Samuel", "Lucas", "MacKinzie");  // 输出: "Joseph Samuel Lucas MacKinzie"

4. `this` 参数

在 TypeScript 中，可以显式地为函数指定 this 参数的类型，以确保 this 在方法内部指向正确的对象。注意，this 参数不能作为实际的参数传递，它只是用于类型检查。

interface Card {
    suit: string;
    card: number;
}

interface Deck {
    suits: string[];
    cards: number[];
    createCardPicker(this: Deck): () => Card;
}

let deck: Deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function(this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
        };
    }
};

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

console.log("card: " + pickedCard.card + " of " + pickedCard.suit);  // 例如输出: "card: 10 of hearts"

在上面的例子中，createCardPicker 方法中的 this 参数类型被显式声明为 Deck，这样在方法中使用 this.suits 和 this.cards 时会进行类型检查。箭头函数不会创建自己的 this，它会捕获函数创建时的 this 值，因此在 createCardPicker 方法中使用箭头函数可以确保 this 指向 deck 对象。

通过这些功能，TypeScript 能够提供强大的类型检查和智能提示，从而帮助开发者编写更安全和更高效的代码。

Typescript - 3. 函数