Typescript

原文：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);