typescript [接口]

用户4793865

发布于 2023-01-12 13:56:48

3380

发布于 2023-01-12 13:56:48

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

描述一个对象的类型我们怎么写？

在没有接口类型之前

可以使用type声明,type也就是我们自定义的一个类型。

如type str=string就是自定义一个str类型(将字符串类型赋给了它)，

下面的代码是自定义一个对象类型，属性包括字符串的name、数值型的number、和其它任意值

type myObjType = {
    name:string,
    age:number,
    [propname:string] :any
}

然后使用这个数据类型

const info:myObjType = {
   name:'xiaoli',
   age:32
}

使用接口

接口则使用 interface关键字。用来定义一个类结构，用来定义一个类中包含哪些属性和方法。同时接口也可以当成类型声明使用。

interface myInterface {
    name:string,
    age:number
}

使用这个接口，如果obj这个对象，缺少属性或者多了属性都会报错。

const obj:myInterface = {
    name:'sss',
    age:11
}

接口可以重复声明

重复声明了接口myInterface。它并不会报错，而会是两个的结合。

interface myInterface {
    name:string,
    age:number
}

interface myInterface{
    gender:string
}

当再使用这个类型时，就需要传三个属性。

const objjj:myInterface={
    name:'ssss',
    age:12,
    gender:'1111'
}

接口可以在定义类的时候去限制类的结构。并且所有属性都不能有实际值。接口定义对象的解构，而不考虑实际值。在接口中的所有方法都是抽象方法。

interface myInter{
    name:string,
    sayHello():void
}

定义类

定义类时，可以使类去实现一个接口。就是使类满足接口的要求。如下定义一个类MyClass实现接口myInterface，鼠标悬停到上面可以看到提示缺少如下属性。

interface myInterface{
    name:string,
    render():void
}

点击问题修复，实现接口，就会将内容补全

class MyClass implements myInterface{
    name: string;
    render(){
        console.log('111')
    }
   
}

然后还是会有错，因为属性没有初始化。

class MyClass implements myInterface{
    name: string;
    constructor(name:string){
        this.name =name
    }
    render(){
        console.log('111')
    }
   
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-17，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度