创新互联TypeScript教程：TypeScript3.1介绍

元组和数组上的映射类型

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

成都创新互联长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为坊子企业提供专业的网站设计制作、成都网站设计，坊子网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

type MapToPromise = { [K in keyof T]: Promise };

type Coordinate = [number, number]

type PromiseCoordinate = MapToPromise; // [Promise, Promise]

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

函数的属性声明

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 }) => (
    Hello! I am {name}
);

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/*"] }
  }
}

网页题目：创新互联TypeScript教程：TypeScript3.1介绍
网站路径：http://www.shufengxianlan.com/qtweb/news7/36707.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容