TypeScript基础入门之Javascript文件类型检查(三)

原创
2018/10/31 09:48
阅读数 40

转发 TypeScript基础入门之Javascript文件类型检查(三)

继续上篇文章【TypeScript基础入门之Javascript文件类型检查(二)

支持JSDoc

下面的列表概述了使用JSDoc注释在JavaScript文件中提供类型信息时当前支持的构造。

请注意,尚不支持下面未明确列出的任何标记(例如@async)。

含义通常与usejsdoc.org上给出的标记含义相同或超​​集。下面的代码描述了这些差异,并给出了每个标记的一些示例用法。

@type

您可以使用”@type“标记并引用类型名称(原语,在TypeScript声明中定义,或在JSDoc”@typedef“标记中)。您可以使用任何Typescript类型和大多数JSDoc类型。

/**
 * @type {string}
 */
var s;

/** @type {Window} */
var win;

/** @type {PromiseLike<string>} */
var promisedString;

// You can specify an HTML Element with DOM properties
/** @type {HTMLElement} */
var myElement = document.querySelector(selector);
element.dataset.myData = '';

@type可以指定联合类型 - 例如,某些东西可以是字符串或布尔值。

/**
 * @type {(string | boolean)}
 */
var sb;

请注意,括号对于联合类型是可选的。

/**
 * @type {string | boolean}
 */
var sb;

您可以使用各种语法指定数组类型:

/** @type {number[]} */
var ns;
/** @type {Array.<number>} */
var nds;
/** @type {Array<number>} */
var nas;

您还可以指定对象文字类型。例如,具有属性’a’(字符串)和’b’(数字)的对象使用以下语法:

/** @type {{ a: string, b: number }} */
var var9;

您可以使用标准JSDoc语法或Typescript语法,使用字符串和数字索引签名指定类似地图和类似数组的对象。

/**
 * A map-like object that maps arbitrary `string` properties to `number`s.
 *
 * @type {Object.<string, number>}
 */
var stringToNumber;

/** @type {Object.<number, object>} */
var arrayLike;

前两种类型等同于Typescript类型{ [x: string]: number }和{ [x: number]: any }。编译器理解这两种语法。

您可以使用Typescript或Closure语法指定函数类型:

/** @type {function(string, boolean): number} Closure syntax */
var sbn;
/** @type {(s: string, b: boolean) => number} Typescript syntax */
var sbn2;

或者您可以使用未指定的函数类型:

/** @type {Function} */
var fn7;
/** @type {function} */
var fn6;

Closure的其他类型也有效:

/**
 * @type {*} - can be 'any' type
 */
var star;
/**
 * @type {?} - unknown type (same as 'any')
 */
var question;

类型转换

Typescript借用了Closure的强制语法。这允许您通过在任何带括号的表达式之前添加@type标记将类型转换为其他类型。

/**
 * @type {number | string}
 */
var numberOrString = Math.random() < 0.5 ? "hello" : 100;
var typeAssertedNumber = /** @type {number} */ (numberOrString)

导入类型

您还可以使用导入类型从其他文件导入声明。此语法是特定于Typescript的,与JSDoc标准不同:

/**
 * @param p { import("./a").Pet }
 */
function walk(p) {
    console.log(`Walking ${p.name}...`);
}

导入类型也可以在类型别名声明中使用:

/**
 * @typedef Pet { import("./a").Pet }
 */

/**
 * @type {Pet}
 */
var myPet;
myPet.name;

如果你不知道类型,或者它有一个令人讨厌的大型类型,可以使用import类型从模块中获取值的类型:

/**
 * @type {typeof import("./a").x }
 */
var x = require("./a").x;

未完待续…

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部