TypeScript函数使用方式、函数重载、可调用注解

150 阅读1分钟

函数的定义

基础定义

function say(n1: number, n2: number): string{
    return 'abc'
}

函数表达式定义

let say = function(n1: number, n2: number): string{
    return 'abc'
}

箭头函数定义

let say = (n1: number, n2: number): string=>{
    return 'abc'
}

ts函数调用时,必须符合要求的参数(参数个数和类型),js书写时,并不会检查参数

1.png

函数在ts中的类型定义(函数类型注解)

type Myfun = (n1: number, n2: number) => string
type Myfun1 = () => void

当函数返回值为void时,函数可以直接return、return undefined,也可以不return

函数的重载

函数重载可以限制函数的参数调用,下面的例子,限制了该函数不能使用三个参数

function sum(n1: number):string
function sum(n1: number, n2: number):string
function sum(n1: number, n2: number, n3: number, n4: number):string
function sum(n1: number, n2?: number, n3?: number, n4?: number): string {
    return 'abc'
}

sum(1,2,3) // 报错:没有需要 3 参数的重载,但存在需要 2 或 4 参数的重载。

可调用注解

// 利用可调用注解形式来定义函数的类型,相当于type A = (n: number, m: number)=>any
type A = {
    (n: number, m: number): any
}

function foo(n: number, m: number): any
function foo(n: string, m: string): any
function foo(n: number | string, m: number | string){

}

let a: A = foo

可调用注解定义函数与函数的类型注解相比,由于是对象,所以可以对多个重载进行定义

type A = {
    (n: number, m: number): any
    (n: string, m: string): any
}

function foo(n: number, m: number): any
function foo(n: string, m: string): any
function foo(n: number | string, m: number | string){

}

let a: A = foo

由于函数也是对象,可以利用可调用注解为函数添加属性约束

type A = {
    (n: number): number
    username?: string
}
let a: A = (n:number)=>{
    return 123
}
a.username = 'jack'