Typescript - 函数

原文：TypeScript基本知识点整理

 

一、定义

　　有两种方式，函数声明和函数表达式。定义函数的时候，其参数和返回值均可以指定类型，当调用函数时，传入的参数必须与定义时的参数类型一致。

声明式定义：

?

1 2 3 4 5 6 7 8

//            参数类型    返回值类型 function f(age:number) : string {     return `找到了${age}的小哥哥`; }   let age : number = 22; let res : string = f(age); console.log(res)

表达式式定义：

?

1 2 3 4 5 6

let f1 = (age:number) : string => {     return `找到了${age}的小哥哥`; } let age1 :number = 21; let res1 :string = f1(age1); console.log(res1)

　　表达式形式还有一种写法：(但是非常不建议)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

let fn: (x: Type, y: Type) => Type = (x, y) => {     ... }   //例子 var run3: (x: number, y: number) => string = function(x: number, y: number): string{     return 'run3'; } console.log(run3(1, 2))     //当给变量run3指定类型的时候，应该是函数的参数和返回值的约束类型。如果用后面学到的ts类型推论，可以简写为：   var run4: (x: number, y: number) => string = function(x, y){ // 类型推论可以确定函数的参数和返回值类型，也就可以省略类型指定     return 'run4'; } console.log(run4(1, 2))

 

二、void 返回值

?

1 2 3 4

function  f3() : void {     console.log('没有返回值') } f3() // "没有返回值"

 

三、可选参数

?

1 2 3 4 5 6 7 8 9 10

function f4(age:number, cm?:number) : string {     //cm为可选参数，可传可不传     if (cm) {         return `可选参数------身高为${cm}厘米`;     } else {         return `可选参数-----年龄${age}岁`     } } console.log(f4(12)) console.log(f4(24, 175))

　　需要注意的是，可选参数一定要放在所有参数的最后面。

 

四、有默认值的参数

?

1 2 3 4

function f5(age:number, cm:number = 188) : string {     return `默认参数----年龄为${age}岁---身高为${cm}cm` } console.log(f5(25))

　　可选参数和默认参数不能同时使用在一个参数上。

 

五、剩余参数（rest 运算符）

?

1 2 3 4 5 6 7 8 9 10 11

//当有很多参数的时候，或者参数个数不确定，可以用三点运算符 function f6(...rest:number[]) : number[] {     return [...rest]; } console.log(f6(1,2,3,4,5,6,7,8,9))   function f7(a:number, b:number, ...rest:number[]) : number[] {     return [a, b, ...rest] }   console.log(f7(100,200,1,2,3,4,5,6))

　　理所当然地，剩余参数需要放在所有参数的最后。

 

六、接口中的函数

第一种写法：

?

1 2 3

interface int1 {     say (age:number) : void  //抽象方法 }

 第二种写法：

?

1 2 3

interface int2 {     say : (age:number) => void  //抽象方法 }

 

七、函数的重载

　　先声明所有方法重载的定义，不包含方法的实现，

　　再声明一个参数为 any 类型的重载方法，

　　实现 any 类型的方法并通过参数类型（和返回类型）不同来实现重载。

 

　　typescript 中的重载本质上就是通过逻辑判断参数类型来实现多种功能的目的。

?

1 2 3 4 5 6 7 8 9 10

function f1(x: number, y: number): number; function f1(x: string, y: string): string;   // 上面定义函数的格式，下面定义函数的具体实现 function f1(x: any, y: any): any {     return x + y; }   f1(1, 2); f1('a', 'b');

 

 

最后贴两个综合栗子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/**  * 函数的重载发生的三种情况：  * 参数类型不同，参数数量不同，参数类型顺序不同  *  * 如果参数类型不同，则参数类型应设置成 any  */   let suits = ["hearts", "spades", "clubs", "diamonds"];   // 重载函数的定义 function pickCard(x: {suit: string, card: number }[]): number; // x obj类型的数组 function pickCard(x: number): {suit: string, card: number };   // 函数的具体实现 function pickCard(x: any): 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)]; console.log("card: " + pickedCard1.card + " of " + pickedCard1.suit);   let pickedCard2 = pickCard(15); console.log("card: " + pickedCard2.card + " of " + pickedCard2.suit);

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

let suits = ['heart', 'spades', 'clubs', 'diamonds'];   interface Card {     suit: string;     card: number; }   // there are overloaded functions' Definition function pickCard(x: Card[]): number; function pickCard(x: number): Card;   // this relize overloaded function function pickCard(x): any {     if (typeof x == 'object') { // x is Array         return Math.floor(Math.random() * x.length);     } 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)]; console.log("card: " + pickedCard1.card + " of " + pickedCard1.suit);   let pickedCard2 = pickCard(15); console.log("card: " + pickedCard2.card + " of " + pickedCard2.suit);