实战篇：（十二）使用 Vite + Vue3 + TypeScript 创建 Todo List 示例：父子组件的事件通信

使用 Vite + Vue3 + TypeScript 创建 Todo List 示例：父子组件的事件通信

随着前端开发的不断发展，TypeScript 和 Vue3 的结合成为现代开发中的重要趋势。TypeScript 为 JavaScript 提供了静态类型检查，让代码更加稳定、易维护。而 Vue3 的 Composition API 则与 TypeScript 紧密结合，极大提升了开发体验。本文将通过 Vite 创建一个 Vue3 项目，展示如何在实际项目中使用 TypeScript 实现简单功能。

目录结构：

your-project-name/
├── node_modules/               # Node.js 模块
├── public/                     # 静态文件
│   └── favicon.svg             # 项目的图标
├── src/                        # 源代码
│   ├── assets/                 # 静态资源（如图片、样式）
│   ├── components/             # Vue 组件
│   │   ├── Counter.vue         # 计数器组件
│   │   ├── TodoItem.vue        # Todo 项目项组件
│   │   └── ...                 # 其他组件
│   ├── types/                  # TypeScript 类型定义
│   │   └── types.ts            # 定义的类型接口
│   ├── App.vue                 # 主应用组件
│   ├── main.ts                 # 入口文件
│   └── router/                 # 路由文件（如果有）
│       └── index.ts            # 路由定义
├── .env                         # 环境变量配置
├── .gitignore                   # Git 忽略文件
├── index.html                   # 主 HTML 文件
├── package.json                 # 项目依赖和配置
├── tsconfig.json               # TypeScript 配置文件
└── vite.config.ts              # Vite 配置文件

目录结构说明

• node_modules/: 存放项目依赖的 Node.js 模块。
  - public/: 存放静态文件（如 favicon）。
  - src/: 存放源代码，包括组件、类型定义和其他源文件。
  - assets/: 用于存放静态资源，如图片和样式文件。
  - components/: 存放 Vue 组件的目录，组件可以拆分为多个文件以提高可维护性。
  - types/: 存放 TypeScript 类型定义文件，便于管理和复用。
  - App.vue: 主应用组件。
  - main.ts: 应用的入口文件，通常用于初始化 Vue 实例。
  - router/: 如果使用 Vue Router，这里将包含路由定义文件。
  - .env: 存放环境变量的配置文件。
  - .gitignore: 定义哪些文件和目录在 Git 版本控制中被忽略。
  - index.html: 项目的主 HTML 文件，Vite 会在这里插入构建后的代码。
  - package.json: 存放项目依赖及其他配置。
  - tsconfig.json: TypeScript 的配置文件，定义编译选项和类型检查规则。
  - vite.config.ts: Vite 的配置文件，用于定制 Vite 的行为。

1. 使用 Vite 创建 Vue3 项目

Vite 是一个快速的构建工具，它支持 Vue3 和 TypeScript 开发。首先，我们通过 Vite 创建一个 Vue3 项目并启用 TypeScript。

1.1 安装 Vite 项目

确保你的开发环境安装了 Node.js，然后执行以下命令来创建一个 Vue3 项目：

npm create vite@latest

选择项目名称后，系统会提示选择框架，选择 Vue，随后选择 TypeScript 作为语言支持。

1.2 安装依赖

进入项目文件夹，安装依赖：

cd your-project-name
npm install

1.3 运行项目

启动开发服务器：

npm run dev

浏览器会自动打开项目，你将看到一个初始的 Vue3 应用。

2. TypeScript 基础：在 Vue3 中的应用

在 Vite 中，TypeScript 已经配置好，现在我们可以在项目中开始编写 TypeScript 代码。接下来，我们从一个简单的功能出发，逐步讲解如何在 Vue3 项目中使用 TypeScript。

2.1 定义一个简单的组件

我们首先创建一个基础的 Vue 组件，并使用 TypeScript 为其 props 和状态（state）添加类型注解。

<script lang="ts">
import {
    defineComponent, ref } from 'vue';

export default defineComponent({
   
  name: 'Counter',
  props: {
   
    initialCount: {
   
      type: Number,
      required: true
    }
  },
  setup(props) {
   
    const count = ref<number>(props.initialCount);

    const increment = (): void => {
   
      count.value++;
    };

    return {
   
      count,
      increment
    };
  }
});
</script>

<template>
  <div>
    <p>Count: {
   {
    count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

在这个组件中，我们使用了 props 传递 initialCount，并为其类型定义为 number。此外，我们还通过 ref<number> 明确指定 count 的类型为数字，并用 TypeScript 注解了 increment 函数的返回值类型。

2.2 使用组件

我们可以在 App.vue 中使用这个计数器组件，并传递 initialCount：

<template>
  <div id="app">
    <Counter :initialCount="5" />
  </div>
</template>

<script lang="ts">
import {
    defineComponent } from 'vue';
import Counter from './components/Counter.vue';

export default defineComponent({
   
  components: {
   
    Counter
  }
});
</script>

2.3 使用 Vite