|
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
前言
这一节，我们给todos封装的组件添加一下ts类型检查
Main.vue
修改src\components\Main\Main.vue
我们可以看到，除了inject函数调用，鼠标移入其他hook模块都可以获得比较好的类型提示
我们给inject也添加好类型检查
const { filteredTodos, visibility, remaining, allDone } = inject('todosStore', {} as TodosStore);
复制代码
TodoList.vue
文件位置：src\components\Main\TodoList.vue
props添加类型检查
我们给vue的Props数据添加类型检查，需要借助vue内置的PropType来做，传入泛型即可
props: {
todo: {
type: Object as PropType,
required: true
},
editingTodo: {
type: Object as PropType, // 类型断言
required: true
}
},
复制代码
这里为什么要加required呢？如果你确定你的数据是必传的就要加，不然vue会在参数类型上加上undefined类型，也就是可选的，
如果你的参数是可选的，就通过类型守卫来解决
指令添加类型检查
我们的vue指令会获取到dom，接收参数时执行dom类型,,比如我们这里的el是个input，它对应的类型是HTMLInputElement
directives: {
editFocus: (el:HTMLInputElement, { value }) => value && el.focus()
}
复制代码
警告问题解决
运行项目时，看到这样一个警告
这个问题大概意思是我们props需要object，实际获取到了null
查看代码之后，发现我们定义editingTodo的地方，初始值是这样的
const editingTodo: Ref = ref(null);
复制代码
在组件定义中我们props的定义null，vue内部并没有解析到
props: {
editingTodo: {
type: Object as PropType, // 类型断言
required: true
}
},
复制代码
解决方法：初始值定义为{}来解决，
// 初始值
const editingTodo: Ref = ref({});
// props 定义
editingTodo: {
type: Object as PropType, // 类型断言
required: true
}
复制代码
起初以为应该这样解决，实际上，上面的解决方式是错误的，我们给props限定了必传，那就不能传null、undefined，所以真正的解决方式应该是去掉require
editingTodo: {
type: Object as PropType, // 类型断言
// required: false
}
复制代码
Completed.vue
这里我们也需要给inject的调用添加类型检查
const { todos, remaining } = inject('todosStore', {} as TodosStore);
复制代码
然后，我们给filter方法也添加上类型检查
src\utils\index.ts
import type { Filters } from '@/todos/interface';
export const filters: Filters = {
all: (todos) => todos,
active: (todos) => todos.filter((todo) => !todo.completed),
completed: (todos) => todos.filter((todo) => todo.completed)
};
复制代码
总结
这一节，我们给组件添加了类型检查，简单重复的组件修改这里没有写，在代码中都有修改，我们的类型检查完善的工作算是完成了。
GitHub地址点击这里查看
|