当前位置：首页 > news >正文

TypeScript 学习之 function

news 2025/6/28 9:32:59

函数可以实现抽象层，模拟类，信息隐藏和模块。
函数有：有名字的函数、匿名函数

在 JavaScript 中的函数

// 有名字的函数
function add(x, y) {return x + y;
}// 匿名函数
let myAdd = function (x, y) {return x + y;
};

函数类型

typescript 可以根据返回语句自动推断出返回值类型。
只要参数类型是匹配的，就是有效的函数类型
返回值类型是函数类型的必要部分，如果函数没有返回任何值，也必须指定返回值类型为void而不能留空。

function add(x: number, y: number): number {return x + y;
}let myAdd = function (x: number, y: number): number {return x + y;
};// 完整的类型
let myAdd: (baseValue: number, increment: number) => number = function (x: number,y: number,
): number {return x + y;
};

可选参数和默认参数

可选参数

TypeScript 的每个函数的参数都是必须的，会检查每个参数是否出入了值(包括null和undefined)。
在参数名旁加上? 实现可选参数的功能。
可选参数必须跟在必传参数后面，所以没有加?的参数在前面，加了?的参数在后面。

function buildName(firstName: string, lastName?: string) {if (lastName) {return firstName + ' ' + lastName;} else {return firstName;}
}let result1 = buildName('Bob');
// let result2 = buildName("Bob", "Adams", "Sr."); // error, 参数过多
let result3 = buildName('Bob', 'Adams');

默认参数

当函数被调用，而且参数没有传递或者传递的参数值为undefined的时候。
在所有必须参数后面的带默认初始化的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。
可选参数与末尾的默认参数共享参数类型。
默认参数放在必传参数前面，就需要传入undefined来获取默认值

// 可选参数
function buildName(firstName: string, lastName?: string) {}// 默认参数
function buildName(firstName: string, lastName: string = 'Smith') {}

剩余参数

剩余参数会被当作个数不限的可选参数

在 JavaScript 中,可以用arguments来访问所有传入的参数。
在 TypeScript 中,可以把所有参数收集到一个变量里。

function buildName(firstName: string, ...restOfName: string[]) {return firstName + '' + restOfName.join(' ');
}let employeeName = buildName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

this 和箭头函数

this 在函数被调用的时候才会指定值。

let deck = {suits: ['hearts', 'spades', 'clubs', 'diamonds'],cards: Array(52),createCardPicker: function () {return function () {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();alert('card: ' + pickedCard.card + ' of ' + pickedCard.suit);

运行这个程序，没有弹出对话框而是报错了，因为createCardPicker返回的函数里的this被设置为window而不是deck。
解决的这个问题可以用箭头函数

let deck = {suits: ['hearts', 'spades', 'clubs', 'diamonds'],cards: Array(52),createCardPicker: function () {// NOTE: the line below is now an arrow function, allowing us to capture 'this' right herereturn () => {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();alert('card: ' + pickedCard.card + ' of ' + pickedCard.suit);

在Typescript中，这个this的类型是any

this 参数

解决this的类型明确，可以提供一个显式的this参数

// 调用时，不用传入参数
function f(this: void) {}

改造前面的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,};};},
};

this 参数在回调函数里

当一个函数传递到某个函数被调用时，会被当作一个普通函数调用，this将为undefined。使用this参数避免这个问题

interface UIElement {addClickListener(onClick: (this: void, e: Event) => void): void;
}

this: void 说明 onClick函数里的this没有类型, 所以下面的传入回调报错

class Handler {info: string;onClickBad(this: Handle, e: Event) {this.info = e.message;}
}
let h = new Handler();
uiElement.addClickListener(h.onClickBad); // error! 应该传入 this: void 的函数

如果传入的函数需要使用原来的类中的属性，就需要使用箭头函数

class Handler {info: string;onClickGood = (e: Event) => {this.info = e.message;};
}

此方法缺点：1. 每个Handler对象都会创建一个箭头函数。2. onClickGood 只会被创建一次，添加到Handler的原型链上，在不同的Handler对象间是共享的。

重载

同一个函数提供多个函数类型定义来进行函数重载。

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},{suit: 'hearts',card: 4,},
];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert('card: ' + pickedCard1.card + ' of ' + pickedCard1.suit);let pickedCard2 = pickCard(15);
alert('card: ' + pickedCard2.card + ' of ' + pickedCard2.suit);