函数

type和interface分别用来定义函数

type GetUserNameType = (firstName: string, lastName: string) => string //type关键字用来定义一个类型
  const getUser2: GetUserNameType = (firstName, lastName) => {
    return firstName
  }

  interface IGetUserNameFunc {
    (firstName: string, lastName: string): string
  }
  const getUser3: IGetUserNameFunc = (firstName, lastName) => {
    return firstName + lastName
  }

 剩余参数

  //剩余参数
  interface ISumFunc {
    (...args: Array<number>): number
  }
  const sum: ISumFunc = (...args) => {
    return args.reduce((prev, next) => prev + next)
  }


  type SumType = (...args: Array<number>) => number
  const sum1: SumType = (...args) => {
    return args.reduce((prev, next) => prev + next)
  }

函数重载

函数名一样 函数参数类型或者个数不同。

 函数重载(overload)是为同一个函数提供多种类型定义保证多种传参调用方式。

重写（overwrite）子类重写继承自来自父类的方法

// 通用的函数重载形式
  function addtion(a: string, b: string): string
  function addtion(a: number, b: number): number
  function addtion(a: number | string, b: number | string): number | string {
    if (typeof a === 'number' && typeof b === 'number') return a + b
    if (typeof a === 'string' && typeof b === 'string') return a + b
  }

  //type定义函数重载 注意这个时候type 就不能是箭头函数的形式 type Addtion1Type=(a: string, b: string)=> string
  type Addtion1Type = {
    (a: string, b: string): string
    (a: number, b: number): number
  }
  const addtion1: Addtion1Type = (a, b) => {
    return a + b
  }
  
  //interface 接口实现函数重载
  interface IAddtionFunc {
    (a: string, b: string): string
    (a: number, b: number): number
    (a: boolean, b: boolean): boolean
  }
  const addtion2: IAddtionFunc = (a, b) => a + b

函数重载的例子

interface IPadding {
    top: number;
    right?: number;
    bottom?: number;
    left?: number;
  }
  type PaddingType ={ //定义3种调用方法函数重载  这里用接口也可以
    (a: number, b: number, c: number, d: number): IPadding
    (a: number, b: number): IPadding
    (a: number): IPadding
  }
  const padding: PaddingType = (a: number, b?: number, c?: number, d?: number) => {

    let resPadding: IPadding = { //需要返回对象 所以我提前定义对象接口
      top: 0,
      right: 0,
      bottom: 0,
      left: 0

    }
    // 只传一个参数a
    if (b === undefined && c === undefined && d === undefined) {
      resPadding.top = resPadding.right = resPadding.bottom = resPadding.left = a
    }
    //只传递2个参数
    else if (c === undefined && d === undefined) {
      resPadding.top = resPadding.bottom = a
      resPadding.right = resPadding.left = b
    }
    //传递4个参数
    else {
      resPadding.top = a
      resPadding.right = b
      resPadding.bottom = c
      resPadding.left = d
    }
    return resPadding
  }

用泛型实现：初级版本。好的做法还没想到

 interface IPadding<T> {
    top: T
    right: T
    bottom: T
    left: T
  }
  interface IPaddingFunc1 { //泛型也可以给备选默认值
    <T>(top: T): IPadding<T> //把T当作参数又往IPadding里面传递 妙
    <T>(top: T, right: T): IPadding<T>
    <T>(top: T, right: T, bottom: T, left: T): IPadding<T>
  }

  const padding: IPaddingFunc1 = (...args) => {

    let res = <IPadding<string | number>>{}  //暂时给any类型  as 也可以 let res = {} as IPadding<any>
    const length: number = args.length
    if (length === 1) {
      res.top = res.right = res.bottom = res.left = args[0]
    }
    else if (args.length === 2) {
      res.top = res.bottom = args[0]
      res.left = res.right = args[1]
    }
    else if (args.length === 4) {
      res.top = args[0]
      res.right = args[1]
      res.bottom = args[2]
      res.left = args[3]
    }


    return res
  }
  console.log(padding(10, 20));
  console.log(padding('10px', '20px', '30px', '40px'));
  // console.log(padding(100, '20px')); 不能混合传