TypeScript 函数使用整理

一、介绍

函数是JavaScript应用程序的基础。它帮助你实现抽象层、模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块等，但函数仍然是主要定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，例如：形参类型、返回值，this的定义时指定等。

二、为函数定义类型

1.参数类型

//为函数指定参数类型和返回类型
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function (x: number, y: number): number { return x + y };书写完整函数类型：
函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。 我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。

第二部分是返回值类型。 对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。 如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。

let myAdd:(x:number,y:number)=>number=function(x:number,y:number):number{return x+y};2.可选参数？ 和 默认值参数
//可选参数
//可空参数，必须在形参列表的后边，不然编译出错，除非后面有指定默认值的参数
//可空参数的默认值都为undefined
function bindName(firstName?: string, lastName?: string) {
console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName();

//带默认值的参数不必放在形参列表的最后，这个C#中不相同
//带默认值的参数放在形参列表的最后，不必显示指定传入内容，默认传入undefined
//带默认值的参数不再形参的最后，必须显示传入undefined
function bindName(firstName: string, lastName: string = '张三丰') {
console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName('wangxiaoming');

//空参数和默认值参数同用
function bindName(firstName?: string, lastName: string = '张三丰') {
console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName();

//同名函数，一下编译出错
function bindName(firstName:string,lastName?:string){
console.info(`firstName=${firstName},lastName=${lastName}`);
}
function bindName(firstName:string,lastName:string='张三丰'){
console.info(`firstName=${firstName},lastName=${lastName}`);
}

3.剩余参数
//剩余参数
//方法调用没有传入其他参数则，传入空数组而不会异常
function bindName(firstName:string,...restOfName:string[]){
console.log(`firstName=${firstName},other:${restOfName.join('&')}`);
}
bindName('张三','a','b','c');
三、函数中this的使用
1.this和箭头函数

JavaScript里，this的值在函数被调用的时候才会指定。这是个既强大有灵活的特点，但是要需要花点时间弄清楚调用的上下文是什么。

在TypeScript中可以使用箭头函数指定this为定义时当前对象的引用。

//this 和箭头函数
//JavaSctipt 中的this指向的对象是运行时决定，而不是定义是决定的
//TypeScript中箭头函数，可以是this指定定义是的对象
let deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker: function () {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
console.info(typeof this);

console.info(this);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
}
}
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.info(pickedCard);2.this参数
this参数指定箭头函数中this的具体类型

//this 参数的使用
//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);
console.info(typeof this);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
}
}
}
let cardPicker=deck.createCardPicker();
let pickedCard=cardPicker();
console.info(cardPicker);3.this在回调函数，暂时略过。
四、函数重载

JavaScript本身是动态语言。JavaScript里函数传入不同的参数二返回不同的数据来实现方法重载。

TypeScript中可以指定any类型的形参、返回类型，在函数内部判断处理实现重载。

TypeScript编译器目前对于同作用域的相同的函数名称编译异常，也就是目前不允许有相同名称的函数。

//函数重载
//TypeScript中，目前出现两个名字相同的函数出现编译异常
//使用弱类型的形参和返回参数内部定义处理，实现方法重载
//重载定义，编译不通过
function pickCard(x: { suit: string; card: number; }): number {
return 2;
}
function pickCard(x: number): { suit: string; card: number; } {
return { suit: 'asdf', card: 3 };
}
//重载实现，编译通过
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 };
}
}

更多：
TypeScript 类使用整理

TypeScript 接口介绍

TypeScript 基础数据类型简介