打字稿实现接口属性

Question

我已经声明接口如下

interface Base {
    required: string;
}

我已经在类中实现了接口

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

但我收到以下错误

严重性：'错误'消息：'类'MyClass'错误地实现 界面'基地'。 “MyClass”类型中缺少属性“必需”。 在：'5,7' 来源：'ts'

严重性：“错误”消息：“类型”上不存在“所需属性” '我的课'。'在：'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

如果您不想重复使用 requried: string 两次，请使用 class instate interface for Base 并扩展 instate 工具。

class Base {
    required: string;
}

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

在playground 中查看。