首页 前端知识 Typescript泛型与implements子句

Typescript泛型与implements子句

2024-06-16 09:06:56 前端知识 前端哥 268 305 我要收藏

 一、泛型的基本使用

与extends的区别

  • 泛型可以理解为宽泛的类型,通常用于类和函数。使用的时候我们再指定类型

  • 泛型不仅可以让我们的代码变得克加健壮,还能让我们的代;码在变得键壮的r时保持灵活性和可五用性通过用

  • <T>来表示,放在参数的前面

    export default {}
    
    let getArray = <T>(value: T, items: number): T[] => {
        return new Array(items).fill(value)
    }
    let res1 = getArray<string>("饕餮", 98)
    let res2 = getArray<number>(69, 96)
    console.log(res1);
    console.log(res2);

    二、泛型约束

    在TS中,我们需要严格的设置各种类型,我们使用泛型之后,将会变得更加灵活,但同时也将会存在一些问题我们需要对泛型进行约束来解决这些问题

    export default {}
    
    interface ILength {
        length: number
    }
    function getLength<T extends ILength>(arr: T): number {
        return arr.length
    }
    getLength([1, 2, 3, 4]);
    getLength(["成果", "诸葛大力"]);
    getLength("成果")
    console.log(getLength([1, 2, 3, 4]));
    console.log(getLength(["成果", "诸葛大力"]));
    console.log(getLength("成果"));
    

    三、泛型接口

  • 将泛型与接口结合起来使用,可以大大简化我们的代码,增加我们的代码可读性

  • 泛型也可以使用默认值

    export default {}
    interface IPerson<T1 = string, T2 = string> {
        name: T1
        sex: T2
    }
    let p0: IPerson = {
        name: "成果",
        sex: "女"
    }
    console.log(p0);

    四、泛型类

    泛型类看上去与泛型接口差不多。泛型类使用(<>)括起泛型类型,跟在类名后面。

    export default {}
    
    class Person<T1, T2>{
        name: T1
        age: T2
        sex: T1
        constructor(name: T1, age: T2, sex: T1) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
    }
    let p = new Person<string, number>("成果", 18, "女")
    console.log(p);
    

    implements子句

  • 类可以实现接口,使用关键字implements

  • 可以使用一个implements子句来检查一个类,是否满足了一个特定的接口。如果一个类不能正确地实现它,就会发出一个错误

    注意点:

    实现一个带有可选属性的接口并不能创建该属性 只要一个接口继承了某个类,那么就会继承这个类中所有的属性和方法;但是只会继承属性和方法的声明,不会继承属―性和方法实现

  • extends:继承某个类,继承之后可以使用父类的方法,也可以重写父类的方法

  • implements:继承某个类,必须重写才可以使用

    export default {}
    interface IPersonInfo {
        name: string;
        age: number;
        sex?: string;
        show(): void;
    }
    interface IMusic {
        music: string
    }
    class person implements IPersonInfo, IMusic {
        name: string = "成果";
        age: number = 27;
        sex: string = "女"
        music: string = "我不会唱歌"
        show() {
            console.log(`我是${this.name},年龄${this.age}岁,我主演了爱情公寓5`);
        }
    }
    let p = new person();
    p.show()
    //p.sex = "女"//报错
    
    // 注意点:只要一个接口继承了某个类,那么就会继承这个类中所有的属性
    // 和方法但是只会继承属性和方法的声明,不会继承属性和方法实现
    interface ITest extends person {
        name: string
    }
    class Star extends person implements ITest {
        name: string = "成果"
        age: number = 25
        salary: number = 1000000
    }
    let s = new Star();
    console.log(s.name);
    console.log(s.age);
    console.log(s.salary);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12348.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!