当前位置：首页 > article >正文

Vue 3 中的 TypeScript：接口、自定义类型与泛型

article 2025/1/31 3:01:27

在 Vue 3 中，TypeScript 提供了强大的类型系统，帮助我们更好地管理代码的类型安全。通过使用 接口（Interface）、自定义类型（Type Aliases） 和 泛型（Generics），我们可以编写更清晰、更健壮的代码。本文将详细介绍这些概念，并通过优化后的代码示例来演示它们的实际应用。

1. 接口（Interface）

接口是 TypeScript 中定义对象结构的主要方式。它描述了对象的形状，包括属性的名称和类型。

1.1 定义接口

export interface Person {
  id: string;
  name: string;
  age: number;
}

Person 接口：
- 定义了一个包含 id、name 和 age 属性的对象结构。
- 每个属性都有明确的类型。

1.2 使用接口

let person: Person = { id: "1", name: "张三", age: 18 };

person 对象：
- 必须符合 Person 接口的结构。
- 如果缺少某个属性或类型不匹配，TypeScript 会报错。

2. 自定义类型（Type Aliases）

自定义类型允许我们为复杂的类型定义一个别名，使代码更具可读性。

2.1 定义自定义类型

// 使用 Array<Person> 或 Person[] 定义 Persons 类型
export type Persons = Person[];

Persons 类型：
- 表示一个 Person 对象的数组。
- 可以使用 Array<Person> 或 Person[] 两种写法。

2.2 使用自定义类型

let personList: Persons = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

personList 数组：
- 必须是一个 Person 对象的数组。
- 每个元素都必须符合 Person 接口的结构。

3. 泛型（Generics）

泛型允许我们编写可重用的代码，适用于多种类型。它通过参数化类型来实现。

3.1 使用泛型定义数组

let personList2: Array<Person> = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

Array<Person>：
- 表示一个 Person 对象的数组。
- 泛型 Array<T> 可以用于任何类型 T。

3.2 泛型的优势

类型安全：确保数组中的每个元素都符合指定的类型。
代码复用：可以用于多种类型，而无需重复定义。

4. 优化后的代码示例

以下展示了如何在 Vue 3 中使用接口、自定义类型和泛型。

4.1 定义类型文件（`types.ts`）

// 定义 Person 接口
export interface Person {
  id: string;
  name: string;
  age: number;
}

// 定义 Persons 类型
export type Persons = Person[];

4.2 使用类型文件（`Person.vue`）

<template>
  <div>
    <h1>人员信息</h1>
    <ul>
      <li v-for="p in personList" :key="p.id">
        {{ p.name }} - {{ p.age }} 岁
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { type Person, type Persons } from "@/types";

// 定义单个 Person 对象
let person: Person = { id: "1", name: "张三", age: 18 };

// 定义 Person 数组（使用自定义类型）
let personList: Persons = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

// 定义 Person 数组（使用泛型）
let personList2: Array<Person> = [
  { id: "1", name: "张三", age: 18 },
  { id: "2", name: "李四", age: 19 },
  { id: "3", name: "王五", age: 20 },
  { id: "4", name: "赵六", age: 21 },
];

console.log(person);
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 18px;
}
</style>

4.3 代码解析

类型定义：
- 在 types.ts 中定义了 Person 接口和 Persons 类型。
- 通过 import 引入类型并在组件中使用。
数据定义：
- 使用 Person 接口定义单个对象 person。
- 使用 Persons 类型和 Array<Person> 泛型定义数组 personList 和 personList2。
模板渲染：
- 使用 v-for 遍历 personList 并渲染人员信息。
样式优化：
- 使用 scoped 样式确保样式只作用于当前组件。