【TS】项目随记

关键代码

CompostionAPI

给组件实例声明类型 ⭐

使用说明：在导入组件放入 <InstanceType<typeof xxx>>，即可获得该组件的类型

好处：避免误写组件方法时报错，有代码提示

给ref声明类型

一般不确定的值才限制类型，如果值是确定的就直接写

自定义组件参数类型 ⭐

限制数组里面每个元素的类型（对象同理）

通过 propType 可以给数组的每个元素声明类型，它接收一个泛型，将定义好的元素类型传入即可

步骤：从vue里面导入类型 propType，通过 as 进行类型断言

1. 在 type.ts 里面编写数组元素的类型

   

2. 导入类型并声明

   

   参数必须是数组，并且数组里面的元素有类型要求

自定义组件配置声明及使用 ⭐

首先在组件目录下的 types/index.ts 下编写组件需要的类型

自定义组件的类型都统一编写到这里

将组件的配置编写到配置文件：

导入并return，通过v-bind直接绑定即可

通过 v-bind 可以将对象上的所有属性传入到组件

自定义组件表单双向绑定实现

类型文件

配置文件

User.vue 定义如下，将其传给子组件

子组件接收，将配置列表进行遍历，获取到field属性，然后直接赋值

很多公司就是这样做的，但是最好不要修改子组件的props属性，违背了单向数据流的设计原则

如果开启了eslint它会有警告，可以通过eslint的配置文件把它关掉

自定义组件表单双向绑定实现（优化）⭐

这个版本遵守单向数据流

自定义组件双向绑定默认传入的是 modelValue

自定义组件双向绑定默认发送事件的是 update:modelValue

下面写法是无效的：

然后这样写，但这样和原来直接引用modelValue的原理是一样的，并且set根本就不会触发

但是修改可以修改成功，这是因为get本质拿到的还是modelValue，对modelValue属性赋值，还是会影响props属性

应该这样写：

不要用reactive了，因为reactive在子组件双向绑定的时候多少有点问题，改用ref

然后重点来了，

首先，还是用 ref 对 props 传进来的属性进行一个解构，这样就和props属性脱离的关系

把原来的计算属性删掉，改用watch监听，通过emit把最新的值发送出去

写法一：

写法二：

为什么用watch而不用computed呢？

也可这样写，但这样写会有递归问题，所以还是推荐用watch

插件

app.use一个function，那么这个function默认传入的就是app

Echarts

声明options类型

封装使用：

setup

定义属性

1. js类型
   

2. ts类型

   方法一

   
   方法二（推荐）

   
   默认值
   

Server

接口添加类型注解

1. 创建type.ts定义类型

   

2. 导入类型

   

给返回的结果声明类型

1. 在type.ts文件里面，根据数据返回结果定义类型

   好处：有提示，避免误写

   

   前者根据返回数据格式进行定义，后者是axios返回数据的固定格式，使用的时候直接传这个类型就好

2. 导入类型，给post定义泛型，它会将类型添加到返回的结果上

   

3. 然后调用接口就有提示：

   

返回结果比较复杂时的处理方式

1. 直接用any（推荐）

2. 用工具转 https://json2ts.com/（比较繁琐）

Store

state声明类型

默认会类型推导，但是定义泛型可以限制state里面的类型，更安全

这里的IRooteState可以放入 type.ts 文件里面导出使用，方便管理
注意：state增加属性了以后，接着就是给type.ts文件定义这个属性的类型

模块声明类型

1. 定义泛型，并传入需要的两个类型

   

   

2. 导入模块并注册

   

类型文件统一管理

当类型比较多的时候可以统一放到相应模块 type.ts 里面然后导出

actions声明类型

实例声明类型 ⭐

写法一：（缺点：1. 拿不到子模块数据 ，2. 需要引入类型）

给useStore声明类型了以后，这样 store.state.xxx. 时就会有提示，没有声明默认就是any

但这样只使用于根模块，如果有子模块还是会报错：

写法二：（推荐）⭐

1. 在store/index.ts里面导出一个自己的useStore，并给返回值声明类型

   
   

   这个Store是一个泛型，需要传入一个类型指明返回值的类型，指明了以后就会有提示，这里暂时用any

2. 在需要的地方导入

   

   此时store的类型是any

3. 在 types.ts 编写 useStore 的返回值类型

   

   IStoreType 包括 IRootState 和 IRootWithModule 的类型（交叉类型可以将两个接口结合在一起）

4. 导入编写好的类型

   
   
   到这里还没有函数体，然后进行函数体的实现

   
   

5. 重复第 2 步的步骤， store.state.login. 发现就有提示了

   

模块实际应用

1. 定义模块

   回顾：Module里面有两个泛型，第一个是子模块state的类型，第二个是跟模块state的类型

   

2. 创建 types.ts，编写类型

   原则：如果比较复杂的类型就直接写any

   

3. 声明类型

   

4. 注册子模块

   
   

5. 为了让模块被引用的时候有模块的提示，可以在 types.ts 里面添加相应模块类型

   

请求数据应用

1. 编写请求接口

   接口的请求方式有一个泛型，默认是any，你可以传入数据返回的类型

   1. 不给返回值类型：

      

   2. 给返回值类型：

      
      

2. 导入接口，并请求数据

   
   

   如果接口没有声明返回值类型，就没有提示

Router

给routes声明类型

声明了以后就有代码提示

Uitils

本地保存工具

根据菜单映射路由

使用：如果匹配到 /main 路径，那么就跳转到第一个菜单页面

根据路径匹配当前菜单

根据当前路径在映射列表里面进行匹配，查找出当前菜单，然后返回

拿到当前菜单，拿到里面的id

生成面包屑

使用计算属性是为了当路径在发生变化的时候，重新渲染面包屑

总结

1. 自定义组件props属性声明类型时，如果不好判断传入的值，就直接写成any
2. 接口返回值声明类型时，如果不好判断返回值比较复杂，就直接写成any

问题

state不能用中括号获取

原因分析：state有一个确定的类型，所以不允许你这样获取

对象中括号赋值