TypeScript入门-函数

Posted 老板丶鱼丸粗面

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeScript入门-函数相关的知识,希望对你有一定的参考价值。

▓▓▓▓▓▓ 大致介绍

  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(中文版)

以上是关于TypeScript入门-函数的主要内容,如果未能解决你的问题,请参考以下文章

TypeScript高级类型入门手册:附大量代码实例(收藏!)

Typescript 入门手册之函数类型在 TypeScript 中的应用

Typescript 入门手册之函数类型在 TypeScript 中的应用

软件开发入门教程网之TypeScript 基础语法

TypeScript入门-函数

TypeScript 入门14.泛型