TypeScrip函数

76 阅读2分钟

函数

封装了一些重复使用的代码,在需要的时候直接调用即可

// 函数声明,命名函数
function add(x: string, y: string): string {
    return x + y
}
const res: string = add("hello","命名函数")

// 函数表达式,匿名函数
const add2 = function(x: string, y: string): string {
    return x + y
}
const res2: string = add2("hello","匿名函数")

完整函数的书写形式

// (x: number, y: number) => number 当前这个函数的类型以及返回类型
const add3: (x: number, y: number) => number = function (x: number, y: number): number {
    return x+y
  }

可选参数和默认参数

  • 可选参数:函数在声明的时候,内部的参数使用了?进行修饰,那么就表示该参数可以传入也可以不用传入
  • 默认参数:函数在声明的时候,内部的参数有自己的默认值,此时的这个参数就可以叫默认参数
const getFullName = function (firstName: string = '东方', lastName?: string): string {
    // 判断名字是否传入了
    if(lastName){
        return firstName + '_' + lastName
    }else{
        return firstName
    }
}

// 什么也不传入
console.log(getFullName())
// 只传入姓氏
console.log(getFullName('诸葛'))
// 传入姓氏和名字
console.log(getFullName('上官','栗子'))

剩余参数

  • 剩余参数是放在函数声明的时候所有的参数的最后
  • 如果想同时操作多个参数,或者并不知道会有多少个参数传递进来就用剩余参数
// ...args:string[] ----> 剩余的参数,放在了一个字符串的数组中,args里面
function showMsg(str: string, str2: string, ...args: string[]) {
    console.log(str) // a
    console.log(str2) // b
    console.log(args) // ['c', 'd', 'e']
}
// 调用
showMsg('a', 'b', 'c', 'd', 'e')

函数重载

函数重载: 函数名相同, 而形参不同的多个函数

// 函数重载声明
function add(x: string, y: string): string
function add(x: number, y: number): number

// 函数声明
function add(x: string | number, y: string | number): string | number {
     if (typeof x === "string" && typeof y === "string") {
          return x + y
     } else if (typeof x === 'number' && typeof y === 'number') {
          return x + y
     }
}