轉(zhuǎn)發(fā) ## TypeScript基礎(chǔ)入門之Javascript文件類型檢查(三)

繼續(xù)上篇文章【TypeScript基礎(chǔ)入門之Javascript文件類型檢查(二)】

支持JSDoc

下面的列表概述了使用JSDoc注釋在JavaScript文件中提供類型信息時(shí)當(dāng)前支持的構(gòu)造。

請(qǐng)注意，尚不支持下面未明確列出的任何標(biāo)記（例如@async）。

• @type
• @param (or @arg or @argument)
• @returns (or @return)
• @typedef
• @callback
• @template
• @class (or @constructor)
• @this
• @extends (or @augments)
• @enum

含義通常與usejsdoc.org上給出的標(biāo)記含義相同或超??集。下面的代碼描述了這些差異，并給出了每個(gè)標(biāo)記的一些示例用法。

@type

您可以使用”@type“標(biāo)記并引用類型名稱（原語(yǔ)，在TypeScript聲明中定義，或在JSDoc”@typedef“標(biāo)記中）。您可以使用任何Typescript類型和大多數(shù)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可以指定聯(lián)合類型 - 例如，某些東西可以是字符串或布爾值。

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

請(qǐng)注意，括號(hào)對(duì)于聯(lián)合類型是可選的。

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

您可以使用各種語(yǔ)法指定數(shù)組類型：

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

您還可以指定對(duì)象文字類型。例如，具有屬性’a’（字符串）和’b’（數(shù)字）的對(duì)象使用以下語(yǔ)法：

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

您可以使用標(biāo)準(zhǔn)JSDoc語(yǔ)法或Typescript語(yǔ)法，使用字符串和數(shù)字索引簽名指定類似地圖和類似數(shù)組的對(duì)象。

/**
 * 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 }。編譯器理解這兩種語(yǔ)法。

您可以使用Typescript或Closure語(yǔ)法指定函數(shù)類型：

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

或者您可以使用未指定的函數(shù)類型：

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

Closure的其他類型也有效：

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

類型轉(zhuǎn)換

Typescript借用了Closure的強(qiáng)制語(yǔ)法。這允許您通過(guò)在任何帶括號(hào)的表達(dá)式之前添加@type標(biāo)記將類型轉(zhuǎn)換為其他類型。

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

導(dǎo)入類型

您還可以使用導(dǎo)入類型從其他文件導(dǎo)入聲明。此語(yǔ)法是特定于Typescript的，與JSDoc標(biāo)準(zhǔn)不同：

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

導(dǎo)入類型也可以在類型別名聲明中使用：

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

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

如果你不知道類型，或者它有一個(gè)令人討厭的大型類型，可以使用import類型從模塊中獲取值的類型：

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

未完待續(xù)…