Typscript實現接口屬性

我已經宣佈界面如下Typscript實現接口屬性

interface Base { 
    required: string; 
}

我已經實現的接口類像

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

    } 

}

但我得到以下錯誤

嚴重性：「錯誤'message：'Class'MyClass'錯誤地實現了接口'Base'的。「MyClass」類型中缺少屬性'required'。'' at：'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();

有人可以幫我解決這個問題

來源

2017-02-11 iCoders

在JavaScript中沒有任何接口，如果您從接口實現類，則需要提供所有必填字段。 –

那怎麼接口工作。如果你在接口中定義一個屬性，那麼你需要在你實現接口的類中定義相同的屬性。如果您想使用必需的屬性而不重新定義屬性，則應該創建一個類並對其進行擴展。

來源

2017-02-11 07:03:39

謝謝@AndrésAndrade.but它看起來沒有用處聲明屬性在接口 – iCoders

您的錯誤是正確的。如果您的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會拋出engine類型爲Name的屬性的錯誤。但是可以肯定的是，該數組中的每個對象都具有name屬性，因爲該數組的類型爲Name，並且它具有所需的屬性name。

來源

2017-02-11 07:03:42

謝謝@ Suren Srapyan.but它看起來沒有用處聲明屬性在接口 – iCoders

爲什麼沒有用？您可以在代碼中使用類型檢測。考慮你有很多類實現了一個接口，所以你可以賦值給接口類型，以確保對象至少具有接口 –

@ Suren中的屬性。如果你不介意你能給我更好的示例來證明這一點。謝謝 – iCoders

如果您不想delcare requried: string兩次使用class instate interface爲Base並擴展instate實現。

class Base { 
    required: string; 
} 

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

在playground查看。

來源

2017-02-11 07:05:54 Magu

謝謝@ Magu.but它看起來沒有用處聲明屬性在界面 – iCoders

Typscript實現接口屬性

回答

相關問題