函数扩展
1.函数定义类型和返回值 | 箭头函数定义类型和返回值
typescript
function add(a: number, b: string): string {
return a + b
}
// 🚀 ~ file: index.ts:8 ~ add ~ add: 1rarrot
console.log("🚀 ~ file: index.ts:8 ~ add ~ add:", add(1, 'rarrot'))
const add2 = (a: number, b: string): string => {
return a + b
}
// 🚀 ~ file: index.ts:15 ~ add2 ~ add2: 1rarrot
console.log("🚀 ~ file: index.ts:15 ~ add2 ~ add2:", add2(1, 'rarrot'))
2.函数默认的参数 | 函数可选参数
typescript
// 给a和b进行赋值,也就有了默认参数
function add3(a: number = 10, b: number = 240): number {
return a + b
}
// 🚀 ~ file: index.ts:8 ~ add ~ add3: 250
console.log("🚀 ~ file: index.ts:8 ~ add ~ add3:", add3())
// 可选参数
function add4(a?: number, b?: number): number {
// 注意严格模式下以下会报错
return a + b
}
// 🚀 ~ file: index.ts:8 ~ add ~ add3: 250
console.log("🚀 ~ file: index.ts:8 ~ add ~ add4:", add4(10,240))
3.参数是一个对象如何定义
typescript
interface User {
name: string
age: number
}
function add5(User: User): User {
return User
}
// { name: 'rarrot', age: 66 }
console.log(add5({ name: 'rarrot', age: 66 }))
4.函数this类型
typescript
interface Obj {
user: number[]
add: (this: Obj, num: number) => void
}
// ts可以定义this的类型,在js中无法使用 必须是第一个参数定义this的类型
let obj: Obj = {
// obj对象的类型为Obj,对user进行赋值
user: [1, 2, 3],
add(this: Obj, num: number) {
// 以上将this类型设为Obj,所以可以使用this.user调用同类型的obj对象的user属性
// num为传入的参数
this.user.push(num)
}
}
obj.add(5)
console.log(obj)//{ user: [ 1, 2, 3, 5 ], add: [Function: add] }
5.函数重载
问:在以下示例代码中,其实使用最后一个函数即可完成一样的效果,那为什么要使用重载的方式呢?
答:
当你在使用函数重载时,将不同类型或数量的参数分别定义为不同的函数签名,可以使函数的使用者更清楚地了解函数的使用方式和期望的参数类型。这样可以减少对文档的依赖,并提高代码的可读性。
此外,使用函数重载还可以帮助你在编译时捕获类型错误。如果你使用可选参数的方式实现这个功能,那么你可能会在运行时才发现类型错误,这是不可取的。使用函数重载可以在编译时就捕获类型错误,从而提高代码的可靠性。
所以使用函数重载的优点在于能够更清晰地表达函数的意图,提高代码的可读性、可维护性和可维护性。
typescript
let user: number[] = [1, 2, 3]
//如果传的是一个number类型的数组那就做添加
function findNum(add: number[]): number[]
//如果传入了id就是单个查询
function findNum(id: number): number[]
//如果没有传入东西就是查询全部
function findNum(): number[]
// 函数实现
function findNum(ids?: number | number[]): number[]{
if(typeof ids=='number'){
return user.filter(v=>v==ids)
}else if(Array.isArray(ids)){
user.push(...ids)
return user
}else{
return user
}
}
console.log(findNum([4,5,6]))
console.log(findNum(1))
console.log(findNum())