用 js-doc + typescript 给项目更好的类型标注

从 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 内置此函数