TypeScript 3.1介绍

由 Carrie 创建, 最后一次修改 2018-10-29

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]中,有两个数字命名的属性:01。当给出这样的元组时,MapToPromise将创建一个新的元组,其中01属性是原始类型的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)上表达常用模式,例如defaultPropspropTypes

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/*"] }
  }
}
以上内容是否对您有帮助:
二维码
建议反馈
二维码