TypeScript入门-函数

Posted 2020-09-09 老板丶鱼丸粗面

▓▓▓▓▓▓ 大致介绍

　　TypeScript为javascript函数添加了额外的功能，让我们可以更容易地使用。TypeScript中的函数也包括JavaScript中最常见的两种函数

function add(x,y){
    return x + y;
}

let add = function(x,y){
    return x + y;
}

 

▓▓▓▓▓▓ 函数类型

　　可以像变量一样为函数定义类型

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

let myAdd = function(x: number, y: number): number { return x+y; };

 

　　函数的完整类型

let add: (x: number,y: number) => number = 
    function(x: number,y: number): number { return x + y};

　　完整的函数类型太过麻烦，推荐还是写简单的，而且如果函数没有返回值，最好设置为void，不要留空

 

▓▓▓▓▓▓ 可选参数和默认参数

　　注意：在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");    

 

　　可选参数应该可以猜到，没错，就是使用？

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

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

 

　　默认参数都是老套路

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

let result1 = buildName("Bob");                  
let result2 = buildName("Bob", undefined);       
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams");        

 

▓▓▓▓▓▓ 剩余参数

　　有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用arguments来访问所有传入的参数。

　　在TypeScript里，你可以把所有参数收集到一个变量里：

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

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

　　

　　你也可以操作这个变量

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

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

 

▓▓▓▓▓▓ this

　　this是JavaScript中的难点之一，看看下面的代码

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return function() {
            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);

 

　　你的答案是什么？

　　答案是报错！这时因为deck.createCardPicker()返回一个函数赋值给cardPicker，而cardPicker是以函数式的方式调用的，所以this指向window。之所以这样是因为在JavaScript中this是在被调用时确定的，而在TypeScript中可以将this设置为在函数定义时就确定，方法就是把函数表达式变为使用lambda表达式（ () => {} ）

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        // NOTE: the line below is now an arrow function, allowing us to capture ‘this‘ right here
        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);

 

　　这样就没有问题了

 

参考资料:

　　　TypeScript Handbook（中文版）