一文学懂TypeScript的类型

你可以看到类型参数 T 在 Stack 的主体内出现两次。因此，该接口可以直观地理解如下：

•  Stack 是一堆值，它们都具有给定的类型 T。每当你提到 Stack 时，必须写 T。接下来我们会看到究竟该怎么用。
•  方法 .push() 接受类型为 T 的值。
•  方法 .pop() 返回类型为 T 的值。

如果使用 Stack，则必须为 T 指定一个类型。以下代码显示了一个虚拟栈，其唯一目的是匹配接口。

const dummyStack: Stack<number> = {  
  push(x: number) {},  
  pop() { return 123 },  
}; 

例子：map

map 在 TypeScript 中的定义。例如：

const myMap: Map<boolean,string> = new Map([  
  [false, 'no'],  
  [true, 'yes'],  
]); 

函数的类型变量

函数（和方法）也可以引入类型变量：

function id<T>(x: T): T {  
  return x;  
} 

你可以按以下方式使用此功能。

id<number>(123); 

由于类型推断，还可以省略类型参数：

id(123); 

传递类型参数

函数可以将其她的类型参数传给接口、类等：

function fillArray<T>(len: number, elem: T) {  
  return new Array<T>(len).fill(elem);  
} 

类型变量 T 在这段代码中出现三次：

•  fillArray<T>：引入类型变量
•  elem:T：使用类型变量，从参数中选择它。
•  Array<T>：将 T 传递给 Array 的构造函数。

这意味着：我们不必显式指定Array<T>的类型 T —— 它是从参数 elem中推断出来的：

const arr = fillArray(3, '*');  
  // Inferred type: string[] 

总结

让我们用前面学到的知识来理解最开始看到的那段代码：

interface Array<T> {  
  concat(...items: Array<T[] | T>): T[];  
  reduce<U>(  
    callback: (state: U, element: T, index: number, array: T[]) => U,  
    firstState?: U): U;  
  ···  
} 

这是一个Array的接口，其元素类型为 T，每当使用这个接口时必须填写它：

•  方法.concat()有零个或多个参数（通过 rest 运算符定义）。其中每一个参数中都具有类型 T[]|T。也就是说，它是一个 T 类型的数组或是一个 T 值。
•  方法.reduce() 引入了自己的类型变量 U。 U 表示以下实体都具有相同的类型（你不需要指定，它是自动推断的）：
  •   Parameter state of callback() (which is a function)
  •   state 是 callback() 的参数（这是一个函数）
    •   Result of callback() 
  •   callback()的返回
  •    reduce()的可选参数 firstState
    •   Result of .reduce() 
  •    reduce()的返回

callback 还将获得一个 element 参数，其类型与 Array 元素具有相同的类型 T，参数 index 是一个数字，参数 array 是 T 的值。

（编辑：晋中站长网）

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