TypeScript学习笔记-函数

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a6aeefb518825732472686f

文章标签：

#javascript #ViewUI

本文深入讲解了TypeScript中函数的基本概念、类型定义、参数处理方式（包括可选参数、默认参数、剩余参数）以及如何使用this关键字。同时，还探讨了函数重载的概念及其实际应用。

函数

函数类型

// 包含两部分：参数类型和返回值类型
function add (x: number, y: number): number {
    return x + y;
}
// 赋值语句的完整函数类型,赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会推断类型，自动识别出类型
let myAdd: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
}
复制代码

可选参数和默认参数

// 传递给一个函数的参数个数必须与函数期望的参数个数一致

// 可选参数
// 在参数名旁使用 ? 实现可选参数的功能，可选参数必须跟在必须参数后面
function buildNameA (firstName: string, lastName?: string) {
    return lastName ? `${firstName}.${lastName}` : `${firstName}`;
}
console.log(buildNameA('Bob'));
console.log(buildNameA('Bob', 'Adams'));

// 默认参数
// 带默认值的参数不需要放在必须参数的后面, 出现在必须参数前面，必须明确的传入 undefined值来获得默认值
function buildNameB (firstName = 'Will', lastName: string) {
    return lastName ? `${firstName}.${lastName}` : `${firstName}`;
}
console.log(buildNameB('Bob', 'Adams'));
console.log(buildNameB(undefined, 'Adams'));

// 剩余参数
// 剩余参数会被当做个数不限的可选参数, 编译器创建参数数组.
function buildNameC (firstName: string, ...restOfName: string[]) {
    return `${firstName}, ${restOfName.join(', ')}`;
}
console.log(buildNameC('Joseph', 'Samuel', 'Lucas', 'MacKinzie'));
复制代码

this

// this和箭头函数
// JavaScript里，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);

// this参数在回调函数里
interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void
}
class Handler {
    info: string;
    onClickBad = (e: Event) => {
        this.info = e.message;
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClickBad);
复制代码

重载

// 查找重载列表，尝试使用第一个重载定义，一定要把最精确的定义放在最前面
// function pickCard(x): any并不是重载列表的一部分，这里只有前两个是重载
let suits = ['hearts', 'spades', 'clubs', 'diamonds'];
function pickCard(x: {suit: string; card: number}[]): number;
function pickCard(x: number): {suit: string; card: number};
function pickCard(x): any {  // 此处根据重载定义判断传入的值
    if (typeof x === 'object') {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } else if (typeof x === 'number') {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}
let myDeck = [{ suit: 'diamonds', card: 2 }, { suit: 'spades', card: 10 }];
console.log(pickCard(myDeck));
console.log(pickCard(15));
复制代码