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

③ 指定this的类型

1. 这个时候，通常TypeScript会要求我们明确的指定this的类型：

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

2. 但是直接调用的时候会报错：

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

   

3. 想要直接调用函数的时候，必须传递对应的参数，使用call或者apply进行显示绑定this：

   type ThisType = { username: string }
   
   function eating(this: ThisType) {
     console.log(this.username + ' eating');
   }
   
   const info = {
     username: 'liangshuang',
     eating: eating
   }
   
   eating.call({ username: '彭于晏' }) // 彭于晏 eating
   eating.apply({ username: '吴彦祖' }) // 吴彦祖 eating
   

4. 也可以传递多个参数：

   type ThisType = { username: string }
   
   function eating(this: ThisType, message: string) {
     console.log(this.username + ' eating ' + message);
   }
   
   const info = {
     username: 'liangshuang',
     eating: eating
   }
   
   info.eating('Hello') // liangshuang eating Hello 
   
   eating.call({ username: '彭于晏' }, 'Hello') // 彭于晏 eating Hello
   eating.apply({ username: '吴彦祖' }, ['Hello']) // 吴彦祖 eating Hello
   

4、重载

① 函数的重载

1. 在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，应该如何编写呢？

2. 我们可能会这样来编写，但是其实是错误的：

   function add(num1: number | string, num2: number | string): number | string {
     return num1 + num2;
   }
   

   

3. 那么这个代码应该如何去编写呢？

   • 在TypeScript中，我们可以去编写不同的重载签名（overload signatures）来表示函数可以以不同的方式进行调用；
   • 一般是编写两个或者以上的重载签名，再去编写一个通用的函数以及实现；

② sum函数的重载

1. 比如我们对sum函数进行重构：

   • 在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；

     function add(num1: number, num2: number): number;
     function add(num1: string, num2: string): string;
     function add(num1: any, num2: any): any {
       return num1 + num2;
     }
     
     console.log(add(1, 2)); // 3
     console.log(add('a', 'b')); // ab
     

   • 但是注意，当调用重载函数的时候，传递的参数与定义的不匹配的时候，函数是不能被执行的：

     

③ 联合类型和重载

1. 我们现在有一个需求：定义一个函数，可以传入字符串或者数组，获取它们的长度。

2. 这里有两种实现方案：

   • 方案一： 使用联合类型来实现；

     

   • 方案二： 实现函数重载来实现；

     

3. 在开发中我们选择使用哪一种呢？

   • 在可能的情况下，尽量选择使用联合类型来实现；