typescript [接口]

92 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情

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

在没有接口类型之前

可以使用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
}

image.png 点击问题修复,实现接口,就会将内容补全

image.png

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')
    }
   
}