玩转 TypeScript：函数与泛型的精妙应用

函数

基本使用

// 定义一个变量，接收的值一个函数类型的变量
let add: (num1: number, num2: number) => number

add = (num1: number, num2: number): number => num1 + num2

// 函数的返回值类型不写也是可以的
// 其会自动根据返回的结果去进行类型推测
add = (num1: number, num2: number) => num1 + num2

// 类型别名
type Add = (num1: number, num2: number) => number
const add: Add = (num1: number, num2: number) => num1 + num2

可选参数

// 可选参数
// 在TS中，可选参数必须存放在最后一个
type addFunc = (num1: number, num2: number, num3?: number) => number

let add: addFunc = (num1: number, num2: number) => num1 + num2

add = (num1: number, num2: number, num3: number) => num1 + num2 + num3

缺省参数

// 缺省参数

// Error: 缺省参数是在函数定义的时候进行传递的
// 不是在函数类型声明的时候进行定义的
// type addFunc = (num1:number, num2:number = 3) => number

// 设置缺省参数
let add = (num1: number, num2: number = 3) => num1 + num2

// 设置了缺省参数以后，就不需要在给缺省参数设置类型了
// ts会自动根据传递的默认值的类型，去推断缺省参数的类型
add = (num1: number, num2 = 3) => num1 + num2

函数重载

// 函数重载是在函数类定义的时候可以定义多个函数同名的类型
// 根据函数参数类型的不同来自动对函数的返回值进行判断和校验

// 这里就是重载(函数重载 只能使用function的方式 声明函数)
// 函数参数类型不同引起的重载
function fun(arg: string): string[]
function fun(arg: number): number 

// 实际声明
function fun(arg: string | number): string[] | number {
    if (typeof arg === 'string') return arg.split('')
    return arg * 2
}

console.log(fun('Klaus')) // => ['K', 'l', 'a', 'u', 's']
console.log(fun(2)) // => 4

// ---------------------------------------------------------

// 参数个数不同 而形成的函数重载
function fun(arg: number, arg1: number): number
function fun(arg: number): number 

// 实际声明
function fun(arg: number, arg1?: number): number {
    if (arg1) return arg + arg1
    return arg * 2
}

console.log(fun(2, 3)) // => 5
console.log(fun(2)) // => 4

// --------------------------------------------------------
// 参数个数不同 而形成的函数重载
function fun(arg: string, arg1: number): string
function fun(arg: number, arg1: string): string 

// 实际声明
function fun(arg: number | string, arg1: number | string): string {
    return `${arg} - ${arg1}`
}

console.log(fun(2, 'Klaus')) // => 2 - Klaus
console.log(fun('Klaus', 2)) // => Klaus - 2

//-----------------------------------------------------------------
// 参数个数不同 而形成的函数重载
function fun(arg: number): string
function fun(arg: number): number 

// 实际声明
function fun(arg: number): number | string {
    return arg % 2 === 0 ? '偶数': arg + 1 
}

console.log(fun(2)) // => 偶数
console.log(fun(3)) // => 4

泛型

// 泛型就是一种特殊的变量
// 这个变量是专门用来存放数据类型的

// 这里的T 就是 泛型变量 其代表的是一个专门用于存放数据类型的变量
// T只是一个形参，参数名任意
// 泛型参数 一般为大写
// 泛型参数 使用T的居多 Type的首字母
function getArray<T>(arg: T, num: number = 5): T[] {
   // fill方法，使用fill的参数对数组中的每一个元素进行填充  
   return new Array(num).fill(arg) 
}


// 在使用的使用 在函数名的后边传入对应的参数即可
console.log(getArray<number>(3)) // => [3, 3, 3, 3, 3]
console.log(getArray<string>('Klaus', 2)) // => ['Klaus', 'Klaus']

// 如果在函数名后没有传入参数名，ts会自动根据你传入的参数去推测出你的T具体指代的是哪一个数据类型
// console.log(getArray(3).map(v => v.length)) // -> Error 因为number类型的数据没有length属性

// 如果使用函数表达式去进行泛型声明的时候，其是位于等号的右边的
const getArray = <T>(arg: T, num: number = 5): T[] {
   return new Array(num).fill(arg) 
}

// 使用2个泛型

// 该函数的返回值类型是 元祖组成的数据
// 注意返回值写成 Array<[T, U]> 而不是 [T, U][]
function getTupleArray<T, U>(num:number, param1: T, param2: U): Array<[T, U]> { 
    return new Array(num).fill([param1, param2])
}

console.log(getTupleArray(3, 23, 'Klaus'))

// 使用泛型来约束函数
let getArr: <T>(arg: T, num: number) => T[]

// 虽然这里的arg的类型是anyany
// 但是之前在这样使用了泛型
// 也就是说传入了什么类型，其T也就自动对应了什么类型
getArr = (arg: any, num: number) => { 
    return new Array(num).fill(arg)
}

// 这里any传入的是number, 此时T === number
console.log(getArr(5, 3)) // => [5, 5, 5]

// 这里any传入的是string, 此时T === string
console.log(getArr('Klaus', 2)) // => ['Klaus', 'Klaus']

// 在别名中使用泛型
type Add = <T>(num: T) => T[]

// 在接口中使用泛型
// 方式1:
interface Add { 
    <T>(num: T) : T[] // 只有这一行可以使用泛型
}

// 方式2
// 方式2： 在整个接口中都可以使用泛型
interface Add<T> { 
    (num: T): T[],
    arr: T
}

泛型约束

// 泛型约束
// 对泛型变量的条件限制

// 限制传给泛型的变量必须有length属性
// 即数组,字符串,和自己定义的含有length的对象

interface WithLength{ 
    length: number
}

// 只要将泛型变量继承自对应的数据类型，即可对泛型进行一定的约束
const getArray = <T extends WithLength>(arg: T, num: number = 5): T[] {
   return new Array(num).fill(arg) 
}

// console.log(getArray(3, 3)) // -> Error
console.log(getArray('Klaus', 3)) // -> Success
console.log(getArray([1,2], 3)) // -> Success
console.log(getArray({
    length: 23
}, 3)) // -> Success

// 设定一个泛型只能是一个对象中的对应属性
const getKey = <T, K extends keyof T>(obj: T, key: K) => { 
    return obj[key]
}

const obj = {
    a: 'a',
    b: 'b'
}

console.log(getKey(obj, 'a')) // -> success
console.log(getKey(obj, 'c')) // -> error