TypeScript-起步——TypeScript函数（二）

2、参数

① 参数的可选类型

1. 我们可以指定某个参数是可选的：

   function foo(x: number, y?: number) {
     console.log(x + (y ?? 0));
   }
   
   foo(20, 30) // 50
   foo(20) // 20
   

2. 这个时候这个参数x依然是有类型的，它是什么类型呢？ number | undefined

   

3. 另外可选类型需要在必传参数的后面：

   

② 默认参数

1. 从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：

   function foo(x: number = 100, y: number = 100) {
     console.log(x + y);
   }
   
   foo(20, 200) // 220
   foo(20) // 120
   foo() // 200
   

2. 这个时候y的类型其实是undefined和number类型的联合。

③ 剩余参数

1. 从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

   function sum(...numArr: number[]) {
     let total: number = 0;
   
     for(const num of numArr) {
       total += num
     }
   
     return total
   }
   
   console.log(sum(10, 20, 30)) // 60
   console.log(sum(10, 20, 30, 40, 50)) // 150
   

3、this类型

① 可推导的this类型

1. this是JavaScript中一个比较难以理解和把握的知识点：

   • 我在公众号也有一篇文章专门讲解this：mp.weixin.qq.com/s/hYm0JgBI2…
   • 因为this在不同的情况下会绑定不同的值，所以对于它的类型就更难把握了；

2. 那么，TypeScript是如何处理this呢？我们先来看一个例子：

   const info = {
     username: 'liangshuang',
     eating() {
       console.log(this.username + ' eating');
     }
   }
   
   info.eating() // liangshuang eating
   

3. 上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：

   • TypeScript认为函数 sayHello 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。

② 不确定的this类型

1. 但是对于某些情况来说，我们并不知道this到底是什么？

   function eating() {
     console.log(this.username + ' eating');
   }
   
   const info = {
     username: 'liangshuang',
     eating: eating
   }
   
   info.eating() // liangshuang eating
   

   

2. 这段代码运行会报错的：

   • 这里我们再次强调一下，TypeScript进行类型检测的目的是让我们的代码更加的安全；
   • 所以这里对于 sayHello 的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；
   • 但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来调用函数；