一 TS中的函数
TS中的函数主要包括以下几个方面：
(1)函数类型
- 使用接口定义函数类型
- 使用类型别名
(2)参数
- 可选参数
- 默认参数
- 剩余参数
(3)重载
1.定义函数类型
//(1)使用类型别名定义函数类型
type Adder = (x:number, y:number) => number
let adder:Adder = (arg1:number ,arg2:number) => arg1+arg2 //let add2:Adder = (arg1 ,arg2) => arg1+arg2 也是可以的
//(2)使用接口定义函数类型
interface Adder1 {
(x:number, y:number) : number
}
let adder1:Adder1 = (arg1:number ,arg2:number) => arg1+arg2
2.函数参数
//(1)可选参数，必须在最后一个参数上
type addFun = (arg1:number,arg2:number,arg3?:number) => number
let add3:addFun = (x:number,y:number, z:number=4) => x+y+z //这里第三个参数用了默认参数
console.log(add3(1,2)) //7
let add6 = (x:number, y:number, z?:number):number => x+y
console.log('add6',add6(1,2)) //3
//(2)默认参数
let add4 = (x:number , y:number=2):number => x+y
console.log(add4(1)) //3
//(3)剩余参数
const add5 =(arg1:number, ...args:number[]) =>{
// ...
}
3.函数重载
function toArray(value:number):number[]
function toArray(value:string):string[]
function toArray(value: number | string) {
if(typeof value === 'string') {
return value.split("")
}else {
return value.toString().split("").map(item => Number(item))
}
}
const r = toArray(123);
二 泛型
- 简单实用
- 泛型变量
- 泛型约束
- 在泛型约束中使用类型参数
先看一个不用泛型的例子：
const getArray = (value:any, times:number=5):any[] => {
return new Array(times).fill(value)
}
console.log(getArray('abc')) //['abc', 'abc', 'abc', 'abc', 'abc']
这里value的类型就是返回的数组的每个数据的类型，如果两边的数据类型需要统一的话，就可以用泛型来解决。
const getArray1 = <T>(value:T, times:number=5):T[] => {
return new Array(times).fill(value)
}
console.log(getArray1<number>(4)) //[4, 4, 4, 4, 4]
// console.log(getArray1<number>('abc')) //报错，传入的参数必须是number类型
其他例子：
//2.多个泛型
const getArray2 = <T, U>(param1:T, param2: U,times: number=5): (T | U)[] =>{
return new Array(times).fill([param1,param2])
}
console.log(getArray2(2,'abc')) //[Array(2), Array(2), Array(2), Array(2), Array(2)] 其中Array(2)里是[2, 'abc']
//3.定义泛型的函数类型
type getArrayFunc = <T>(arg:T, times:number) => T[]
let getArray4:getArrayFunc = (arg:any,times:number) =>{
//这里的arg定义成any即可。
return new Array(times).fill(arg)
}
console.log(getArray4('abc',3))
//4.泛型的继承
interface checkLength {
length: number
}
type getArrayFunc1 = <T extends checkLength>(arg:T, times:number) => T[]
let getArray5:getArrayFunc1 = (arg:any,times:number) =>{
return new Array(times).fill(arg)
}
console.log(getArray5({
length:3},2)) //[{length:3},{length:3}]
const getProps = <T, K extends keyof T>(obj: T, propName: K) => {
return obj[propName]
}
const obj = {
a:'qqq',
b:'www'
}
console.log(getProps(obj,'a')) //qqq