原文:TypeScript基本知识点整理
一、定义
有两种方式,函数声明和函数表达式。定义函数的时候,其参数和返回值均可以指定类型,当调用函数时,传入的参数必须与定义时的参数类型一致。
声明式定义:
// 参数类型 返回值类型
function f(age:number) : string {
return `找到了${age}的小哥哥`;
}
let age : number = 22;
let res : string = f(age);
console.log(res)
表达式式定义:
let f1 = (age:number) : string => {
return `找到了${age}的小哥哥`;
}
let age1 :number = 21;
let res1 :string = f1(age1);
console.log(res1)
表达式形式还有一种写法:(但是非常不建议)
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 返回值
function f3() : void {
console.log('没有返回值')
}
f3() // "没有返回值"
三、可选参数
function f4(age:number, cm?:number) : string {
//cm为可选参数,可传可不传
if (cm) {
return `可选参数------身高为${cm}厘米`;
} else {
return `可选参数-----年龄${age}岁`
}
}
console.log(f4(12))
console.log(f4(24, 175))
需要注意的是,可选参数一定要放在所有参数的最后面。
四、有默认值的参数
function f5(age:number, cm:number = 188) : string {
return `默认参数----年龄为${age}岁---身高为${cm}cm`
}
console.log(f5(25))
可选参数和默认参数不能同时使用在一个参数上。
五、剩余参数(rest 运算符)
//当有很多参数的时候,或者参数个数不确定,可以用三点运算符
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))
理所当然地,剩余参数需要放在所有参数的最后。
六、接口中的函数
第一种写法:
interface int1 {
say (age:number) : void //抽象方法
}
第二种写法:
interface int2 {
say : (age:number) => void //抽象方法
}
七、函数的重载
先声明所有方法重载的定义,不包含方法的实现,
再声明一个参数为 any 类型的重载方法,
实现 any 类型的方法并通过参数类型(和返回类型)不同来实现重载。
typescript 中的重载本质上就是通过逻辑判断参数类型来实现多种功能的目的。
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');
最后贴两个综合栗子:
/**
* 函数的重载发生的三种情况:
* 参数类型不同,参数数量不同,参数类型顺序不同
*
* 如果参数类型不同,则参数类型应设置成 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);
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);