Skip to content

Commit

Permalink
doc: update docs/typescript.md
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Mar 13, 2023
1 parent 8f21179 commit 881fd36
Showing 1 changed file with 242 additions and 0 deletions.
242 changes: 242 additions & 0 deletions docs/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -1634,6 +1634,248 @@ declare namespace MyClass {
```
<!--rehype:className=wrap-text-->

JSDoc 参考
---

### @type
<!--rehype:wrap-class=row-span-2-->

```javascript
/** @type {string} */
var s;
/** @type {Window} */
var win;
/** @type {PromiseLike<string>} */
var promisedString;
// 您可以指定具有 DOM 属性的 HTML 元素
/** @type {HTMLElement} */
var elm = document.querySelector(selector);
elm.dataset.myData = "";
/** @type {number[]} */
var ns;
/** @type {Array.<number>} */
var jsdoc;
/** @type {Array<number>} */
var nas;
/** @type {string | boolean} */
var sb;
/** @type {{ a: string, b: number }} */
var var9;
/**
* 将任意“字符串”属性映射到“数字”的类地图对象
* @type {Object.<string, number>}
*/
var stringToNumber;
/** @type {Object.<number, object>} */
var arrayLike;
/** @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;
/**
* @type {*} - can be 'any' type
*/
var star;
/**
* @type {?} - unknown type (same as 'any')
*/
var question;
/** @type {number | string} */
var numberOrString = Math.random() < 0.5 ? "hello" : 100;
var typeAssertedNumber = /** @type {number} */ (numberOrString);
let one = /** @type {const} */(1);
```

### 导入类型

```javascript
// @filename: types.d.ts
export type Pet = {
name: string,
};
// @filename: main.js
/** @param { import("./types").Pet } p */
function walk(p) {
console.log(`Walking ${p.name}...`);
}
```

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

```javascript
/**
* @typedef {import("./types").Pet} Pet
*/
/** @type {Pet} */
var myPet;
myPet.name;
```

如果您不知道类型,或者如果它有一个很烦人的大类型,`import types` 可以用来从模块中获取值的类型:

```javascript
/**
* @type {typeof import("./accounts").userAccount}
*/
var x = require("./accounts").userAccount;
```

### @param@returns

```javascript
/**
* @param {string} p1 - 一个字符串参数
* @param {string=} p2 - 可选参数(Google Closure 语法)
* @param {string} [p3] - 另一个可选参数(JSDoc 语法)
* @param {string} [p4="test"] - 具有默认值的可选参数
* @returns {string} 这是结果
*/
function stringsStrings(p1, p2, p3, p4) {
// TODO
}
```

同样,对于函数的返回类型:

```javascript
/**
* @return {PromiseLike<string>}
*/
function ps() {}

/**
* @returns {{ a: string, b: number }} - 可以使用“@returns”和“@return
*/
function ab() {}
```

### @typedef, @callback, 和 @param
<!--rehype:wrap-class=col-span-2 row-span-2-->

```javascript
/**
* @typedef {Object} SpecialType - 创建一个名为“SpecialType”的新类型
* @property {string} prop1 - SpecialType 的字符串属性
* @property {number} prop2 - SpecialType 的数字属性
* @property {number=} prop3 - SpecialType 的可选数字属性
* @prop {number} [prop4] - SpecialType 的可选数字属性
* @prop {number} [prop5=42] - 具有默认值的 SpecialType 的可选数字属性
*/

/** @type {SpecialType} */
var specialTypeObject;
specialTypeObject.prop3;
```

您可以在第一行使用 object 或 Object

```javascript
/**
* @typedef {object} SpecialType1 - 创建一个名为“SpecialType”的新类型
* @property {string} prop1 - SpecialType 的字符串属性
* @property {number} prop2 - SpecialType 的数字属性
* @property {number=} prop3 - SpecialType 的可选数字属性
*/

/** @type {SpecialType1} */
var specialTypeObject1;
```

**@param** 允许对一次性类型规范使用类似的语法。 请注意,嵌套的属性名称必须以参数名称为前缀:

```javascript
/**
* @param {Object} options - 形状和上面的SpecialType一样
* @param {string} options.prop1
* @param {number} options.prop2
* @param {number=} options.prop3
* @param {number} [options.prop4]
* @param {number} [options.prop5=42]
*/
function special(options) {
return (options.prop4 || 1001) + options.prop5;
}
```

**@callback** 类似于 **@typedef**,但它指定的是函数类型而不是对象类型:

```javascript
/**
* @callback Predicate
* @param {string} data
* @param {number} [index]
* @returns {boolean}
*/

/** @type {Predicate} */
const ok = (s) => !(s.length % 2);
```

当然,这些类型中的任何一种都可以在单行 **@typedef** 中使用 TypeScript 语法声明:

```javascript
/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
/** @typedef {(data: string, index?: number) => boolean} Predicate */
```

### @template

您可以使用 **@template** 标记声明类型参数。 这使您可以创建通用的函数、类或类型:

```javascript
/**
* @template T
* @param {T} x - 流向返回类型的通用参数
* @returns {T}
*/
function id(x) {
return x;
}

const a = id("string");
const b = id(123);
const c = id({});
```

使用逗号或多个标签来声明多个类型参数:

```javascript
/**
* @template T,U,V
* @template W,X
*/
```

您还可以在类型参数名称之前指定类型约束。 只有列表中的第一个类型参数受到约束:

```javascript
/**
* @template {string} K - K 必须是字符串或字符串文字
* @template {{ serious(): string }} Seriousalizable - 一定要有 serious 的方法
* @param {K} key
* @param {Seriousalizable} object
*/
function seriousalize(key, object) {
// ????
}
```

最后,您可以为类型参数指定默认值:

```javascript
/** @template [T=object] */
class Cache {
/** @param {T} initial */
constructor(T) {
}
}
let c = new Cache()
```

CLI
---

Expand Down

0 comments on commit 881fd36

Please sign in to comment.