TypeScript 函数官方文档学习
TypeScript 函数官方文档学习
介绍
函数是JS应用程序的基础. 它帮助你实现抽象层, 模拟类, 信息隐藏和模块. 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。
函数
和JS一样, TS可以创建有名字的函数和匿名函数. 你可以随意选择适合应用程序的方式, 不论是定义一系列API函数还是只使用一次的函数。
通过下面的例子可以迅速回想起这两种JavaScript中的函数：
// 有名字的函数 Named function
function add(x, y) {
return x + y
}
// 匿名函数
let myAdd = function(x, y) {
return x + y
}
(function() {
console.log("Hello world")
})()
通过匿名函数可以实现闭包, 闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。
在JavaScript里，函数可以使用函数体外部的变量。 当函数这么做时，我们说它‘捕获’了这些变量。
至于为什么可以这样做以及其中的利弊超出了本文的范围，但是深刻理解这个机制对学习JavaScript和TypeScript会很有帮助。
let z = 100;
function addToZ(x, y) {
return x + y + z;
}
函数类型
为函数定义类型
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
书写完整函数类型
let myAdd: (x: number, y: number) => number = // (x: number, y: number) => number
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; };
参数列表的名字与实际函数参数的名字可以不同.
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。
第二部分是返回值类型。 对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。 如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。
函数的类型只是由参数类型和返回值组成的。 函数中使用的捕获变量不会体现在类型里。 实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
推断类型
尝试这个例子的时候, 你会发现如果你在赋值语句的一边指定了类型但是另外一边没有类型的话, TS编译器会自动识别出类型:
// myAdd 具有完整的函数类型
let myAdd = function(x: number, y: number): number { return x + y; };
// 参数' x '和' y '具有类型number
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };
这叫做“按上下文归类”，是类型推论的一种。 它帮助我们更好地为程序指定类型。
可选参数和默认参数
TS里每个函数参数都是必须的. 这不是不能传递null或undefined作为参数, 而是说编译器检查用户是否为每个参数都传入了值. 编译器还会假设只有这些参数会被传递进函数.简短的说, 传递给一个函数的参数个数必须与函数期望的参数个数一致.
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName
}
let result1 = buildName("Bob"); // 错误, 参数太少
let result2 = buildName("Bob", "Adams", "Sr."); // 错误, 参数太多
let result3 = buildName("Bob", "Adams"); // 参数刚刚好
JS里, 每个参数都是可选的, 可传可不传, 没传参的时候它的值就是undefined.
我们如果想在TS里实现如此可选参数的功能, 可以使用? . 比如, 我们想让lastName是可选的:
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 现在可以正常工作
let result2 = buildName("Bob", "Adams", "Sr."); // 错误, 参数太多
let result3 = buildName("Bob", "Adams"); // 参数刚刚好
可选参数必须跟在必须参数后面。 如果上例我们想让firstName是可选的，那么就必须调整它们的位置，把firstName放在后面。
在TypeScript里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例，把lastName的默认值设置为"Smith"。
function buildName(firstName: string, lastName: string="Smith") {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 现在可以正常工作, 返回 "Bob Smith"
let result2 = buildName("Bob", undefined); // 依然正常工作, 返回 "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr."); // 错误, 参数太多
let result4 = buildName("Bob", "Adams"); // 参数刚刚好
在所有必须参数后面的带默认初始化的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。 也就是说可选参数与末尾的默认参数共享参数类型。
function buildName(firstName: string, lastName?: string) {
// ...
}
function buildName(firstName: string, lastName = "Smith") {
// ...
}
共享同样的类型(firstName: string, lastName?: string) => string。 默认参数的默认值消失了，只保留了它是一个可选参数的信息。
与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值。 例如，我们重写最后一个例子，让 firstName是带默认值的参数：
function buildName(firstName = "Will", lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 错误, 参数太少
let result2 = buildName("Bob", "Adams", "Sr."); // 错误, 参数太多
let result3 = buildName("Bob", "Adams"); // 正常, 返回 "Bob Adams"
let result4 = buildName(undefined, "Adams"); // 正常, 返回 "Will Adams"
剩余参数
必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用 arguments来访问所有传入的参数。
在TypeScript里，你可以把所有参数收集到一个变量里：
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 编译器创建参数数组，名字是你在省略号（ ...）后面给定的名字，你可以在函数体内使用这个数组。
这个省略号也会在带有剩余参数的函数类型定义上使用到：
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
this
学习如何在JavaScript里正确使用this就好比一场成年礼。 由于TypeScript是JavaScript的超集，TypeScript程序员也需要弄清 this工作机制并且当有bug的时候能够找出错误所在。幸运的是，TypeScript能通知你错误地使用了 this的地方。
this和箭头函数
JavaScript里，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是个函数，并且它又返回了一个函数。 如果我们尝试运行这个程序，会发现它并没有弹出对话框而是报错了。 因为 createCardPicker返回的函数里的this被设置成了window而不是deck对象。 因为我们只是独立的调用了 cardPicker()。 顶级的非方法式调用会将 this视为window。 （注意：在严格模式下， this为undefined而不是window）。
为了解决这个问题，我们可以在函数被返回时就绑好正确的this。 这样的话，无论之后怎么使用它，都会引用绑定的‘deck’对象。 我们需要改变函数表达式来使用ECMAScript 6箭头语法。 箭头函数能保存函数创建时的 this值，而不是调用时的值：
let deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function() {
// 下面一行现在是一个箭头函数，允许我们在这里捕获“this”
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参数。 this参数是个假的参数，它出现在参数列表的最前面：
function f(this: void) {
// make sure `this` is unusable in this standalone function
}
让我们往例子里添加一些接口，Card 和 Deck，让类型重用能够变得清晰简单些：
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),
// 这个函数现在显式地指定它的被调用者必须是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);
现在TypeScript知道createCardPicker期望在某个Deck对象上调用。 也就是说 this是Deck类型的
this参数在回调函数里
你可以也看到过在回调函数里的this报错，当你将一个函数传递到某个库函数里稍后会被调用时。 因为当回调被调用的时候，它们会被当成一个普通函数调用， this将为undefined。
稍做改动，你就可以通过 this参数来避免错误。 首先，库函数的作者要指定 this的类型：
interface UIElement {
addClickListener(onclick: (this: void, e: Event) => void): void;
}
this: void意味着addClickListener期望onclick是一个不需要this的函数, 然后用this注释你的回调代码.
class Handler {
info: string;
onClickBad(this: Handler, e: Event) {
// 在这里使用this会让这个回调在运行时崩溃.
this.info = e.message;
}
}
let h = new Handler();
uiElement.addClickListener(h.onClickBad); // 报错
指定了this类型后，你显式声明onClickBad必须在Handler的实例上调用。 然后TypeScript会检测到 addClickListener要求函数带有this: void。 改变 this类型来修复这个错误：
class Handler {
info: string;
onClickGood(this: void, e: Event) {
// 这里不能用this，因为它的类型是void!
console.log('clicked!');
}
}
let h = new Handler();
uiElement.addClickListener(h.onClickGood);
因为onClickGood指定了this类型为void，因此传递addClickListener是合法的。 当然了，这也意味着不能使用 this.info. 如果你两者都想要，你不得不使用箭头函数了：
class Handler {
info: string;
onClickGood = (e: Event) => { this.info = e.message }
}
这是可行的因为箭头函数不会捕获this，所以你总是可以把它们传给期望this: void的函数。 缺点是每个 Handler对象都会创建一个箭头函数。 另一方面，方法只会被创建一次，添加到 Handler的原型链上。 它们在不同 Handler对象间是共享的。
重载
JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。
let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x): any {
// 检查一下看看是否参数是 object/array
// 如果是这样的话, 参数给予deck, 我们选取pickedCard
if (typeof x == "object") {
let pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
// 其他情况下只选取card
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);
pickCard方法根据传入参数的不同会返回两种不同的类型。 如果传入的是代表纸牌的对象，函数作用是从中抓一张牌。 如果用户想抓牌，我们告诉他抓到了什么牌。 但是这怎么在类型系统里表示呢。
方法是为同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用。 下面我们来重载 pickCard函数。
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 {
// 检查一下看看是否参数是 object/array
// 如果是这样的话, 参数给予deck, 我们选取pickedCard
if (typeof x == "object") {
let pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
// 其他情况下只选取card
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);
这样改变后，重载的pickCard函数在调用的时候会进行正确的类型检查。
为了让编译器能够选择正确的检查类型，它与JavaScript里的处理流程相似。 它查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。
注意，function pickCard(x): any并不是重载列表的一部分，而是具体的实现, 因此这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。
