TypeScript进阶及JSDoc支持

1,254 阅读3分钟
字面量类型
  • 字符串字面量类型
    • 使用一个字符串字面量类型作为变量的类型
    let hello: 'hello'='hello';
    hello = 'hi'//ts(2322) Type "hi" is not assignable to type "hello"
    
    • 字面量类型组合的联合类型
      • 可以限制函数的参数为指定的字面量类型集合
      • 编译器会检查参数是否是指定的字面量类型集合里的成员
      • 比如使用字面量类型描述了一个明确、可'up'可'down'的集合
    type Direction = 'up' | 'down'
    
    funtion move(dir: Direction){
        //...
    }
    
    move('up');//ok
    move('right');//ts(2345) Argument of type "right" is not assignable to parameter of type 'Direction'
    
  • 数字字面量类型及布尔字面量类型
interface Config{
    size: 'small' | ‘big’;
    isEnable: true | false;
    margin: 0 | 2 | 4; 
}
类型推断
  • 使用类型标注后置的好处是编译器可以通过代码所在的上下文推导其对应的类型,无需再声明变量类型
  • const和let赋值的变量,类型推断后得到的结果大不相同
literal widening 类型拓宽
  • 字面量拓宽:指定的初始值字面量类型拓宽后的类型
  • TypeScript的字面量类型转换为父类型的这种设计称之为'literal widening'
  • 所有通过let或var定义的变量、函数的形参、对象的非只读属性 如果满足指定了初始值且未显示添加类型注解的条件
  • 通过let、var定义的变量如果满足未显示声明类型注解且被赋予了null或undefined值 则推断出这些变量的类型是any
Type Narrowing 类型缩小
  • 在TypeScript中,可以通过某些操作将变量的类型由一个较为宽泛的集合缩小到相对较小、较明确的集合

JSDoc

一、JSDoc与类型检查

.js文件里不支持TypeScript类型标注语法

// 错误'types' can only be used in a .ts file
let x: number

因此,对于.ts文件,需要一种被JavaScript语法所兼容的类型标注方式,比如JSDoc:

/** @type {number} */
let x;
// 错误 Type '"string"' is not assignable to type 'number'
x = 'string'

通过这种特殊形式(以/** 开头)的注释来表达类型,从而兼容JavaScript语法. TypeScript类型系统解析这些JSDoc标记得到额外类型信息输入,并结合类型推断对.js文件进行类型检查

二、支持程度

TypeScript目前(2021/10/25)仅支持部分JSDoc标记,具体如下:可查看更多具体示例

  • @type:描述对象
  • @param(或@arg@argument):描述函数参数
  • @returns(或@return):描述函数返回值
  • @typedef:描述自定义类型
  • @callback:描述回调函数
  • @class(或@constructor):表示该函数应该通过new关键字来调用
  • @this:描述此处this指向
  • @extends(或@augments):描述继承关系
  • @enum:描述一组关联属性
  • @property(或@prop):描述对象属性

特殊的,对于泛型,JSDoc里没有提供合适的标记,因此扩展了额外的标记: