Typescript实现接口属性

Question

I have declared interface as below

interface Base {
    required: string;
}

I have implemented interface in class like

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

But I am getting following error

severity: 'Error' message: 'Class 'MyClass' incorrectly implements interface 'Base'. Property 'required' is missing in type 'MyClass'.' at: '5,7' source: 'ts'

severity: 'Error' message: 'Property 'required' does not exist on type 'MyClass'.' at: '7,26' source: 'ts'

if I declare required: string; once again in class then no error

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

That's how interfaces work. If you define a property in the interface then you need to define the same property in the class where you are implementing the interface. If you would like to use required property without re define the property, you should create a class an extend it.

Answer 2

Your error is correct. If your class implements an interface , it must also implement all the required properties and methods . If you want not to implement some properties or methods, you can declare them as optional with ? symbol.

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

Here you can implement the interface and left the 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
    }
}

And not only you can implement interfaces. Also you can use them as a type. If you have an interface

interface Base {
   required: string;
}

you can create an object which is the type of that interface

const obj: Base = { };

But here you will get an error because if your object is of type Base , you need to provide all required properties. So you need to write

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

This will protect your code from logical errors and your code will be strong typed also for object, for which you don't want to create a class, but you want to said what shape it must be.

Example

You have an interface

interface Name {
   name: string
}

and have classes

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')];

here arr is an array of type Name . So if you get arr[0] , and call on it .engine , intelisense will throw an error that there is no engine property in type Name . But you can be sure, that every object in that array has name property, because the type of that array is Name and it has an required property name .

Answer 3

If you don't want to delcare requried: string twice use class instate interface for Base and extends instate implements.

class Base {
    required: string;
}

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

Check it out in the playground .