从 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 内置此函数
本文使用 文章同步助手 同步
