TypeScript（四）：TypeScript泛型编程

TypeScript泛型编程

认识泛型

• TS的泛型编程，主要是将类型也参数化
• 在先前的文章中，我们定义一个函数，其参数的类型以及返回类型是固定的
• 但是这种函数的复用性不是很大
• 因此在TS中提供了一种泛型编程的方式

//<Type>就是传递类型的地方
function test<Type>(payload: Type) { 
    return payload
}
test<number>(1)
test<string>("123")

• 支持传入多个类型

function test<Type,Eleme>(payload: Type) { 
    return payload
}

泛型接口

• 指的是在定义接口的时候，我们也可以让让类型是动态传入的

//同时可以给个初始值
interface IPerson<Type,Eleme = string> {
    name: Type,
    age:Eleme
}

//第二个不传的时候，使用默认值
const p1: IPerson<string> = {
    name: "zhangcheng",
    age:"18"
}

const p2: IPerson<string, number> = {
    name: "lisi",
    age:18
}

泛型类

• 在定义一个类的时候，其内部属性的类型也可以动态的传入

class Person<Type>{
    constructor(public name: Type) {
        this.name = name
    }
}

//可以自动地进行类型推断
let p1 = new Person("zhangcheng")
let p2 = new Person<number>(123)

泛型约束

• 对于动态地传入类型，我们也可以让该类型带有一些约束
• 比如传入地参数，必须具备某种属性

interface ILength {
    length:number
}

//传入地参数中必须具备length属性
//同时Type会记录传入参数地类型
function test<Type extends ILength>(arg:Type) {
    return arg.length
}

test<number[]>([1, 2, 3])
test("123")
test({length:123})

• 使用对象中的key进行约束
  • 使用keyof

function test<Type, Key extends keyof Type>(info: Type, key: Key) {
    
}

const info = {
    name: "zhangcheng",
    age:18
}

//报错, 会自动进行类型推导
test(info, "height")
//只能选用info中的属性 
test(info,"name")

映射类型（Mapped Types）

• 通常是定义好一个类型之后，用于拷贝已创建好的类型

interface IPerson{
    name: string,
    age:number
}

type PersonType<Type> = {
    [key in keyof Type]: Type[key]
    //若传入的是IPerson则相当于
    /**
     * name:string
     * age:number
     */
}

//创建一个新的类型，拷贝与IPreson
type NewPerson = PersonType<IPerson>

映射类型修饰符

• 当我们在对一种类型做映射的时候，是可以在映射的过程中添加修饰符的
• ？可选修饰符
• readonly只读修饰符

interface IPerson{
    name: string,
    age:number
}

type PersonType<Type> = {
    readonly [key in keyof Type]?: Type[key]
    //若传入的是IPerson则相当于
    /**
     * name:string
     * age:number
     */
}

//创建一个新的类型，拷贝与IPreson
type NewPerson = PersonType<IPerson>

修饰符的符号

• 上面我们知道，可以给映射类型增加修饰符
• 而我们可以给修饰符增加响应的符号
• +默认，代表启用
• -删除

interface IPerson{
    readonly name: string,
    age?:number
}

//映射成，每一个属性都是可编辑且都是必填的
//会把映射前的属性修饰符去掉
type PersonType<Type> = {
    -readonly [key in keyof Type]-?: Type[key]
}

//创建一个新的类型，拷贝与IPreson
type NewPerson = PersonType<IPerson>