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

在 Vue 3 中，TypeScript（TS）是一个非常强大的工具，可以帮助你更好地管理和约束数据。通过使用接口（Interfaces）、泛型（Generics）和自定义类型（Type Aliases），你可以确保代码的类型安全性和可维护性。接下来，我们将通过一个实际例子来展示如何在 Vue 3 中使用这些 TypeScript 特性。

一、问题引入：定义和约束数据

假设你有一个子组件 Person.vue，它包含一个人的信息，如 id、name 和 age。你希望在父组件中使用这个子组件，并确保数据的类型安全性和一致性。

问题描述

• 子组件 Person 包含 id、name 和 age。

• 父组件需要访问子组件的 name 和调用子组件的方法。

• 如何确保父组件访问子组件时不会出错？

二、实现思路

1. 定义接口：在子组件中定义一个接口，约束 Person 的数据结构。

2. 使用泛型：在父组件中使用泛型，确保数组中的每个元素都符合接口规范。

3. 自定义类型：通过自定义类型进一步简化代码。

三、代码实现

1. 子组件 Person.vue

定义接口

<template>
  <div>
    <h4>姓名：{{ name }}</h4>
    <h4>年龄：{{ age }}</h4>
    <button @click="sayHello">打招呼</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { defineExpose } from 'vue';

interface PersonInter {
  id: string;
  name: string;
  age: number;
}

const name = ref('张三');
const age = ref(18);
const id = ref('001');

const sayHello = () => {
  console.log(`你好，我叫${name.value}，今年${age.value}岁了`);
};

defineExpose({
  id,
  name,
  age,
  sayHello
});
</script>

2. 父组件

使用泛型

<template>
  <div>
    <Person ref="person" />
    <button @click="showName">显示姓名</button>
    <button @click="callSayHello">调用打招呼方法</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Person from './Person.vue';

const person = ref<PersonInter>;

const showName = () => {
  console.log(person.value?.name); // 访问子组件暴露的姓名
};

const callSayHello = () => {
  person.value?.sayHello(); // 调用子组件暴露的方法
};
</script>

3. 定义泛型和自定义类型

创建 types/index.ts

TypeScript

// types/index.ts
export interface PersonInter {
  id: string;
  name: string;
  age: number;
}

export type PersonList = PersonInter[];
//export type PersonList1 = Array<PersonInter>;

export 是一个非常重要的关键字，用于将模块中的变量、函数、类或接口等导出，以便其他模块可以导入并使用它们。定义数组也可以这么写Array

在定义PersonInter泛型的时候，如果想让某个属性可有可无的话，可以使用sex?:number来定义

在父组件中引入

HTML复制

<script setup lang="ts">
import { ref } from 'vue';
import Person from './Person.vue';
import type { PersonInter, PersonList } from '@/types';

const person = ref<PersonInter>;

const showName = () => {
  console.log(person.value?.name); // 访问子组件暴露的姓名
};

const callSayHello = () => {
  person.value?.sayHello(); // 调用子组件暴露的方法
};
</script>

这里要说一下@符合，这里的@会src目录，然后想引入哪个再写具体的文件目录

四、运行效果

• 点击“显示姓名”按钮：

• 控制台会输出子组件的 name 属性值，例如：“张三”。

• 点击“调用打招呼方法”按钮：

• 控制台会输出子组件的 sayHello 方法的执行结果，例如：“你好，我叫张三，今年18岁了”。

五、组件实例保护的原理

1. 默认保护机制

Vue 3 中，组件实例的内部状态（如 data、methods 等）默认是受保护的，父组件不能直接访问子组件的内部状态。

2. 显式暴露

如果需要让父组件访问子组件的某些属性或方法，必须在子组件中使用 defineExpose 显式暴露这些内容。

3. 父组件访问

在父组件中，通过 ref 绑定子组件实例后，只能访问子组件通过 defineExpose 暴露的内容。

六、总结

接口（Interfaces）

• 用途：定义对象的结构。

• 示例：

  TypeScript复制

interface PersonInter {
  id: string;
  name: string;
  age: number;
}

这里相当于定义一个规范，这里来限制person对象的具体属性

泛型（Generics）

• 用途：在定义类型时，允许你指定具体的类型。

• 示例：

  TypeScript复制

const person = ref<PersonInter>;

自定义类型（Type Aliases）

• 用途：为复杂类型创建别名，简化代码。

• 示例：

  TypeScript复制

type PersonList = PersonInter[];

通过上述内容，你可以更好地理解和使用 Vue 3 中的 TypeScript 特性。在实际开发中，合理使用接口、泛型和自定义类型可以确保代码的类型安全性和可维护性。