TS第二题：Typescript函数重载

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

ts题目第二题： 当前需要函数做一件事情，函数接收俩个参数，俩个参数都可以为string或者number，现在需要函数实现一个功能，功能为传入的俩个参数类型要相等，并且返回的类型也要和参数类型相同，题目是下面这个题目，对题目做出修改，当传入两个参数的类型不同时，ts会提示警告

function f(a: string | number, b: string | number) {
  if (typeof a === 'string') {
    return a + ':' + b; // no error but b can be number!
  } else {
    return a + b; // error as b can be number | string
  }
}

f(2, 3); // Ok
f(1, 'a'); // Error
f('a', 2); // Error
f('a', 'b') // Ok

函数重载，通过函数重载的方法对函数进行进一步的限制，一开始已经限制了函数的两个参数的类型限制，但是参数都是在string和number中任选，就会出现类型不相同的情况，所以需要通过函数重载来进行重新的限制

  function f(a:string,b:string):string
  function f(a:number,b:number):number
  function f(a: string | number, b: string | number) {
    if (typeof a === 'string') {
      return a + ':' + b; // no error but b can be number!
    } else {
      return a  + b; // error as b can be number | string
    }
  }
  
  f(2, 3); // Ok
  f(1, 'a'); // Error
  f('a', 2); // Error
  f('a', 'b') // Ok

通过在声明函数之前对函数的可变参数做一个确定的参数和确定的返回类型，提前声明了两个重载函数，这里function f各不冲突，表示同时传入string则返回string，同时传入number则返回number。

进入到函数中，这里看第一个判断，由于if里面是a为string，那么根据重载函数的声明，a为string，b不会出现报错是因为隐式转换无论b是string或者number都会被转为字符串，所以这里对b不用做其他的处理，但是在else判断中，ts会提示b可以是number和string

此处a是number b是number｜string，b的值会导致放回的类型不确定，所以需要对b进行处理，

function f(a: string | number, b: string | number) {
    if (typeof a === 'string') {
      return a + ':' + b; // no error but b can be number!
    } else {
        return a + +b
      //return a  + (b as number); // error as b can be number | string
    }
  }

方式1是类型if判断的处理方法，b变成+b，返回的会是number类型

方式2是进行类型断言，b直接取number

这样的话就能达到我们预期的效果