TypeScript/TS入门学习2

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

泛型基本使用

1. 泛型的基本使用

• 泛型可以理解为宽泛的类型，通常用于类和构造函数，使用的时候我们再指定类型
• 泛型不仅可以让我们的代码变得更加健壮，还能让我们的代码变得灵活增加可重用性
• 通常是通过用 来表示，放在参数前面

不使用泛型，下面value是number类型，但是当我们想设置value类型时显然这个类型不合理

let getArray = (value: number, items: number): number[] => {
    return new Array(items).fill(value);
}

getArray(1, 3)
getArray('爱你', 3)

的确我们的目标如下，让调用时允许传入string和number就行了，但是这个里存在一个问题，因为该死的ts不知道你返回的是一个number[]还是一个string[],所以后面使用时，就相当不友好了

let getArray = (value: number | string, items: number): (number | string)[] => {
    return new Array(items).fill(value);
}

getArray(1, 3)
getArray('爱你', 3)

下面代码预期是可以正常执行的，但是结果差强人意，直接报错。会提示number|string Property 'toFiexd' does not exist on type 'string | number'. 和 Property 'length' does not exist on type 'string | number'.

    let getArray = (value: number | string, items: number): (number | string)[] => {
    return new Array(items).fill(value);
}

let arr1 = getArray(1, 3);
let arr2 = getArray('爱你', 3);
arr1.map(item => {
    console.log(item.toFixed())
})
arr2.map(item => {
    console.log(item.length);
})

当然可以将string|number改成 any,代码不报错了，正常了，但是，但是， 如果尝试读sting的toFixed方法报错，但是编辑器并没有提示，尝试读数字的length也读不到，也没有提示

let getArray = (value: any, items: number): any[] => {
    return new Array(items).fill(value);
}

let arr1 = getArray(1, 3);
let arr2 = getArray('爱你', 3);
arr1.map(item => {
    console.log(item.toFixed())
})
arr2.map(item => {
    console.log(item.length);
})

此时，必须要让泛型出场了，定义成泛型后，就可以正确推倒出返回值的类型。然后遍历时，读取item的属性的时候，就能精准的知道是否有错误，是否正常

    
let getArray = <T>(value: T, items: number): T[] => {
    return new Array(items).fill(value);
}

let arr1 = getArray<number>(1, 3);
let arr2 = getArray<string>('爱你', 3);
arr1.map(item => {
    console.log(item.length)
})
arr2.map(item => {
    console.log(item.length);
})