在 TypeScript 中，interface 和 class 都是非常常用的概念，它们分别代表了类型和对象的定义。但是在使用过程中，很多人不清楚它们之间的区别和使用技巧。本文将详细介绍 TypeScript 中 interface 和 class 的区别和使用技巧，帮助读者更好地理解和使用它们。
interface
在 TypeScript 中，interface 用来描述一个对象的结构，它只是一个类型声明，不会生成真正的 JavaScript 代码。interface 可以用来定义对象的属性、方法、函数等。
定义 interface
interface 的定义格式如下：
interface InterfaceName {
property1: type1;
property2?: type2;
method1(): void;
method2?(arg1: type1, arg2: type2): type3;
}其中，property1 和 property2 是对象的属性，method1 和 method2 是对象的方法。其中，? 表示该属性或方法是可选的。
使用 interface
使用 interface 的时候，需要定义一个对象，该对象必须包含 interface 中定义的所有属性和方法。例如：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
----------- -----
-
----- ------- ------ - -
----- ------
---- ---
---------- -
------------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
-
------------------ -- --------- -- ---- -- --- --- --- -- ----- ----在上面的例子中，我们定义了一个 Person 接口，包含了 name、age 和 sayHello 三个属性。然后我们定义了一个 person 对象，该对象包含了这三个属性，并且实现了 sayHello 方法。最后我们调用了 person 对象的 sayHello 方法，输出了一段字符串。
接口继承
在 TypeScript 中，interface 支持继承，可以通过 extends 关键字来实现。例如：
-- -------------------- ---- -------
--------- ------ -
------ -----
-
--------- --- ------- ------ -
------- -----
-
----- -------- ---------- --- -
----- -
-------------- -- ----------
-
------ -
-------------- -- -----------
-
-
----- ---- --- - --- -----------
---------- -- ---- -- -------
----------- -- ---- -- --------在上面的例子中，我们定义了一个 Animal 接口，包含了一个 eat 方法。然后我们定义了一个 Dog 接口，继承了 Animal 接口，并且增加了一个 bark 方法。最后我们定义了一个 Labrador 类，实现了 Dog 接口，并且实现了 eat 和 bark 方法。最后我们定义了一个 dog 对象，类型为 Dog，赋值为 Labrador 类的实例。我们调用了 dog 对象的 eat 和 bark 方法，分别输出了一段字符串。
class
在 TypeScript 中，class 用来定义一个对象，它是一种模板，用来创建具有相同属性和方法的对象。class 会生成真正的 JavaScript 代码，它可以通过 new 关键字来创建对象。
定义 class
class 的定义格式如下：
-- -------------------- ---- -------
----- --------- -
----------------- ------ ----- ------ -
-- ----------- ----
-
---------- ------
---------- ------
---------- ---- -
-- ------- ----
-
------------- ------ ----- ------- ----- -
-- ------- ----
-
-其中，constructor 是构造函数，用来初始化对象的属性；property1 和 property2 是对象的属性；method1 和 method2 是对象的方法。
使用 class
使用 class 的时候，需要通过 new 关键字来创建一个对象。例如：
-- -------------------- ---- -------
----- ------ -
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
----- -------
---- -------
---------- -
------------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
-
----- ------ - --- ------------- ----
------------------ -- --------- -- ---- -- --- --- --- -- ----- ----在上面的例子中，我们定义了一个 Person 类，包含了 name、age 和 sayHello 三个属性。然后我们通过 new 关键字创建了一个 person 对象，该对象包含了这三个属性，并且实现了 sayHello 方法。最后我们调用了 person 对象的 sayHello 方法，输出了一段字符串。
类继承
在 TypeScript 中，class 支持继承，可以通过 extends 关键字来实现。例如：
-- -------------------- ---- -------
----- ------ -
----- -
-------------- -- ----------
-
-
----- --- ------- ------ -
------ -
-------------- -- -----------
-
-
----- -------- ------- --- -
----- -
-------------- -- -----------
-
-
----- --- - --- -----------
---------- -- ---- -- -------
----------- -- ---- -- --------
---------- -- ---- -- --------在上面的例子中，我们定义了一个 Animal 类，实现了 eat 方法。然后我们定义了一个 Dog 类，继承了 Animal 类，并且增加了一个 bark 方法。最后我们定义了一个 Labrador 类，继承了 Dog 类，并且增加了一个 run 方法。最后我们定义了一个 dog 对象，赋值为 Labrador 类的实例。我们调用了 dog 对象的 eat、bark 和 run 方法，分别输出了一段字符串。
interface 和 class 的区别
interface 和 class 都可以用来定义对象的属性和方法，但是它们之间也有很大的区别。
interface 的特点
- interface 只是一个类型声明，不会生成真正的 JavaScript 代码。
- interface 可以用来描述一个对象的结构，包括属性、方法、函数等。
- interface 支持继承。
class 的特点
- class 是一个模板，用来创建具有相同属性和方法的对象。
- class 会生成真正的 JavaScript 代码。
- class 支持继承。
总结
interface 和 class 都是 TypeScript 中非常常用的概念，它们分别代表了类型和对象的定义。在使用过程中，我们需要根据实际情况选择合适的方式来定义和创建对象。interface 可以用来描述一个对象的结构，而 class 可以用来创建具有相同属性和方法的对象。在使用过程中，我们需要根据实际情况选择合适的方式来定义和创建对象，以便更好地实现我们的业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c2e479add4f0e0ffcceb14