一文学懂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

（编辑：核心网）

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