如何在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 子句允许我们检查一个类是否满足特定的接口。
如果类未能正确实现接口，则会发出错误。
如果我们的类不希望在初始化时将特定值作为参数，请使用类属性。
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 接口，但没有定义所需的薪水属性，因此会发出错误。
我们要么必须将 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);
如果我们使用可选属性实现接口，则不会在类中自动创建它。
我们使用问号将 Employee 接口中的 name 属性设置为可选。
这意味着它可以是字符串或具有未定义的值。
Developer 类正确实现了 Employee 接口，因为 name 属性不是必需的，但是该属性不会自动分配给该类。
到此这篇关于TypeScript 中实现接口的类的文章就介绍到这了,更多相关TypeScript 接口的类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序调用支付接口支付，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了纯JavaScript实现的分页插件,涉及javascript结合php动态实现分页效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
下面小编就为大家带来一篇JS实用的带停顿的逐行文本循环滚动效果实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
在一些程序开发中，对于删除操作，最好再让用户确认一下，以免误操作，带来的损失，下面的方法，大家可以参考下。各个语言下，都通用的思路。2010-07-07
第一种是使用document.write/writeln(）方式，第二种使用jQuery，第三种是使用原生js方法，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了js实现鼠标经过表格行变色的方法,涉及javascript表格节点样式及鼠标事件的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了js制作网站首页图片轮播特效代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
javascript实现的弹出层背景置灰-模拟(easyui dialog)
本文为大家介绍下使用javascript实现的弹出层背景置灰-模拟(easyui dialog) 具体实现如下，感兴趣的朋友可以参考下2013-12-12
这篇文章主要给大家介绍了关于webpack如何自动生成网站图标的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了JavaScript工具库之Lodash详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
最新评论