{{format('0')}} {{format('334')}} {{format('2619')}}

【TypeScript】泛型 [ 编程杂谈 ]

大数据男孩 文章 正文

想做一个技术博客,奈何实力不够
分享

明妃

{{nature("2022-08-14 17:23:20")}}更新

说明

泛型的使用:当定义类型时(函数、变量、接口、类),只有在使用的时候,才只是具体是什么类型时,就可以使用泛型定义

引入

实现生成 传入指定元素指定长度的数组

function creatArray(value: any, count: number): any[] {
    let arr: any[] = []; // 需要初始化
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(creatArray('XX', 5)) //  ['XX', 'XX', 'XX', 'XX', 'XX']

使用泛型

function creatArray<T>(value: T, count: number): T[] {
    let arr: T[] = []; // 需要初始化
    for (let i = 0; i < count; i++) {
        arr.push(value);
    }
    return arr;
}
console.log(creatArray<number>(22, 5)) // [22, 22, 22, 22, 22]

多个泛型参数的函数

泛型常用字母K、V、T

function creatArray<K, V>(x: K, y: V): [K, V] {
    return [x, y]
}
console.log(creatArray<number, string>(22, 'XX')) // [22, 'XX']

泛型接口

在实现接口时,再 定义类型

// 泛型接口
interface IbaseCRUD<T> {
    data: T[]
    add(t: T): void
    getById(id: number): T

}

class User {
    id?: number; // id 主键
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class UserCRUD implements IbaseCRUD<User> {
    data: User[] = []
    add(user: User): void {
        user = { ...user, id: Date.now() }
        this.data.push(user);
        console.log('save user', user)
    }
    getById(id: number): User {
        return this.data[id]
    }
}
const userCRUD = new UserCRUD()
userCRUD.add(new User('XX', 16))
userCRUD.add(new User('YY', 17))
console.log(userCRUD.getById(1)) // {name: 'YY', age: 17, id: 1646630710525}

泛型类

实例化类时,再定义类型

class User {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class UserCRUD<T>{
    data: T[] = []
    add(user: T): void {
        this.data.push(user);
        console.log('save user', user)
    }
}
const userCRUD = new UserCRUD<User>();
userCRUD.add(new User('XX',16)) // save user User {name: 'XX', age: 16}

泛型 约束

当使用泛型时,函数逻辑中,可能并不知道该类型有这个方法 或 属性,而报错,智能提示也不好

function fn<T>(x: T): void {
    // console.log(x.lenght) // 报错: 类型“T”上不存在属性“lenght”。
}

处理:泛型继承某类、某接口

一个泛型变量只能继承一个 类 或者 接口

    class User {
        constructor(
            public name: string,
            public age: number) { }
    }
    // 泛型 继承 User 类
    function fn<T extends User>(x: T): void {
        console.log(x.name, x.age)
    }

    // 传入符合 这中类型 的值
    fn(new User('XX', 16)) // XX 16
评论 0
0
{{userInfo.data?.nickname}}
{{userInfo.data?.email}}
TOP 2
Spark 2.0 单机模式与集群模式 安装

{{nature('2020-01-02 16:47:07')}} {{format('12641')}}人已阅读

TOP 3
Office 2016 Pro Plus 激活

{{nature('2019-12-11 20:43:10')}} {{format('9527')}}人已阅读

TOP 4
Linux上 MySQL 开启远程登陆的两种方法

{{nature('2019-12-26 17:20:52')}} {{format('7573')}}人已阅读

TOP 5
Linux 安装 MySQL 5.7

{{nature('2019-12-26 16:03:55')}} {{format('5017')}}人已阅读

目录

标签云

Javascript TypeScript

一言

# {{hitokoto.data.from || '来自'}} #
{{hitokoto.data.hitokoto || '内容'}}
作者:{{hitokoto.data.from_who || '作者'}}
自定义UI
配色方案

侧边栏