TypeScript基礎入門之Javascript文件類型檢查(三)

轉發 TypeScript基礎入門之Javascript文件類型檢查(三)

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

支持JSDoc

下面的列表概述了使用JSDoc註釋在JavaScript文件中提供類型信息時當前支持的構造。

請注意，尚不支持下面未明確列出的任何標記（例如@async）。

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

含義一般與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;

未完待續…