本系列教程带您逐步学习 TypeScript。第一部分简要介绍了 TypeScript 并推荐了一些可用于编写 TypeScript 的 IDE。第二部分重点介绍了数据类型,第三部分讨论了 TypeScript 接口的基础知识。
您可能已经知道,JavaScript 现在也原生支持类和面向对象编程。但是,TypeScript 长期以来都允许开发人员在其代码中使用类。这段代码随后编译成可在所有主要浏览器上运行的 JavaScript 代码。在本教程中,您将学习 TypeScript 中的类。它们与其 ES6 对应物类似,但更严格。
让我们从基础开始。类是面向对象编程的基础部分。您可以使用类来表示任何具有某些属性和函数的实体,这些函数可以作用于给定的属性。TypeScript 使您可以完全控制在其自身包含的类内部和外部可访问的属性和函数。以下是如何创建类的基本示例。
您可能已经注意到,构造函数类似于 get
和 name
,以及 get
但不是 readonly
。如果未显式指定,则设置器的参数类型将从 getter 的返回类型推断。从 TypeScript 4.3 开始,您可以拥有一个设置器,它接受与 getter 返回的类型不同的类型。
在我们之前的 TypeScript 接口入门教程中,我们了解到接口基本上用于指定我们在代码中将使用的不同对象的结构。现在,我们将学习如何基于一些先前声明的接口实现类。
interface IPoint { x: number; y: number; position(x: number, y: number): void } interface IRectangle extends IPoint { width: number; length: number; area(width: number, length: number): number } class Point implements IPoint { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } position(): void { console.log(`The point is at (${this.x}, ${this.y}).`); } } class Rectangle implements IRectangle { width: number; length: number; x: number; y: number; constructor(x: number, y: number, width: number, length: number) { this.x = x; this.y = y; this.width = width; this.length = length; } area(): number { return this.width * this.length; } position(): void { console.log(`The rectangle is at (${this.x}, ${this.y}).`); } } let myPoint = new Point(10, 20); let myRect = new Rectangle(0, 0, 20, 30); myPoint.position(); myRect.position(); console.log(myRect.area());
我们创建了一个 IRectangle
接口,就像我们在之前的教程中所做的那样。这里的一个额外更改是,我们还向接口添加了一个函数声明。
IRectangle
,这意味着它将具有这四个属性和两个方法来输出其位置和显示其面积。
在本教程中,我尝试介绍 TypeScript 中类的基础知识。我们首先创建了一个非常基本的 Person
类,它将人的姓名打印到控制台中。之后,您学习了 private
关键字,该关键字可用于防止在程序的任意点访问类的成员。
最后,您学习了如何使用继承基类在代码中扩展不同的类。您可以在官方文档中了解更多关于类的信息。
以上是初学者的打字稿,第4部分:课程的详细内容。更多信息请关注PHP中文网其他相关文章!