您的位置:首页 > Web前端 > JavaScript

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

2020-04-05 07:16 651 查看

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

全系列目录

文章目录

  • 3. this
  • 4. 函数重载
  • 1. 函数

    1.1. 简单使用

    // 伪代码例子
    函数名(参数: 类型): 返回值 {
    
    }
    
    // 例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; };

    2. 参数

    2.1. 可选参数

    和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

    2.2. 默认参数

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

    undefined
    值来获得默认值.(这点也与js保持一致)

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

    2.3. 剩余参数

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

    function buildName(firstName: string, ...restOfName: any[]) {
    return firstName + " " + restOfName.join(" ");
    }
    
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie", 12, {gkd: 'gkd'});

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

    4. 函数重载

    和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);
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    刘翾 博客专家 发布了167 篇原创文章 · 获赞 275 · 访问量 59万+ 他的留言板 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: