ts-check

ts-check

概念

javascript 是弱类型语言，类型校验在一定程度上能够提高代码的健壮性。

typescript 已经对类型有了良好的支持，但对于一些老项目，如果替换成ts 成本和风险都是巨大的。

ts-check 用于js文件，vscode自动支持，非常适合老项目，

对于提高老项目的健壮性、可维护性有一定作用。

使用

// @ts-check 与其他例如 @type 配合使用

// @ts-check
/**
 * 声明函数参数类型
 * @param p0 {string} - TS 风格声明 p0
 * @param {string}  p1 - p1 是 string 类型参数
 * @param {string=} p2 - p2 是可选的 string 类型参数
 * @param {string} [p3] - 另外一种可选参数写法
 * @param {string} [p4="test"] - p4 是可选的 string 类型参数（默认值为 "test"）
 * @return {string} - 函数返回值是 string 类型
 */

 function fn3(p0, p1, p2, p3, p4){
    // TODO

    return '2'
  }

  fn3('2', '1', '2', 'bb', '4')

  // 其中 p2、 p3, p4 皆是可选参数的写法，如果有就必须是指定的string类型
  // 必须 与 @ts-check配合使用

  //=========================================


  /**
 * 可以指定 union 类型，如字符串或者布尔值
 * @type {(string | boolean)}
 */
// 这样写只作用于下面第一个变量
let var3 = 1; // 不能将类型“1”分配给类型“string | boolean”。ts(2322)

let a = 2

/**
 * 用 “return” 说明函数的返回值类型
 * @return {number}
 */
 function fn1() {
     return '1' // return '1' :不能将类型“string”分配给类型“number”。
 }

 /**
 * 可以像使用 "@return" 一样使用 "@returns"
 * @returns {{a: string, b: number}}
 */
function fn2() {
    return {a: 1, b :2} // a : 不能将类型“number”分配给类型“string”。
}


/**
 * 用 "@typedef" 自定义复杂类型
 * @typedef {Object} SpecialType - 创建一个新的类型 'SpecialType'
 * @property {string} prop1 - SpecialType 属性 prop1 是 string 类型
 * @property {number} prop2 - SpecialType 属性 prop2 是 number 类型
 * @property {number=} prop3 - SpecialType 属性 prop3 是可选的 number 类型
 * @prop {number} [prop4] - SpecialType 属性 prop4 是可选的 number 类型
 * @prop {number} [prop5=42] - SpecialType 属性 prop5 是可选的 number 类型（默认值 42））
 */
/** @type {SpecialType} */

let specialTypeObject = {
    // 必选
    prop1: 1, // 不能将类型“number”分配给类型“string”
    prop2: true, // 不能将类型“boolean”分配给类型“number”。ts(2322)
    // 可选
    prop3: 2,
    prop4: '4', // 不能将类型“string”分配给类型“number”。ts(2322)
    prop5: 43
}; 

参考资料

https://imweb.io/topic/59e34d90b72024f03c7f495e