Typescript实现接口属性

Question

我已经声明接口如下

interface Base {
    required: string;
}

我已经在类中实现了接口

class MyClass implements Base{
    method(): void {
        console.log(this.required);
    }
}

但我收到以下错误

严重性：'错误'消息：'类'MyClass'错误地实现了接口'Base'。 类型“ MyClass”中缺少属性“ required”。 来源：“ 5,7”来源：“ ts”

严重性：“错误”消息：类型“ MyClass”上不存在“必需的属性”。 来源：“ 7,26”；来源：“ ts”

如果我声明required: string; 再次上课，然后没有错误

interface Base {
    required: string;
}

class MyClass implements Base{
 required: string;

    method(): void {
      this.required="ddd";
        console.log(this.required);
        // you can access HTMLElement
    }
}

var ss=new MyClass();
ss.method();

Answer 1

接口就是这样工作的。 如果在接口中定义属性，则需要在实现接口的类中定义相同的属性。 如果您想使用必需的属性而不重新定义该属性，则应创建一个扩展它的类。

Answer 2

您的错误是正确的。 如果您的class实现了interface ，则它还必须实现所有必需的属性和方法 。 如果不想实现某些属性或方法，可以使用?它们声明为optional属性? 符号。

interface Base {
    required: string;
    someProperty?: string; // << look at the symbol `?` in the end of the property
}

在这里，您可以实现接口并保留someProperty

class MyClass implements Base{
    required: string;
    // someProperty is missing here, because it is optional     

    method(): void {
      this.required="ddd";
        console.log(this.required);
        // you can access HTMLElement
    }
}

而且不仅可以实现接口。 您也可以将它们用作类型。 如果有界面

interface Base {
   required: string;
}

您可以创建一个对象，该对象是该接口的类型

const obj: Base = { };

但是这里会出现错误，因为如果您的对象属于Base类型，则需要提供所有必需的属性。 所以你需要写

const obj: Base = { required: 'Yes' };

这样可以保护您的代码免受逻辑错误的侵害，并且您也可以为对象创建强类型的代码，而您不想为其创建类，但是您想要说出它必须是什么shape 。

例

你有一个界面

interface Name {
   name: string
}

并上课

class Car implements Name {
    name: string;
    engine: string
    constructor(name: string, engine: string){
       this.name = name;
       this.engine = engine;
    }
}

class Person implements Name {
    name: string;
    surname: string;

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

var arr: Name = [new Car('Car', 'JZ'), new Person('Name', 'Surname')];

这里arr是Name类型的数组。 因此，如果您获得arr[0]并对其调用.engine ，则intelisense将引发错误，表明Name类型没有engine属性。 但是您可以确定，该数组中的每个对象都具有name属性，因为该数组的类型为Name ，并且具有必需的属性name 。

Answer 3

如果您不希望delcare要求requried: string两次对Base使用class instate interface并扩展instate实现。

class Base {
    required: string;
}

class MyClass extends Base{
    method(): void {
      this.required="ddd";
        console.log(this.required);
        // you can access HTMLElement
    }
}

在操场上检查一下。