携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

前言

之前我们给todoMvc项目进行了组件化，通过typeScript学习，我们来给我们的项目添加TS类型提示。

创建TS项目

我们之前使用脚手架创建的项目是不带ts的，为了节省时间，我们直接重新搭建一个脚手架项目，然后把之前todos的组件逻辑迁移过来
使用vite创建ts项目

npm init vue@3

选择自己需要的选项,为了方便后面重构项目，我这里把pinia加进来了

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ...  Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... No 
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

我们先把之前组件化项目中的逻辑迁移过来

注意：由于我们的todo项目比较简单可以这样做，正常项目的话要手动升级，排查错误

我们需要在<script>标签上添加lang='ts'的声明，表示可以在代码中使用ts类型检查，其他文件也需要这样改，后面就不一一介绍了。

创建通用类型文件

创建src\todos\interface.ts文件，用来存放我们通用的ts类型声明
首先我们的todo数据需要类型声明，针对单条数据和多条数据都做好声明

import type { Ref } from 'vue';

export interface Todo {
  id: symbol;
  text: string;
  completed: boolean;
}

export type Todos = Todo[];

export type RefTodos = Ref<Todo[]>;

这里的Ref是vue3中内置的ts类型，用来对ref声明的变量进行类型声明
然后对点击类型使用类型别名进行类型声明

export type VisibleType = 'all' | 'active' | 'completed';

对过滤方法也做好声明

export interface Filters {
  all: (todos: Todo[]) => Todo[];
  active: (todos: Todo[]) => Todo[];
  completed: (todos: Todo[]) => Todo[];
}

目前这些类型声明基本够我们用了，然后到组件中，对使用的数据进行类型检查

总结

这一节我们创建了有typeScript的项目，对通用的一些数据做了类型声明，下一节，我们根据类型声明对我们组件进行类型检查。
GitHub地址点击这里查看

vue3入门32 - todoMvc 项目 - typeScript

前言

创建TS项目

创建通用类型文件

总结