TypeScript与JavaScript不同之处系列 ===; 函数

Posted 2022-03-12 刘翾

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

全系列目录

• 1.基础类型 https://blog.csdn.net/c_kite/article/details/85232021
• 2.接口 https://blog.csdn.net/c_kite/article/details/85262016
• 3.类 https://blog.csdn.net/c_kite/article/details/85274189
• 4.函数 https://blog.csdn.net/c_kite/article/details/85283691
• 5.泛型 https://blog.csdn.net/c_kite/article/details/85335913
• 6.枚举 https://blog.csdn.net/c_kite/article/details/85337336
• 7.类型推论, 类型兼容性 https://blog.csdn.net/c_kite/article/details/85380924
• 8.高级类型 https://blog.csdn.net/c_kite/article/details/85457753
• 9.命名空间, 三斜线指令 https://blog.csdn.net/c_kite/article/details/85524576

文章目录

• 全系列目录
• 1. 函数
• • 1.1. 简单使用
  • 2. 参数
  • • 2.1. 可选参数
    • 2.2. 默认参数
    • 2.3. 剩余参数
  • 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);