在 TypeScript 中，interface 和 type 都是用来定义类型的关键字。虽然它们的用途相似，但它们在一些细节方面还是存在区别的。在这篇文章中，我们将详细讨论 TypeScript 中如何使用 interface 和 type，并通过示例代码进行演示。
interface
interface 是 TypeScript 中最常见的类型定义方式之一。它可以用来定义一个对象的形状，包括属性名和属性值的类型。下面是一个简单的示例：
interface Person {
name: string;
age: number;
}上面的代码定义了一个名为 Person 的 interface，其中包含两个属性：name 和 age。name 的类型为字符串，age 的类型为数字。使用 interface 定义类型时，我们可以在声明变量时直接使用这个 interface：
const person: Person = {
name: "张三",
age: 18,
};上面的代码中，我们声明了一个名为 person 的变量，它的类型为 Person。由于 Person 的定义中已经包含了 name 和 age 这两个属性，我们就可以直接使用它来定义一个符合该类型的对象。
当然，interface 不仅可以用来定义简单对象的类型，也可以用来定义函数的类型。下面是一个示例：
interface Greeter {
(name: string): string;
}
const greet: Greeter = (name) => `Hello, ${name}!`;
console.log(greet("张三")); // 输出：Hello, 张三!上面的代码中，我们定义了一个名为 Greeter 的 interface，它的类型定义了一个函数，接收一个字符串类型的参数 name，并返回一个字符串类型的值。在定义函数类型的时候，我们使用了 interface 的另一种语法方式。
type
type 与 interface 的作用很相似，也可以用来定义类型。但是它们在具体的使用上还是存在区别的。接下来我们将通过示例代码来理解 type 的用法。
type Animal = {
name: string;
category: "land" | "water" | "air";
isCarnivorous: boolean;
};上面的代码定义了一个名为 Animal 的 type，其中除了 name 和 isCarnivorous 这两个属性，还定义了一个 category 属性。category 属性的类型为联合类型，它只能是 "land"、"water" 或 "air" 中的一个。
使用 type 定义类型时，我们可以在创建变量时直接使用这个定义：
-- -------------------- ---- ------- ----- ----- ------ - - ----- ----- --------- ------- -------------- ----- -- ----- ------ ------ - - ----- ----- --------- -------- -------------- ----- -- ----- ------ ------ - - ----- ----- --------- ------ -------------- ----- --
上面的代码中，我们使用 Animal 这个定义来创建了三个不同的变量，它们符合 Animal 的属性定义。
与 interface 相比，type 还有一个非常重要的特性就是可以使用联合类型、交叉类型等高级类型定义。下面是一个示例：
-- -------------------- ---- ------- ---- ----- - - -- ------- -- ------ -- ---- ------ - - ------- ------ ------- ------- -- ---- --------- - - -------- ------ ------------ ------ -- ---- ----- - ------ - ---------- ---- ------------ - ----- - - ------ ------ -- ----- ------- ----- - - ------- - -- -- -- - -- ------- --- -- ----- ------------- ------------ - - -------- - -- -- -- - -- ------------ - -- --- -- -- -- ------ ------ --
上面的代码中，我们定义了一个 Shape 类型，它是由 Circle 和 Rectangle 两个类型联合组成的。接着我们又定义了一个 ColoredShape 类型，它是由 Shape 类型和一个 color 属性交叉组成的。最后我们创建了一个名为 circle 的变量，它类型为 Shape，还创建了一个名为 redRectangle 的变量，它的类型为 ColoredShape。
总结
到此为止，我们已经详细讨论了 TypeScript 中如何使用 interface 和 type 来定义类型。通过实例代码的演示，我们可以清晰地看到它们的使用方法和细节。在实际开发中，选择使用 interface 还是 type 取决于具体的场景和需求。希望本文能对大家有所帮助，不断学习和积累才能让我们成为更优秀的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0d9e348841e9894d09215