Skip to content
此页目录
本文总阅读量

TypeScript 函数

ts
const fn = (str:string,num:number):void =>{} // :void 没有返回值
fn('a',1)
fn('a') // 报错,必须传同等数量的参数
  • 可选参数与剩余参数
ts
const fn = (str: string = '默认参数', num?: number, ...arr:number[]):void => {
  // num?: number 为可选参数
  // ...arr:number[] 剩余参数为 number 类型的数组
}

函数重载

ts
// 这里是声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为下边有具体的实现,所以不需要添加 declare

// 这里是实现
function add (arg1: string | number, arg2: string | number) {
  // 这里要实现上面的声明,要么都是 string,要么都是 number
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

应用

ts
interface UserInfo{
  name: string;
  age: number;
}
declare function ts(params: UserInfo | number,flag?: boolean): number;
  • 假设传入第一个参数 UserInfo 时不能传 flag
  • 传入第一个参数为 number 时,需要传入 flag
ts
ts({name: 'aa',age: 18}) // 正常
ts(18,true) // 正常
ts({name: 'aa',age: 18},true) // 正常,但不是预期想要的

可以使用函数重载实现:

ts
interface UserInfo{
  name: string;
  age: number;
}

declare function ts(params: UserInfo): number;
declare function ts(params: number,flag: boolean): number;

ts({name: 'tom',age: 18}) // 正常
ts(18,true) // 正常
ts(18) // 错误
ts({name: 'tom',age: 18},true) // 错误

在 class 中使用:

ts
interface UserInfo{
  name: string;
  age: number;
}

class Test {
  /* 注释1 */
  public ts(params: UserInfo): number;
  /* 注释2 */
  public ts(params: number,flag: boolean): number;
  /* 具体实现 */
  public ts(params: UserInfo | number,flag?: boolean):number{
    return 12
  }
}
/* 使用 */
const test = new Test()
test.ts({name:'tom',age:12}) // ok
test.ts(45,true) // ok
test.ts(45) // error
test.ts({name:'tom',age:12},true) // error

评论

交流群