如何在TypeScript?中實現接口的類
使用 implements
子句在類中實現接口,例如 class Developer implements Employee {}
。 implements
子句通過定義類的所有屬性和方法來檢查類是否滿足接口。
interface Employee { id: number; name: string; tasks: string[]; doWork(): void; } class Developer implements Employee { constructor( public id: number, public name: string, public tasks: string[] ) { this.id = id; this.name = name; this.tasks = tasks; } doWork() { console.log(`${this.name} writes code`); } } const dev = new Developer(1, 'Tom', ['develop', 'test', 'ship']); console.log(dev.name); // ??? "Tom"
我們也可以點擊上面的運行示例來查看結果。
implements
子句允許我們檢查一個類是否滿足特定的接口。
如果類未能正確實現接口,則會發(fā)出錯誤。
如果我們的類不希望在初始化時將特定值作為參數,請使用類屬性。
interface Employee { id: number; name: string; tasks: string[]; address: { country: string; city: string; }; doWork(): void; } class Developer implements Employee { tasks: string[] = ['develop', 'test']; address: { country: string; city: string } = { country: 'Austria', city: 'Linz', }; constructor(public id: number, public name: string) { this.id = id; this.name = name; } doWork() { console.log(`${this.name} writes code`); } } const dev = new Developer(1, 'Tom'); console.log(dev.name); // ??? "Tom"
上面的示例直接設置類屬性,并在構造函數方法中接受參數。
我們可以使用這種方法來實現多個接口。
interface Employee { id: number; salary: number; } interface Person { name: string; } class Developer implements Employee, Person { constructor( public id: number, public name: string, public salary: number ) { this.id = id; this.name = name; this.salary = salary; } } const dev = new Developer(1, 'Tom', 100); console.log(dev.name); // ??? "Tom"
Developer
類實現了 Employee
和 Person
接口。
一個類可以根據需要實現盡可能多的接口。
實現接口時,我們必須確保在類上設置所有必要的屬性和方法。
interface Employee { id: number; salary: number; } // ?? Class 'Developer' incorrectly implements interface 'Employee'. // Property 'salary' is missing in type 'Developer' // but required in type 'Employee'.ts(2420) class Developer implements Employee { constructor(public id: number) { this.id = id; } }
Developer
類實現了 Employee 接口,但沒有定義所需的薪水屬性,因此會發(fā)出錯誤。
我們要么必須將 salary 屬性添加到 Developer
類,要么在接口中將其標記為可選。
interface Employee { id: number; salary?: number; // ??? optional property (can be undefined) } class Developer implements Employee { constructor(public id: number) { this.id = id; } }
salary 屬性被標記為可選,因此類不必定義它。
implements
子句所做的就是 - 它檢查類是否滿足特定接口,因此我們必須確保定義所有必需的屬性和方法。
implements
子句的目的只是檢查類是否可以被視為接口類型。
implements
子句不會更改類或其方法的類型。
interface Employee { multiply(a: number, b: number): number; } class Developer implements Employee { // ?? Error: Parameter 'a' implicitly has an 'any' type.ts(7006) multiply(a, b) { return a * b; } }
盡管該類實現了為 multiply
函數定義類型的 Employee 接口,但該類中的 multiply 方法不會自動被類型化。
這是因為 implements
子句不會改變類的類型。
interface Employee { id: number; name?: string; // ??? optional property } class Developer implements Employee { constructor(public id: number) { this.id = id; } } const dev = new Developer(1); // ?? Error: Property 'name' does not exist on type 'Developer'.ts(2339) console.log(dev.name);
如果我們使用可選屬性實現接口,則不會在類中自動創(chuàng)建它。
我們使用問號將 Employee
接口中的 name 屬性設置為可選。
這意味著它可以是字符串或具有未定義的值。
Developer
類正確實現了 Employee
接口,因為 name 屬性不是必需的,但是該屬性不會自動分配給該類。
到此這篇關于TypeScript 中實現接口的類的文章就介紹到這了,更多相關TypeScript 接口的類內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript實現的彈出層背景置灰-模擬(easyui dialog)
本文為大家介紹下使用javascript實現的彈出層背景置灰-模擬(easyui dialog) 具體實現如下,感興趣的朋友可以參考下2013-12-12