一看就会系列-TS重载

淘米不会飞
150 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

为什么使用ts重载

  1. 让代码可读性，可维护性提升。
  2. 各司其职，自动提示方法和属性：每个重载签名函数完成各自功能，输出值是不用强制转换就能出现自动提示，从而提高开发效率。
  3. 更利于功能扩展。
    如果用any数据类型的属性和方法不会自动提示,函数重载则会自动提示。
    函数签名：函数名称+函数参数+函数参数类型+返回值类型四者合成。在TS重载中，分为实现签名，和重载签名。

ts函数重载规则

  1. 由一个实现签名 加以个或多个重载签名合成。
  2. 外部调用函数重载定义的函数时,只能调用重载签名，不能调用实现签名。
  3. 调用重载函数式，会根据传参来判断调用哪个函数签名。
  4. 只有一个函数体，只有实现签名有函数体，重载签名没有函数体。
  5. 实现签名的参数个数可以少于重载签名的个数，但是实现签名如果准备包含重载签名的某个位置的参数，那实现签名就必须兼容所有重载签名该位置的参数类型。
  6. 必须给重载签名提供返回值，TS无法默认推导。提供的重载签名的返回值类型不一定为其执行时的真实返回值类型，可以为重载签名提供的真实返回类型。也可以提供void 或者unknown或any类型，如果重载签名的返回值类型是void或unknown或any类型，那么将由实现签名来决定重载签名执行时的返回值类型。
type infoType = 'male' | 'female' | string

type Info = {
id: number,
sex: infoType,
both: string
}

const students: Array = [
{ id: 1, sex: 'male', both: '2000-10-10' },
{ id: 2, sex: 'female', both: '2000-10-10' },
{ id: 3, sex: 'female', both: '2000-11-10' },
]
function getStudentInfo (id: number): Info
function getStudentInfo (sex: string): Array
function getStudentInfo (value: number| string) : Info |Array | undefined{
if (typeof value === 'number') {
return students.find(item => item.id === value)
}
return students.filter(item => item.sex === value)
}

const oneInfo = getStudentInfo(1)
console.log(oneInfo.both)
const arrInfo = getStudentInfo('female')
console.log(arrInfo)

ts方法重载

typescript的方法重载与typescript的函数重载规则是一样的。

方法：是一种特定场景下的函数，由对象变量或者实例变量直接调用的函数都是方法。

使用场景：

  1. ts类中定义的函数就是方法。
  2. 接口内部定义的函数也是方法。
  3. type内部定义的函数是方法。
  4. 函数内部用this定义的函数是方法。
type Point = {
  x: number,
  y: number
}
class Newset {
  constructor(public set: any = new Set()) {}
  add(value: Point): Point
  add(value: Point[]): Point[]
  add(value: any): Point| Point[] {
    if (value instanceof Array) {
      value.forEach(item => {
        this.set.add(item)
      })
      return value
    }
    this.set.add(value)
    return value
  }
  getSize () {
    console.log(this.set.size)
  }
}
const set = new Newset()
console.log(set.add({x: 1, y: 2}))
set.getSize()
console.log(set.add([{x: 2, y: 1}]))
console.log(set, 'set')

构造器重载

TS构造器只允许返回一个值就是this，没有返回值类型。

  • 构造器重载与函数重载的区别
  1. ts构造器的构造签名和实现签名都不需要返回值
  2. 构造器是在创建对象出来之后，但是没有被赋值给对象变量之前执行，一般用来给对象属性赋值。
class BaseConverter {
  constructor (deceNumber: number)
  constructor (deceNumber: number, base: number)
  constructor (public deceNumber: number, public base: number = 2) {}
  baseConverter(): string {
    const stack: Array = [];
    const digits: string = '0123456789ABCDEF';
    let number = this.deceNumber;
    let rem: number;
    let baseString: string = ''
    if (!(this.base >= 2 && this.base <= 16)) {
      return ''
    }
    while (number > 0) {
      rem = Math.floor(number % this.base)
      stack.push(rem)
      number = Math.floor(number / this.base)
    }
    while (!(stack.length === 0)) {
      baseString += digits[stack.pop()]
    }
    return baseString
  }
}
const toBinary = new BaseConverter(10)
const toUniary= new BaseConverter(8, 5)
const toHex= new BaseConverter(8, 16)
console.log(toBinary.baseConverter())
console.log(toUniary.baseConverter())
console.log(toHex.baseConverter())
avatar
文章
阅读
粉丝