TS语法三 函数和泛型_ts 函数参数泛型

一 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
1
2
3
4
5
6
7
8

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[]) =>{
    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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);
1
2
3
4
5
6
7
8
9
10

二 泛型

• 简单实用
• 泛型变量
• 泛型约束
• 在泛型约束中使用类型参数

先看一个不用泛型的例子：

const getArray = (value:any, times:number=5):any[] => {
    return new Array(times).fill(value)
}

console.log(getArray('abc')) //['abc', 'abc', 'abc', 'abc', 'abc']
1
2
3
4
5

这里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类型
1
2
3
4
5
6

其他例子：

//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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34