ts学习笔记-function

函数

函数类型

建议给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript 能够根据返回语句自动推断出返回值类型，因此通常省略。

function add(x: number, y: number) {
	return x + y;
}

• 完整的函数类型包含参数定义和类型定义。
• 不在乎参数的名字，类型相同即认为是有效的函数类型。
• 当无返回值时需要定义成 void 不能省略。
• 赋值语句一边指定了类型，另一边没有指定类型编译器会自动识别类型。

// 完整的函数类型
let myAdd: (x: number, y: number) => number = function (
	x: number,
	y: number
): number {
	return x + y;
};
// 推断类型
// myAdd has the full function type
let myAdd = function (x: number, y: number): number {
	return x + y;
};

// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number = function (x, y) {
	return x + y;
};

可选参数和默认参数

传递给一个函数的参数与函数期望的参数个数必须一致。可选参数必须跟在必须参数后面。必选参数后面的带默认值的参数是可选参数。注意：可选参数没有规定一定要放到必须参数后面，当带默认值参数放在必须参数前面，调用函数的时候一定要传入 undefined 以获得默认值。

剩余参数

• 使用 arguments 来访问剩余参数

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

• this 和箭头函数，箭头函数能够保存函数创建时的 this 值而不是调用时的 this 值，function 里面的 this 是调用时的 this 值。

let deck = {
	suits: ['hearts', 'spades', 'clubs', 'diamonds'],
	cards: Array(52),
	createCardPicker: function () {
		return function () {
			//--->调用时this
			let pickedCard = Math.floor(Math.random() * 52);
			let pickedSuit = Math.floor(pickedCard / 13);
			return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
		};
		// or
		return () => {
			//--->this指向deck
			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);

• 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),
	// NOTE: The function now explicitly specifies that its callee must be of type Deck
	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();

alert('card: ' + pickedCard.card + ' of ' + pickedCard.suit);

• this 参数在回调函数里面使用,回调函数在调用前会当成普通函数，this 将被指定为 undefined,所以需显式传递 this,此时显式传递的 this 的类型需要和库函数中定义的 this 类型一致。

函数重载

• 函数重载会根据传入的参数类型进行精确的类型检查，在使用函数重载的时候需要将最精确的定义放在最前面

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);

参考文档：https://www.tslang.cn/docs/handbook/functions.html