本系列目的: 列出TypeScript与JavaScript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html

函数

简单使用

// 伪代码例子
函数名(参数: 类型): 返回值 {

}

// 例1
function add(x: number, y: number): number {
    return x + y;
}


// 例2 完整函数类型
let myAdd: (x2: number, y3: number) => number =
    function(x: number, y: number): number { return x + y; }; // 只要参数类型匹配就可以, 参数名无所谓

// 例3 如果声明了完整函数类型, 后面的类型可以省略
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y) { return x + y; };

参数

可选参数

和js不同的是, typescript函数在是使用时所传入的参数要符合所定义时的参数数量及类型. 那么我们可以使用?, 实现可选参数.(可选参数必须跟在必须参数后面)

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, 参数太少
let result2 = buildName("Bob", "Adams", "Sr.");  // error, 参数太多
let result3 = buildName("Bob", "Adams");         // ok


----------------------------------------------


function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // ok
let result2 = buildName("Bob", "Adams", "Sr.");  // error, 参数太多
let result3 = buildName("Bob", "Adams");  // ok

默认参数

默认参数和js一致, 并且默认参数与可选参数一样，在调用函数的时候可以省略. 与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值.(这点也与js保持一致)

function buildName(firstName: string, lastName = "Smith") {
    // ...
}

剩余参数

剩余参数可以采用es2015的rest运算符的形式使用. 例:

function buildName(firstName: string, ...restOfName: any[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie", 12, {gkd: 'gkd'});

this

typescript中可以限制this对象, 如下面的例子

// his参数是个假的参数，它出现在参数列表的最前面:
function f(this: void) {
    // 这么定义的话, 这个f函数内部无法使用this, 因为this的类型为void
}


-----------------------------------


// 详细用法
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),
    // 该函数现在显式指定其被调用者必须是Deck类型
    createCardPicker: function(this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

函数重载

和c++语言的重载不同的是, 只有一个处理函数, 如下面的例子:

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
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 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);

TypeScript与JavaScript不同之处系列(四) ===> 函数

函数