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

在操場上檢查一下。