Javascript 项目中使用 typescript(下)

95 阅读2分钟

vscode 可以很方便的演示 JSDoc 的使用效果,如果在 vscode 中遇到 javascript 项目使用 typescript 没有报错提示,可以在设置中勾选 Enable/disable Javascript Validation

image.png

@type

可以使用 @type 标签来引用类型,包括基础类型,比如 string 或者 number;在 typescript 声明中声明,包括全局或者导入的;在 JSDoc @typedef 标签中声明。

image.png

上面的例子中,使用 @type 标签声明 x 是 number 类型的。当 x 在被赋值为字符串的时候就会出现错误提示 Type 'string' is not assignable to type 'number'

@param 和 @returns

@param 的语法类似于 @type,不过它还有一个参数,给这个参数加上中括号表明参数是可选的。

image.png

p1 是必填参数,p2 是选填参数,test 函数最后会返回一个字符串。

@typedef

可以使用 @typedef 定义一个复杂类型

image.png

这里定义了一个 SpecialType 类型的 object,它包含必填属性 prop1 和可选属性 prop2。

@template

使用 @template 可以创建通用的方法,类和类型

image.png

使用 @template 创建 T 类型后,传入的 x 需要满足是 T 类型,返回的数据也必须是 T 类型,也就是说 test 函数的传入和返回值的类型需要一致。

属性修饰符和 @readonly

@public,@private,@protected 的行为类似于 typescript 的 public,private,protected。@public 表明属性可以在任意位置使用,@private 表明属性只能在当前类中使用,@protected 表明属性可以在当前类和派生类中使用,但是不能在当前类的实例中使用。

@readonly 确保属性只在初始化的时候写入。

image.png

在 C 类中,有一个使用 @private 和 @readonly 的 name 属性,它在 run 方法中再次赋值会报错,创建实例后去引用也会出现报错。

小结

本文主要介绍了 JSDoc 中常用的 @type,@param,@returns,@typedef,@template,属性修饰符和 @readonly。可以看出,为了在 javascript 环境中实现 typescript 的类型语法,JSDoc 提供了很多类型标签,同时尽量按照 typescript 的类型风格进行实现。

参考资料:www.typescriptlang.org/docs/handbo…