TypeScript 是一种由微软开发的 JavaScript 超集，它为 JavaScript 添加了静态类型、类、接口等特性。在前端开发中，TypeScript 已经被广泛应用于大型项目中，它可以提高代码的可维护性和可读性，减少错误和调试时间。本文将详细介绍 TypeScript 中的类与接口，包括类的定义、继承、访问修饰符、静态属性和方法，以及接口的定义、可选属性、只读属性、函数类型和类类型等。
类的定义
在 TypeScript 中，类的定义使用 class 关键字，类名的首字母通常大写。类中可以定义属性和方法，属性可以有默认值，方法可以有参数和返回值类型。下面是一个简单的类的示例：
-- -------------------- ---- -------
----- ------ -
----- -------
---- -------
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
----- - - --- ------------- ----
------------- -- ------ -- ---- -- ---- --- -- ----- ----在上面的示例中，Person 类有两个属性 name 和 age，它们分别表示人的姓名和年龄。Person 类还有一个构造函数 constructor，它接受两个参数 name 和 age，并将它们分别赋值给类的属性。Person 类还有一个方法 sayHello，它使用 console.log 打印出人的姓名和年龄。
类的继承
在 TypeScript 中，类可以使用 extends 关键字继承另一个类，从而获得父类的属性和方法。子类可以重写父类的方法，或者添加新的属性和方法。下面是一个类的继承示例：
-- -------------------- ---- -------
----- ------- ------- ------ -
------ -------
----------------- ------- ---- ------- ------ ------- -
----------- -----
---------- - ------
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- ---- --- --- -- ----- -----------------
-
-
----- - - --- ---------------- --- ----
------------- -- ------ -- ---- -- ------ --- -- ----- ---- --- --- -- ----- ---在上面的示例中，Student 类继承了 Person 类，并添加了一个新的属性 grade，表示学生的年级。Student 类重写了 sayHello 方法，使用 console.log 打印出学生的姓名、年龄和年级。
访问修饰符
在 TypeScript 中，可以使用访问修饰符控制类的属性和方法的访问权限。访问修饰符包括 public、private 和 protected，分别表示公有、私有和受保护的属性和方法。默认情况下，类的属性和方法都是公有的。
public：公有属性和方法可以在类的内部和外部访问。private：私有属性和方法只能在类的内部访问，子类和实例都无法访问。protected：受保护的属性和方法可以在类的内部和子类中访问，但是实例无法访问。
下面是一个访问修饰符的示例：
-- -------------------- ---- -------
----- ------ -
------ ----- -------
------- ---- -------
--------- ------- -------
----------------- ------- ---- ------- ------- ------- -
--------- - -----
-------- - ----
----------- - -------
-
------ ---------- -
------------------- -- ---- -- ------------- --- ----------- ----- ---- --- --- - ------------------
-
------- -------- -
------ ---------
-
--------- ----------- -
------ ------------
-
-
----- --- ------- ------ -
----------------- ------- ---- ------- ------- ------- -
----------- ---- --------
-
------ ---------- -
------------------- -- ---- -- ------------- --- - ------------------- -------
-
-
----- ------ - --- ------------- -- --------
------------------ -- ------ -- ---- -- ---- --- - ----- ---- --- --- - -----
------------------------- -- ---
------------------------ -- ------ -------- ----- -- ------- --- ---- ---------- ------ ----- ---------
--------------------------- -- ------ -------- -------- -- --------- --- ---- ---------- ------ ----- ---------
----- --- - --- ------------ -- ----------
--------------- -- ------ -- ---- -- ------ --- - ------ ----
---------------------- -- -----
--------------------- -- ------ -------- ----- -- ------- --- ---- ---------- ------ ----- ---------
------------------------ -- ------ -------- -------- -- --------- --- ---- ---------- ------ ----- ---------在上面的示例中，Animal 类定义了三个属性 name、age 和 gender，分别表示动物的名称、年龄和性别。Animal 类有一个公有方法 sayHello，使用 console.log 打印出动物的名称、年龄和性别。Animal 类还有一个私有方法 getAge，它返回动物的年龄。Animal 类还有一个受保护方法 getGender，它返回动物的性别。
Cat 类继承了 Animal 类，并重写了 sayHello 方法。Cat 类使用 console.log 打印出猫的名称和性别，使用 getGender 方法获取受保护的属性 gender。在实例化 Animal 和 Cat 类的时候，可以分别访问公有属性和方法，但是无法访问私有和受保护的属性和方法。
静态属性和方法
在 TypeScript 中，可以使用 static 关键字定义静态属性和方法。静态属性和方法不需要实例化类就可以访问，可以通过类名直接访问。下面是一个静态属性和方法的示例：
-- -------------------- ---- -------
----- --------- -
------ --- ------ - ------------------
------ ------ ------- -- ------- -
------ - - --
-
------ ------ ------- -- ------- -
------ - - --
-
-
-------------------------- -- -----------------
---------------------------- ---- -- -
---------------------------- ---- -- --在上面的示例中，MathUtils 类定义了一个静态属性 PI 和两个静态方法 add 和 sub。静态属性和方法可以通过类名直接访问，不需要实例化类。在使用静态属性和方法的时候，可以省略 new 关键字。
接口的定义
在 TypeScript 中，接口用来描述对象的形状，它可以定义对象的属性、方法和索引类型。接口可以用来限制函数的参数和返回值类型，也可以用来限制类的实例属性和方法。下面是一个接口的示例：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
----------- -----
-
----- -- ------ - -
----- ------
---- ---
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
--
------------- -- ------ -- ---- -- ---- --- -- ----- ----在上面的示例中，Person 接口定义了三个属性 name、age 和 sayHello，分别表示人的姓名、年龄和打招呼的方法。Person 接口限制了对象的形状，它可以用来限制函数的参数和返回值类型，也可以用来限制类的实例属性和方法。在实例化对象的时候，需要满足接口的要求。
可选属性和只读属性
在 TypeScript 中，可以使用 ? 修饰符定义可选属性，表示这个属性可以不存在。还可以使用 readonly 关键字定义只读属性，表示这个属性只能在初始化的时候赋值，之后不能修改。下面是一个可选属性和只读属性的示例：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- -------- ------- -------- ----- ------- - ----- ------- ------ - - ----- ------ ---- -- ----- ----- -- ------------------------- -- --- ------------------------ -- - --------------------------- -- --------- ------------------------- -- --- ----------- - -------- ---------- - -- ------------- - --------- ----------- - ------ -- ------ ------ ------ -- ------ ------- -- -- - --------- ---------
在上面的示例中，Animal 接口定义了四个属性 name、age、gender 和 type，分别表示动物的名称、年龄、性别和类型。gender 属性使用 ? 修饰符定义为可选属性，表示这个属性可以不存在。type 属性使用 readonly 关键字定义为只读属性，表示这个属性只能在初始化的时候赋值，之后不能修改。在实例化 Animal 对象的时候，可以省略可选属性，但是不能修改只读属性。
函数类型和类类型
在 TypeScript 中，可以使用接口描述函数的类型和类的类型。函数类型的接口定义了函数的参数和返回值类型，类类型的接口定义了类的构造函数和实例方法。下面是一个函数类型和类类型的示例：
-- -------------------- ---- -------
--------- ------- -
--- ------- -- -------- -------
-
----- ---- ------- - --- -- -- - - --
------------------ ---- -- -
--------- ------ -
----- -------
---- -------
----------- -----
-
--------- ----------------- -
--------- ------- ---- -------- -------
-
----- --- ---------- ------ -
----- -------
---- -------
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- - -------
-
-
----- ------------ ----------------- - ----
----- ------- ------ - --- -------------------- ---
------------------ -- ------ -- ---- -- ------ --- - ----在上面的示例中，AddFunc 接口定义了一个函数类型，它接受两个参数 a 和 b，返回一个数字。add 函数满足 AddFunc 接口的要求，可以使用 add 函数进行加法运算。
Animal 接口定义了一个类的类型，它有三个属性 name、age 和 sayHello，分别表示动物的名称、年龄和打招呼的方法。AnimalConstructor 接口定义了一个类的构造函数类型，它接受两个参数 name 和 age，返回一个 Animal 类型的对象。Cat 类实现了 Animal 接口，它有两个属性 name 和 age，和一个实例方法 sayHello。在实例化 AnimalClass 对象的时候，使用 Cat 类作为参数，返回一个 Animal 类型的对象。在实例化 animal 对象的时候，使用 AnimalClass 类作为构造函数，返回一个 Cat 类型的对象，然后可以调用 sayHello 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da2659a941bf71341e1a99
