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

前言

• 这一节，我们给todos封装的组件添加一下ts类型检查

Main.vue

• 修改src\components\Main\Main.vue
• 我们可以看到，除了inject函数调用，鼠标移入其他hook模块都可以获得比较好的类型提示

• 我们给inject也添加好类型检查

const { filteredTodos, visibility, remaining, allDone } = inject<TodosStore>('todosStore', {} as TodosStore);

TodoList.vue

• 文件位置：src\components\Main\TodoList.vue

props添加类型检查

• 我们给vue的Props数据添加类型检查，需要借助vue内置的PropType来做，传入泛型即可

props: {
  todo: {
    type: Object as PropType<Todo>,
      required: true
  },
    editingTodo: {
      type: Object as PropType<Todo | null>, // 类型断言
        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<Todo | null> = ref(null);

• 在组件定义中我们props的定义null，vue内部并没有解析到

props: {
  editingTodo: {
    type: Object as PropType<Todo | null>, // 类型断言
    required: true
  }
},

• 解决方法：初始值定义为{}来解决，

// 初始值
const editingTodo: Ref<Todo | {}> = ref({});

// props 定义
editingTodo: {
  type: Object as PropType<Todo | {}>, // 类型断言
  required: true
}

• 起初以为应该这样解决，实际上，上面的解决方式是错误的，我们给props限定了必传，那就不能传null、undefined，所以真正的解决方式应该是去掉require

editingTodo: {
  type: Object as PropType<Todo | null>, // 类型断言
  // required: false
}

Completed.vue

• 这里我们也需要给inject的调用添加类型检查

const { todos, remaining } = inject<TodosStore>('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地址点击这里查看