一文学懂TypeScript的范例

数组 arr 被用作列表有两种要领暗示 ，其元素都是数字：

let arr: number[] = [];  
let arr: Array<number> = []; 

凡是假如存在赋值的话，TypeScript 就可以揣度变量的范例。在这种环境下，现实上你必需帮它办理范例题目，由于在行使空数组时，它无法确定元素的范例。

稍后我们将回到尖括号暗示法（Array<number>）。

数组作为元组

假如你想在数组中存储二维坐标点，那么就可以把这个数组看成元组去用。看上去是这个样子：

let point: [number, number] = [7, 5]; 

在这种环境下，你不必要范例注释。

其它一个例子是 Object.entries(obj) 的返回值：一个带有一个 [key，value] 对的数组，它用于描写 obj 的每个属性。

> Object.entries({a:1, b:2})  
[ [ 'a', 1 ], [ 'b', 2 ] ] 

Object.entries() 的返回值范例是：

Array<[string, any]> 

函数范例

以下是函数范例的例子：

(num: number) => string 

这个范例是一个函数，它接管一个数字范例参数而且返回值为字符串。在范例注释中行使这种范例（String 在这里是个函数）的例子：

const func: (num: number) => string = String; 

同样，我们一样平常不会在这里行使范例注释，由于 TypeScript 知道 String 的范例，因此可以揣度出 func 的范例。

以下代码是一个更现实的例子：

function stringify123(callback: (num: number) => string) {  
  return callback(123);  
} 

因为我们行使了函数范例来描写 stringify123() 的参数 callback，以是TypeScript 拒绝以下函数挪用。

f(Number); 

但它接管以下函数挪用：

f(String); 

函数声明的返回范例

对函数的全部参数举办注释是一个很好的做法。你还可以指定返回值范例（不外 TypeScript 很是善于去揣度它）：

function stringify123(callback: (num: number) => string): string {  
  const num = 123;  
  return callback(num);  
} 

非凡返回值范例 void

void 是函数的非凡返回值范例：它汇报 TypeScript 函数老是返回 undefined（显式或隐式）：

function f1(): void { return undefined } // OK  
function f2(): void { } // OK  
function f3(): void { return 'abc' } // error 

可选参数

标识符后头的问号暗示该参数是可选的。譬喻：

function stringify123(callback?: (num: number) => string) {  
  const num = 123;  
  if (callback) {  
    return callback(num); // (A)  
  }  
  return String(num);  
} 

在 --strict 模式下运行 TypeScript 时，假如事先搜查时发明 callback 没有被省略，它只应承你在 A 行举办函数挪用。

参数默认值

TypeScript支持 ES6 参数默认值：

function createPoint(x=0, y=0) {  
  return [x, y];  
} 

默认值可以使参数可选。凡是可以省略范例注释，由于 TypeScript 可以揣度范例。譬喻它可以揣度出 x 和 y 都是 number 范例。

假如要添加范例注释，应该这样写：

function createPoint(x:number = 0, y:number = 0) {  
  return [x, y];  
} 

rest 范例

你还可以用 ES6 rest operator 举办 TypeScript 参数界说。响应参数的范例必需是数组：

function joinNumbers(...nums: number[]): string {  
    return nums.join('-');  
}  
joinNumbers(1, 2, 3); // '1-2-3' 

Union

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!