LayaBox---TypeScript---函数

Posted 2022-08-07 格拉格拉

在ts中虽然已经支持类、命名空间和模块，但是函数仍然是主要的定义行为的地方。

目录

1.函数

2.函数类型

3.可选参数和默认参数

4.剩余参数

this和箭头函数

5.重载

---

1.函数

和javascript一样，TypeScript函数可以创建有名字的函数和匿名函数。
// Named function
function add(x, y) 
    return x + y;


// Anonymous function
let myAdd = function(x, y)  return x + y; ;

2.函数类型

让我们为上面那个函数添加类型：
function add(x: number, y: number): number 
    return x + y;


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

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。

函数的完整类型
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number  return x + y; ;

函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。

以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。 这个名字只是为了增加可读性。
let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number  return x + y; ;

推断类型：

如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型：

// myAdd has the full function type
let myAdd = function(x: number, y: number): number  return x + y; ;

// The parameters `x` and `y` have the type number
let myAdd: (baseValue: number, increment: number) => number =
    function(x, y)  return x + y; ;
这叫做“按上下文归类”，是类型推论的一种。 它帮助我们更好地为程序指定类型。

3.可选参数和默认参数

传递给一个函数的参数个数必须与函数期望的参数个数一致。
function buildName(firstName: string, lastName: string) 
    return firstName + " " + lastName;


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

js里每个参数都是可选的，可传可不传。没传的时候它的值就是undefined.

ts里可以值参数名后使用“？”实现可选参数的功能。

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

在TypeScript里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例，把last name的默认值设置为"Smith"。

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


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

⚠️注意：与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值。

4.剩余参数

当你想同时操作多个参数，或者你并不知道会有多少参数传递进来。

在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和箭头函数

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);

可以看到createCardPicker是个函数，并且它又返回了一个函数。 如果我们尝试运行这个程序，
会发现它并没有弹出对话框而是报错了。 因为 createCardPicker返回的函数里的this被设置成
了window而不是deck对象。 因为我们只是独立的调用了 cardPicker()。 顶级的非方法式调用会
将 this视为window。 （注意：在严格模式下， this为undefined而不是window）。

为了解决这个问题，我们可以在函数被返回时就绑好正确的this。 这样的话，无论之后怎么使用它，
都会引用绑定的‘deck’对象。 我们需要改变函数表达式来使用ECMAScript 6箭头语法。 箭头函数
能保存函数创建时的 this值，而不是调用时的值：

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);

5.重载

JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。

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

function pickCard(x): any 
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") 
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    
    // Otherwise just let them pick the card
    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);


pickCard方法根据传入参数的不同会返回两种不同的类型。 如果传入的是代表纸牌的对象，
函数作用是从中抓一张牌。 如果用户想抓牌，我们告诉他抓到了什么牌。 

但是这怎么在类型系统里表示呢，下面我们来重载 pickCard函数。
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 
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") 
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    
    // Otherwise just let them pick the card
    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);

这样改变后，重载的pickCard函数在调用的时候会进行正确的类型检查。

⚠️注意：function pickCard(x): any并不是重载列表的一部分，

这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。