TypeScript 入门教程 TypeScript 3.1介绍

元组和数组上的映射类型

在 TypeScript 3.1 中，元组和数组上的映射对象类型现在产生新的元组/数组，而不是创建一个新的类型，其中的成员，比如push()，pop()和length将被转换。例如：

type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> };
type Coordinate = [number, number]
type PromiseCoordinate = MapToPromise<Coordinate>; // [Promise<number>, Promise<number>]

MapToPromise使用一种类型T，当该类型是一个元组，例如Coordinate，它只转换数字属性。在[number, number]中，有两个数字命名的属性：0和1。当给出这样的元组时，MapToPromise将创建一个新的元组，其中0和1属性是原始类型的Promises。因此，结果类型PromiseCoordinate最终会得到类型[Promise<number>, Promise<number>]。

函数的属性声明

TypeScript 3.1 能够在函数声明和const-declared functons 上定义属性，只需在同一范围内分配这些函数的属性即可。这允许我们编写规范的JavaScript代码而不求助于namespace。例如：

function readImage(path: string, callback: (err: any, image: Image) => void) {
    // ...
}
readImage.sync = (path: string) => {
    const contents = fs.readFileSync(path);
    return decodeImageSync(contents);
}

在这里，我们有一个以非阻塞异步方式读取图像的readImage函数。除了readImage外，我们在readImage提供了一个方便的函数，名为readImage.sync。

虽然ECMAScript导出通常是提供此功能的更好方式，但这种新的支持允许使用此样式编写的代码“仅仅工作” TypeScript。另外，这种属性声明方法让我们在React无状态功能组件(SFCs)上表达常用模式，例如defaultProps和propTypes。

export const FooComponent => ({ name }) => (
    <div>Hello! I am {name}</div>
);
FooComponent.defaultProps = {
    name: "(anonymous)",
};

更具体地说，同态映射类型类似于上面的形式。

使用 typesVersions 进行版本选择

来自社区的反馈以及相关的经验告诉我们，利用最新的TypeScript功能同时也容纳旧版本的用户是很困难的。TypeScript引入了一项名为typesVersions的新功能，以帮助满足这些方案。

在 TypeScript 3.1 中使用节点模块分辨率时，当 TypeScript 破解打开package.json文件以确定需要读取哪些文件时，它首先会查看名为typesVersions的新字段。带有typesVersions字段的package.json可能如下所示：

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    ">=3.1": { "*": ["ts3.1/*"] }
  }
}

这package.json告诉TypeScript检查当前版本的TypeScript是否正在运行。如果它是3.1或更高版本，它会计算出您相对于包导入的路径，并从包的ts3.1文件夹中读取。这就是{ "*": ["ts3.1/*"] }表达的意思 - 如果你现在熟悉路径映射，它的工作原理就是这样的。

因此，在上面的示例中，如果我们从"package-name"中导入，在TypeScript 3.1中运行时，我们将尝试从[...]/node_modules/package-name/ts3.1/index.d.ts（和其他相关路径）解析。如果我们从package-name/foo导入，我们将尝试寻找[...]/node_modules/package-name/ts3.1/foo.d.ts和[...]/node_modules/package-name/ts3.1/foo/index.d.ts。

如果我们在这个例子中没有在 TypeScript 3.1 中运行怎么办？好吧，如果typesVersions中没有匹配的字段，TypeScript会回退到types字段，因此 TypeScript 3.0 及更早版本将被重定向到[...]/node_modules/package-name/index.d.ts。

匹配行为

TypeScript决定编译器和语言版本是否匹配的方式是使用Node的semver范围。

多个字段

typesVersions可以支持多个字段，其中每个字段名称由要匹配的范围指定。

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    ">=3.2": { "*": ["ts3.2/*"] },
    ">=3.1": { "*": ["ts3.1/*"] }
  }
}

由于范围可能会重叠，因此确定应用哪种重定向是特定于订单的。这意味着在上面的示例中，即使>=3.2和>=3.1匹配器都支持 TypeScript 3.2 及更高版本，反转顺序也可能有不同的行为，因此上述示例将不等同于以下示例：

{
  "name": "package-name",
  "version": "1.0",
  "types": "./index.d.ts",
  "typesVersions": {
    // NOTE: this doesn't work!
    ">=3.1": { "*": ["ts3.1/*"] },
    ">=3.2": { "*": ["ts3.2/*"] }
  }
}