ts - 泛型

泛型的基本使用

// 泛型的基本使用

// 使用泛型创建一个函数
function id<Type>(value: Type): Type {
    return value
}

const num = id<number>(10)
const str = id<string>('a')
const boolean = id<boolean>(false)

简化泛型函数调用

// 简化泛型函数调用

// 使用泛型创建一个函数
function id<Type>(value: Type): Type {
    return value
}

// const num = id<number>(10)
// const str = id<string>('a')
// const boolean = id<boolean>(false)


// 这种写法是字面量类型，对功能没影响
const num = id(10)
const str = id('a')
const boolean = id(false)

泛型约束

// 泛型约束

// 使用泛型创建一个函数
function id<Type>(value: Type[]):Type[] {
    console.log(value.length); // 增加[]后可以访问length属性
    return value
}


// 泛型约束（extends添加约束）
interface ILength {
    length: number
}
function id<Type extends ILength>(value: Type):Type {
    console.log(value.length); // 增加[]后可以访问length属性
    return value
}
id([1])
id('1')
id({length: 1, name: 'jack'})

多个泛型变量的情况

// 多个泛型变量的情况
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    return obj[key]
}

getProp({ name: 'jack', age: 18 }, 'age')
getProp({ name: 'jack', age: 18 }, 'name')
getProp(18, 'toFixed')
getProp('abc', 1) // 1表示索引
getProp(['a'], 'length')
getProp(['a'], 1000)

泛型接口

// 泛型接口

interface IdFunc<Type> {
    id: (value: Type) => Type
    ids: () => Type[]
}

let obj: IdFunc<number> = {
    id(value) {
        return value
    },
    ids() {
        return [1, 2, 3]
    }
}

const strs = ['a', 'b', 'c']
strs.forEach(item => { }) // item类型是string[]
const nums = [1, 2, 3]
nums.forEach(item => { }) // item类型是number[]

泛型类

// 泛型类
interface IState {
    count: number
}

interface IProps {
    maxLength: number
}

class GenericNumber<NumType> {
    defaultValue: NumType
    add: (x: NumType, y: NumType) => NumType

    constructor(value: NumType) {
        this.defaultValue = value
    }
}

const myNum = new GenericNumber<number>(10);

泛型工具类型（Partial, Readonly, Pick, Record）

// 泛型工具类型（Partial, Readonly, Pick, Record）

// 1. Partial
interface Props {
    id: string
    children: number[]
}

type PartialProps = Partial<Props>

let p1: Props = {
    id: '',
    children: [1]
}

// 所有属性都是可选的
let p2: PartialProps = {

}





// 2. Readonly
type ReadOnlyProps = Readonly<Props>

let s1: ReadOnlyProps = {
    id: '1',
    children: [1]
}
s1.id = '2' // 报错，只读属性不能赋值


// 3. Pick
interface NewProps {
    id: string
    title: string
    children: number[]
}

// 获取对象的属性
type PickProps = Pick<NewProps, 'id' | 'title' | 'children'>



// 4. Record
type RecordObj = Record<'a' | 'b' | 'c', string[]>
let obj: RecordObj = {
    a: ['1'],
    b: ['2'],
    c: ['3']
}

索引签名类型（使用场景：无法确定对象中有哪些属性）

// 索引签名类型（使用场景：无法确定对象中有哪些属性）

interface AnyObject {
    [key: string]: number // 单词key自定义，哪个单词都行
}
let obj: AnyObject = {
    a: 1,
    b: 222
}
// --

const arr = [1, 2, 3]
arr.forEach(item => { })

interface MyArray<Type> {
    [n: number]: Type
}
let arr1: MyArray<number> = [1, 2, 3]
arr1[0]

映射类型（keyof）

// 映射类型（keyof）

type PropKeys = 'x' | 'y' | 'z'
// 这样写麻烦
type Type1 = { x: number, y: number, z: number }
// 可以简写成这样
type Type2 = {[Key in PropKeys]: number}


// 错误演示
// interface Type3 {
//     [Key in PropKeys]: number
// }
// ------------------------------------------------------------------------



type Props = {a: number, b: string, c: boolean}

// keyof， a b c类型都变成number了
type Type3 = {[key in keyof Props]: number}

// 映射类型（Partial）
// Partial， a b c类型不变且类型增加或者为undefined
type Type4 = Partial<Props>