1. 函数类型
1.1 为函数定义类型
具名函数
function add(x,y) {
return x+y;
}
添加类型
function add(x:number, y:number): number {
return x+y;
}
匿名函数
let add = function(x,y) {
return x+y;
}
添加类型
let add = function(x:number,y:number):number {
return x+y;
}
1.2 完整函数类型
// (x:number,y:number) => number 为函数类型
// (x:number,y:number) 为参数类型， => number 对应返回值类型。对于完整函数类型来说，这两部分都是需要的
let add: (x:number,y:number) => number = function(x:number,y:number):number {
return x + y;
}
// 其中，参数类型指定了名字和类型,如 x: number, x为名字，number为类型。而名字只是为了增加可读性，不存在实际的限制，如：
let add: (baseValue:number, increment:number) => number = function(x:number,y:number):number {
return x + y;
}
此时参数类型的名字 baseValue 与 真正参数的名字 x 并不相同。我们只要参数类型匹配，就认为是有效的类型。
第二部分是返回值类型，如 number, 对于函数和返回值类型必须使用 => 符号。返回值类型是函数类型的必要部分,如果没有返回值，必须指定为 void
推断类型
// The parameters `x` and `y` have the type number
let add: (baseValue:number,increment:number)=>number = (x,y) => {
return x+y;
}
即赋值语句一边(如左边)指定了类型，而另一边(如右边)没有指定类型，TypeScript会自动识别出类型。
1.3 函数参数
TypeScript要求函数的实参个数和形参个数相等：
function buildName(firstName: string, lastName: string) {
return firstName + lastName;
}
buildName('bob'); // error, 参数过少
buildName('bob','adams','sr'); // error, 参数过多
buildName('bob','adams'); // 正确
可选参数
function buildName(firstName: string, lastName?: string) {
return firstName + lastName;
}
buildName('1') // 正确
buildName('1','2') // 正确
可以使用 ? 表示参数可选。 可选参数必须放在函数的必须参数后面。
默认参数
function buildName(firstName: string, lastName='123') {
return firstName + lastName;
}
buildName('1') // 正确, 默认参数同样是可选的，此时实参不必和形参个数一样
buildName('1','2') // 正确
可选参数函数和默认参数函数共享一个函数类型：(firstName:string, lastName: string) => string,此时默认参数的默认值消失了，只表示它是可选参数
和可选参数函数不同，默认参数函数的默认值参数不必放在必须参数后面，此时如果默认值参数出现在必须参数之前，那么必须明确传入 undefined 来获取默认值：
function buildName(firstName='123', lastName:string) {
return firstName + lastName;
}
buildName('bob') // error 实参太少，此时 firstName 为 bob， lastName 为 undefined
buildName(undefined, 'bob') // 正确，firstName='123', lastName='bob'
剩余参数
function buildName(firstName:string, ...restOfName: string[]) {
return firstName + restOfName.join('-');
}
const employeeName = buildName('1','2','3','4');
// restOfName === [2,3,4]
剩余参数函数的类型:
function buildName(firstName:string, ...restOfName: string[]) {
return firstName + restOfName.join('-');
}
const buildFun: (name:string, ...rest: string[]) => string = buildName
2. this
this和箭头函数
在js中，this的值只有在被调用的时候才会指定，而不是在定义函数的时候。
let deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
createCardPicker: function() {
return function() {
// 返回一个函数，且该函数为非方法式调用(不是object.method())
// 那么 this 为 window，严格模式下为 undefined
return this.suits
}
}
}
let cardPicker = deck.createCardPicker();
cardPicker(); // error, undefined 上没有 suits 属性
为了解决这个问题，可以在函数被返回时绑定好 this ，无论之后怎么调用，this 都是 deck 对象,而不是调用时的值：
let deck = {
suits: '123',
createCardPicker: function() {
return () => {
// 通过箭头函数， this 绑定为 deck 对象
return this.suits
}
}
}
let cardPicker = deck.createCardPicker();
cardPicker(); // 输出 '123'
更为友好的是，如果使用 TypeScript,且给编译器设置了 --noImplicitThis , 那么第一种情况里的 this 会认为是 any 类型，而第二种this是deck的类型。
函数重载
当需要某个方法，根据传入参数的类型不同，而返回不同类型的值时，就需要用到重载
function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
if (typeof x == "object") {
...
}
else if (typeof x == "number") {
...
}
}
注意点
function pickCard(x): any 不是重载列表的一部分，即pickCard函数只有两个重载，只能接受对象或者数字作为参数，其它参数则会报错