TypeScript 是一种静态类型的 JavaScript 超集，它可以在编写 JavaScript 代码的同时提供类型检查和更好的代码组织结构。在 TypeScript 中，类和接口是两个非常重要的概念，因为它们可以帮助我们编写更健壮且易于维护的程序。本文将深入介绍 TypeScript 中的类和接口，以及它们的应用。
类
在 TypeScript 中，类是一种面向对象的编程结构，它可以包含属性、方法和构造函数。 TypeScript 中的类有以下特点：
- 可以继承其他类。
- 可以实现接口。
- 可以使用 public、private、protected 等关键字来限制属性和方法的访问权限。
类的声明
在 TypeScript 中，通过 class 关键字来声明一个类，如下：
----- --- -
------- -------
------------------- ------- -
----------- - -------
-
------- -
---------------- ------ -------- - - -------------
-
------ -
---------------- ------ -------- - - -------------
-
-上述代码定义了一个 Car 类，它有一个 engine 属性和 start()、stop() 两个方法。其中 constructor 是构造函数，用于初始化类的对象。在构造函数中，我们把传入的 engine 字符串赋值给 this.engine 属性。
接下来我们来创建一个 Car 对象并调用它的方法：
----- --- - --- ---------- -- ------ --- -- ------------ -- --- ---- ------ -------- --- ----------- -- --- ---- ------ -------- ---
类的继承
在 TypeScript 中，类可以通过继承其他类来扩展它们的功能，如：
----- ----- ------- --- -
------------------- ------- ------- ------------- ------- -
-------------- -- ---------
-
----------------- -
------------------ ---- --------- - - -------------------
-
-上述代码表示 Truck 类继承了 Car 类，并在自己的构造函数中增加了一个名为 loadCapacity 的私有属性。由于 Truck 类继承了 Car 类，所以它拥有 start() 和 stop() 两个方法，并且可以通过 super 关键字来调用父类的构造函数。
现在我们可以创建一个 Truck 对象并调用它的方法：
----- ----- - --- ------------ ------ -------------- -- --- ---- ------ -------- ---- ------------- -- --- ---- ------ -------- ---- ------------------------ -- --- ------ ---- --------- -----
类的访问修饰符
在 TypeScript 中，类可以使用访问修饰符来限制属性和方法的访问权限。访问修饰符可以有三种类型：
public表示公有，即所有地方都可以访问，默认为 public。private表示私有，只有类内部可以访问。protected表示受保护，只有类以及其继承类可以访问。
例如，我们可以把 Car 类中的 engine 属性改为私有属性：
----- --- -
------- ------- -------
------------------- ------- -
----------- - -------
-
-- ---
-这时，在类的外部就无法访问 engine 属性了：
----- --- - --- ---------- ------------------------ -- --- --------- -------- -- ------- --- ---- ---------- ------ ----- -------
类的静态属性和方法
在 TypeScript 中，类还可以定义静态属性和方法。静态属性和方法不属于类的对象，而是属于类本身。通过 static 关键字来声明静态属性和方法，如下：
----- --- -
------ ------ ------ - --
------------------- ------- ------- -
------------ -- ---------- ----- -
-
------ ---------- -
---------------- -------- -----------
-
-上述代码定义了一个静态属性 count 和一个静态方法 getCount()。在每次创建 Car 对象时，count 值都会增加。我们可以通过 Car.getCount() 方法来获取当前 Car 类的对象数：
----- ---- - --- ---------- ----- ---- - --- ----------- --------------- -- --- ---- ------ --
接口
在 TypeScript 中，接口是一种用于描述某种结构的语法规范。接口可以定义属性、方法、函数等，并指定它们的类型和参数。在 TypeScript 中，接口可以作为类型来使用，它们可以用于变量、函数和类中。
接口的声明
在 TypeScript 中，通过 interface 关键字来声明一个接口，如下：
--------- ------ - ----- ------- ---- ------- -------- ----- -
上述代码定义了一个 Person 接口，它包含了 name、age 和 sayHi() 三个成员。其中 sayHi() 是一个方法，它没有返回值。
接口的使用
在 TypeScript 中，接口可以作为类型来使用。我们可以用接口来定义变量、函数和类中的属性和方法时的类型。例如，我们可以定义一个 printPerson() 函数，它接受一个 Person 类型的参数：
-------- ------------------- ------- - -------------------- ------------- ------------------- ------------ --------------- -
现在，我们可以创建一个 Person 对象并把它传递给 printPerson() 函数：
----- ------- ------ - -
----- --------
---- ---
------- -
---------------- - - -----------
-
--
--------------------输出结果为：
----- ----- ---- -- --- -----
接口的可选属性
在 TypeScript 中，接口的属性可以是可选的。如果一个属性为可选属性，那么在使用它时可以省略它。定义可选属性使用 ? 来表示。例如，我们可以给 Person 接口添加一个可选的 address 属性：
--------- ------ - ----- ------- ---- ------- --------- ------- -- ---- -------- ----- -
现在，address 属性是可选的，我们可以在创建 Person 对象时选择性地指定它或者不指定：
----- -------- ------ - - ----- ------ ---- --- ------- -- -- ----- -------- ------ - - ----- -------- ---- --- -------- ---- ------ ------- -- --
接口的 Readonly 属性
在 TypeScript 中，接口的成员可以标记为 readonly，表示这个属性只读，不能被重新赋值。
--------- ------ - -------- --- ------- ----- ------- ---- ------- -
上述代码中，我们定义了一个 Person 接口，其中的 id 属性被标记为只读。这意味着，一旦 id 被赋值，就不能被改变了。例如，我们可以这样定义一个 Person 对象:
----- ------- ------ - - --- ----- ----- -------- ---- -- --
一旦这个对象被定义，它的 id 属性就不能被改变了：
--------- - ----- -- --- ------- ------ -- ---- ------- -- -- - --------- ----------
接口的函数类型
在 TypeScript 中，接口可以定义函数类型。函数类型描述了一个函数的输入和输出，它是一个具有特定参数和返回类型的函数签名。例如，我们可以定义一个接口 SearchFunc，它描述了一个具有一定输入和输出的函数：
--------- ---------- - -------- ------- ---------- -------- -------- -
接口中的函数类型可以用于定义变量、参数、返回值类型，例如:
----- ------- ---------- - ---------------- ---------- - ------ ------------------------ --- --- --
现在，我们可以调用 search 函数，并传递给它两个参数 source 和 subString：
------------------------- ------- ---------- -- --- ----
接口的可索引类型
在 TypeScript 中，接口还可以定义可索引类型。可索引类型描述了一个对象的索引的类型和值的类型。可索引类型有两种索引签名：字符串索引和数字索引。
字符串索引
字符串索引类型允许我们用字符串来索引对象。在一个字符串索引签名中，可以使用任意数量的字符串索引，同时每个索引都对应着一个返回值类型。
例如，我们可以定义一个字符串索引类型 StringArray，它描述了一个数组类型的对象，它的每个元素都是字符串：
--------- ----------- - ------- -------- ------- -
上述代码表示 StringArray 类型的对象允许使用数字来索引它的元素，每个元素都是字符串类型。例如，我们可以这样定义一个 StringArray 对象：
----- ------ ----------- - --------- --------- ---------------------- -- --- ------- ---------------------- -- --- -------
数字索引
数字索引类型允许我们用数字来索引对象。在一个数字索引签名中，可以使用任意数量的数字索引，同时每个索引都对应着一个返回值类型。
例如，我们可以定义一个数字索引类型 NumberDict，它描述了一个键值对类型的对象，它的键是字符串类型，值是数字类型：
--------- ---------- - ------- -------- ------- -
上述代码表示 NumberDict 类型的对象允许使用字符串来索引它的值，每个值都是数字类型。例如，我们可以这样定义一个 NumberDict 对象：
----- ----- ---------- - - ------ -- ------ -- -------- - -- ------------------------- -- --- - ------------------------- -- --- -
总结
本文介绍了 TypeScript 中的类和接口，涵盖了声明、继承、访问修饰符、静态属性和方法、可选属性、只读属性、函数类型、可索引类型等多个方面。类和接口是 TypeScript 中非常重要的语言特性，它们可以帮助我们编写更具有结构性和可维护性的程序。通过学习和使用类和接口，我们可以更好地掌握 TypeScript 的编程思想和技巧，从而更好地开发高质量的前端应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a51bf0add4f0e0ffd8adb6