单元测试在项目中的应用

从 ts 文件引入 js 文件的时候（js 引入 js 文件同理），ts 文件中只能基于变量的默认值推断出一个类型，但是如果初始值是 null，谁也不知道这个变量最后被赋值了什么类型，那么怎么解决呢

首先 jsdoc 基本语法 （vscode && webstorm 自带）

js 文件

class C {/** * @type {string} */person = "";
} 

当我们把鼠标移动到 person 上，可以看到

这个时候你可能会说，不对啊，我就不写这个类型标注，本来 vscode 和 webstorm 就能推断出 person 类型是字符串但是，如果 person 的初始值是 null 呢像这样

这时候 person 的类型就变成了 null，使用的时候也不够友好，因为我们不知道这个 person 初始化的时候是被赋值了什么类型，是对象，数字，还是字符串，都没法知道，这时候使用 js-doc 就可以解决这个问题

会推断出

如果 person 是对象

推断出

使用的时候也有对应的提示

引入外部类型

上面的写法还不错，但是仅限于类型，属性名不多，不复杂的时候，如果有几十个属性，就会发生这种代码变得很长，且不利于阅读的情况

export class B {/** * @type {{ * age:number, * name:string, * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * gender:number * }} */person = {gender: 0};
} 

那怎么解决这个问题呢

js-doc 也支持从外部 ts 中引入类型，然后在 @type 中进行标注

先定义类型

export enum Gender {male,female,
}
export type B_PERSON_TYPE = {gender: Gender;age: number;
} | null; 

然后在刚刚的 js 文件中引入

import { B_PERSON_TYPE } from "./constant";
export class B {/** * @type {B_PERSON_TYPE} */person = {gender: {datum: "12",list: "123123",},};
} 

之后就可以看到编辑器将 person 推断为我们外部引入的 ts 类型了

Vue 中使用

就算 js 中可以正确标注类型了，可能又有人问了，我平时写的都是 vue，vue 中怎么用呢？答案是，直接就可以使用

export class B {/** * @type {{age:number}|null} */person = null;
} 

像这样直接标注好，然后 vue 文件中就会伴有提示了

不过如果是 vue 项目，更推荐使用 defineComponent 函数包裹，可以获得更好的类型推断体验

vue2 使用 @vue/composition-api 这个库，vue3 内置此函数

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享