尧图网站建设 
文档教程【免费下载链接】TypeScriptTypeScript 使用手册中文版翻译。http://www.typescriptlang.org项目地址https://gitcode.com/gh_mirrors/typ/TypeScript点击查看免费下载本文基于本仓库中 TypeScript 1.7 版本发布说明 展开系统梳理 TypeScript 1.7 引入的六大核心变化面向 ES6 的async/await异步函数、--target ES6与--module的联合使用、全新的多态this类型、ES7 幂运算符、对象/数组字面量解构的类型检查改进以及装饰器向 ES3 的编译支持。阅读本文后你将能够理解这些特性的适用场景与运行前提掌握其在tsconfig.json中的配置方法并能在继承、链式调用、异步流程等典型场景中直接应用。一、支持async/await编译到 ES6Node v4TypeScript 1.7 正式支持异步函数但有一个明确的运行时前提只能在已经原生支持 ES6 generator 的引擎上使用典型代表是 Node v4 及以上版本。这是因为编译器在 ES6 目标下会借助 generator 的暂停/恢复语义来实现await的挂起逻辑而较老的 ES3/ES5 运行时没有这一底层能力。语法上异步函数以async关键字前置标记await会暂停当前函数的执行直到其后所跟的 Promise 被 fulfill兑现后才取得它的值并继续运行。async函数的返回值类型必须是兼容 Promise 的类型——这在 TypeScript 1.6 版本说明 中被称为“试验性支持”而 1.7 将其正式化。典型示例延时逐条打印下面的例子中输入的内容会每隔 400 毫秒被逐个打印出来use strict; // printDelayed 返回值是一个 Promisevoid async function printDelayed(elements: string[]) { for (const element of elements) { await delay(400); console.log(element); } } async function delay(milliseconds: number) { return new Promisevoid(resolve { setTimeout(resolve, milliseconds); }); } printDelayed([Hello, beautiful, asynchronous, world]).then(() { console.log(); console.log(打印每一个内容!); });要点拆解delay返回一个Promisevoid由setTimeout在指定毫秒数后调用resolve完成兑现printDelayed内每次await delay(400)都会让出执行权待 400 毫秒后恢复从而形成“逐条延迟打印”的效果printDelayed(...).then(...)展示了async函数返回的 Promise 可以被继续链式消费。注意for...of在此处的使用与 generator 迭代器体系一脉相承——可迭代对象的Symbol.iterator约定可参考仓库中的 Iterators 和 Generators 文档当目标为 ES6 及以上时编译器会直接生成引擎内置的迭代器实现。运行前提与编译目标由于async/await依赖 generator 语义必须将编译目标设为 ES6--target ES6且运行环境需原生支持 ES6 generator。1.6 版本中异步函数还只是“编译到 ES6 时的试验性支持”1.7 则将其作为正式能力同时伴随后文介绍的“--target ES6与--module可同时使用”让异步代码在不同模块体系下都能按需编译。二、支持同时使用--target ES6和--module在 TypeScript 1.7 之前选择 ES6 作为编译目标时对模块格式的限制较多1.7 将ES6添加到了--module选项的支持列表当编译到 ES6 时允许显式指定模块类型。这让开发者可以针对具体运行时的需求选择最合适的特性组合例如在 ES6 目标下仍输出 AMD 格式的模块交由 RequireJS 等加载器使用。配置示例{ compilerOptions: { module: amd, target: es6 } }编译选项取值参考结合仓库中的 编译选项 文档--module支持的值包括None、CommonJS、AMD、System、UMD、ES6或ES2015。几个值得注意的约束只有AMD和System能和--outFile一起使用合并输出到单一文件ES6和ES2015也可用于目标输出为ES5或更低版本的情况未显式指定时--module的默认值取决于--target当target ES6时为ES6否则为commonjs模块解析策略--moduleResolution的默认值也随模块类型变化AMD、System、ES6时为Classic其余为Node。这些选项可以通过命令行tsc --module amd --target es6传入也可以在 tsconfig.json 的compilerOptions中集中配置。--target本身支持ES3默认、ES5、ES6/ES2015及后续更高版本详见 编译选项。三、this类型让链式 API 在继承中保持类型连贯在方法中返回当前对象即this是构建链式 API 的常见方式。TypeScript 1.7 之前类实例方法中this被推断为具体的类类型导致继承场景下的链式调用丢失子类成员1.7 起编译器在类的实例方法中会将this推断为一个特殊类型——this类型字面写作this可以大致理解为“方法调用时点左边那个表达式的类型”。基础示例BasicCalculatorexport default class BasicCalculator { public constructor(protected value: number 0) {} public currentValue(): number { return this.value; } public add(operand: number) { this.value operand; return this; } public subtract(operand: number) { this.value - operand; return this; } public multiply(operand: number) { this.value * operand; return this; } public divide(operand: number) { this.value / operand; return this; } }使用者可以这样表述2 * 5 1import calc from ./BasicCalculator; let v new calc(2).multiply(5).add(1).currentValue();这种优雅的链式写法在继承面前曾有一个问题。假设使用者编写了ScientificCalculatorimport BasicCalculator from ./BasicCalculator; export default class ScientificCalculator extends BasicCalculator { public constructor(value 0) { super(value); } public square() { this.value this.value ** 2; return this; } public sin() { this.value Math.sin(this.value); return this; } }因为BasicCalculator的方法过去被推断为返回BasicCalculator当在ScientificCalculator实例上调用继承自BasicCalculator的方法时类型系统无法正确保留子类信息import calc from ./ScientificCalculator; let v new calc(0.5) .square() .divide(2) .sin() // Error: BasicCalculator 没有 sin 方法. .currentValue();在 TypeScript 1.7 中这不再是问题divide继承自BasicCalculator返回的this类型在ScientificCalculator实例上就是ScientificCalculator因此后续.sin()可以被正确解析链式调用全程保持子类类型。this类型与 mixin 风格交叉类型this类型还非常适合描述使用了 mixin 风格继承的库如 Ember.js的交叉类型interface MyType { extendT(other: T): this T; }extend的返回值this T表示“当前类型与混入类型 T 的交叉”每次调用都会把新混入的成员并入当前实例类型。这一特性在本仓库的 高级类型 文档中被称为多态的this类型它表示某个包含类或接口的子类型属于 F-bounded 多态的一种应用相关讨论见 TypeScript 1.8 版本说明 中的“类型参数约束”。没有this类型时ScientificCalculator无法在继承BasicCalculator的同时保持接口连贯性——multiply会返回缺少sin方法的BasicCalculator使用this类型后multiply返回的this在此处即ScientificCalculator。关于 mixin 模式在 TypeScript 中的完整实践可参考仓库中的 混入Mixins 文档。四、ES7 幂运算符**与**TypeScript 1.7 支持将在 ES7/ES2016 中增加的幂运算符**求幂与**求幂并赋值。这些运算符在编译到 ES3/ES5 目标时会被转换为Math.pow调用因此旧运行环境也能直接运行。示例与编译输出输入var x 2 ** 3; var y 10; y ** 2; var z -(4 ** 3);生成ES3/ES5 目标下的 JavaScriptvar x Math.pow(2, 3); var y 10; y Math.pow(y, 2); var z -Math.pow(4, 3);可见**展开为对左操作数的重新赋值而一元负号-(4 ** 3)会先计算幂再取负生成-Math.pow(4, 3)。开发者可以放心在源码中使用更清晰的幂语法编译器负责向旧目标的降级转换。五、改进对象字面量与数组解构的类型检查TypeScript 1.7 使对象和数组字面量在通过与之对应的解构绑定进行类型推断时的检查更加直观和自然。对象字面量解构的检查规则当一个对象字面量通过与之对应的对象解构绑定推断类型时遵循以下规则对象解构绑定中有默认值的属性对于对象字面量来说是可选的对象解构绑定中的属性如果在对象字面量中没有匹配的值则该属性必须有默认值并且会被添加到对象字面量的类型中对象字面量中的属性必须在对象解构绑定中存在多余属性会报错。数组字面量解构的检查规则当一个数组字面量通过与之对应的数组解构绑定推断类型时数组解构绑定中的元素如果在数组字面量中没有匹配的值则该元素必须有默认值并且会被添加到数组字面量的类型中。示例// f1 的类型为 (arg?: { x?: number, y?: number }) void function f1({ x 0, y 0 } {}) {} // 以下调用都是合法的 f1(); f1({}); f1({ x: 1 }); f1({ y: 1 }); f1({ x: 1, y: 1 }); // f2 的类型为 (arg?: { x: number, y?: number }) void function f2({ x, y 0 } { x: 0 }) {} f2(); f2({}); // 错误, x 非可选 f2({ x: 1 }); f2({ y: 1 }); // 错误, x 非可选 f2({ x: 1, y: 1 });解读f1中两个解构属性都有默认值因此对象字面量的x、y都变为可选f2中x没有默认值它在解构绑定中成为必需属性因此f2({})和f2({ y: 1 })会因缺少x而报错。这套规则让“默认值 ⇒ 可选”的心智模型与直觉一致同时保留了多余属性检查该检查在 1.6 中已收紧见 TypeScript 1.6 版本说明 的“更严格的对象字面量赋值检查”。六、装饰器支持编译到 ES3装饰器Decorators是 TypeScript 中以元编程方式标注和修改类及其成员的实验性特性启用方式见 装饰器 文档中的--experimentalDecorators选项。TypeScript 1.7 之前装饰器只能编译到 ES5 及以上1.7 起装饰器可以编译到 ES3。具体的实现变化是编译器的__decorate辅助函数中移除了 ES5 才有的reduceRight并内联了对Object.getOwnPropertyDescriptor和Object.defineProperty的调用。这样既消除了对 ES5 专属 API 的依赖又保持了向后兼容——ES5 目标的输出也能消除此前重复出现的Object方法调用。这一改动让使用装饰器的代码可以服务于更广泛的运行时环境例如完全 ES3 的旧浏览器或嵌入式环境同时未破坏已有的 ES5 输出质量。七、总结与相关文档TypeScript 1.7 是一个“承上启下”的版本它把 1.6 中试验性的async函数正式化TypeScript 1.6 版本说明引入了影响深远的多态this类型后续在 高级类型 中形成完整章节并通过幂运算符、解构检查与 ES3 装饰器支持扩大了语言的表达力与运行环境的覆盖面其后的 1.8 版本则继续在类型系统类型参数约束、控制流分析上深化见 TypeScript 1.8 版本说明。如需进一步查阅本文涉及的编译选项与配置方式可参考编译选项--module、--target、--experimentalDecorators等选项的完整取值与默认值tsconfig.json项目级编译配置的组织方式高级类型多态的 this 类型this类型在链式继承中的系统化讲解装饰器装饰器语法、工厂与组合规则Iterators 和 Generatorsasync/await底层依赖的迭代与生成器机制混入Mixinsthis类型在混合继承模式中的应用注意本文所述特性均以 TypeScript 1.7 时代的编译行为为准async/await面向 ES6 的编译需要运行环境原生支持 ES6 generator如 Node v4这是使用该特性时最重要的前提约束。赞分享文档教程【免费下载链接】TypeScriptTypeScript 使用手册中文版翻译。http://www.typescriptlang.org项目地址https://gitcode.com/gh_mirrors/typ/TypeScript点击查看免费下载相关推荐TypeScript 1.7 破坏性改动深度解析多态 this 类型推断与类成员修饰符后的分号自动插入TypeScript 1.7 破坏性改动深度解析多态 this 类型推断与类成员修饰符后的分号自动插入 TypeScript 1.7 引入了两项会影响既有代码文档教程高效分页利器will_paginate 项目推荐高效分页利器will_paginate 项目推荐 项目介绍 在现代Web应用开发中分页功能几乎是不可或缺的一部分。无论是展示大量数据还是优化用户体验分页都文档教程TypeScript异步编程Promise、async/await和生成器详解TypeScript异步编程Promise、async/await和生成器详解 TypeScript异步编程是现代JavaScript开发的核心技能掌握Pr教程上一篇Void 代码库完全指南AI 编辑器架构、双进程模型、LLM 消息管线与 Apply 机制深度解析下一篇如何自定义 react-native-keyboard-aware-scroll-view 行为配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TypeScript 1.7 新特性详解：async/await、多态 this 类型与编译目标扩展
文档教程【免费下载链接】TypeScriptTypeScript 使用手册中文版翻译。http://www.typescriptlang.org项目地址https://gitcode.com/gh_mirrors/typ/TypeScript点击查看免费下载本文基于本仓库中 TypeScript 1.7 版本发布说明 展开系统梳理 TypeScript 1.7 引入的六大核心变化面向 ES6 的async/await异步函数、--target ES6与--module的联合使用、全新的多态this类型、ES7 幂运算符、对象/数组字面量解构的类型检查改进以及装饰器向 ES3 的编译支持。阅读本文后你将能够理解这些特性的适用场景与运行前提掌握其在tsconfig.json中的配置方法并能在继承、链式调用、异步流程等典型场景中直接应用。一、支持async/await编译到 ES6Node v4TypeScript 1.7 正式支持异步函数但有一个明确的运行时前提只能在已经原生支持 ES6 generator 的引擎上使用典型代表是 Node v4 及以上版本。这是因为编译器在 ES6 目标下会借助 generator 的暂停/恢复语义来实现await的挂起逻辑而较老的 ES3/ES5 运行时没有这一底层能力。语法上异步函数以async关键字前置标记await会暂停当前函数的执行直到其后所跟的 Promise 被 fulfill兑现后才取得它的值并继续运行。async函数的返回值类型必须是兼容 Promise 的类型——这在 TypeScript 1.6 版本说明 中被称为“试验性支持”而 1.7 将其正式化。典型示例延时逐条打印下面的例子中输入的内容会每隔 400 毫秒被逐个打印出来use strict; // printDelayed 返回值是一个 Promisevoid async function printDelayed(elements: string[]) { for (const element of elements) { await delay(400); console.log(element); } } async function delay(milliseconds: number) { return new Promisevoid(resolve { setTimeout(resolve, milliseconds); }); } printDelayed([Hello, beautiful, asynchronous, world]).then(() { console.log(); console.log(打印每一个内容!); });要点拆解delay返回一个Promisevoid由setTimeout在指定毫秒数后调用resolve完成兑现printDelayed内每次await delay(400)都会让出执行权待 400 毫秒后恢复从而形成“逐条延迟打印”的效果printDelayed(...).then(...)展示了async函数返回的 Promise 可以被继续链式消费。注意for...of在此处的使用与 generator 迭代器体系一脉相承——可迭代对象的Symbol.iterator约定可参考仓库中的 Iterators 和 Generators 文档当目标为 ES6 及以上时编译器会直接生成引擎内置的迭代器实现。运行前提与编译目标由于async/await依赖 generator 语义必须将编译目标设为 ES6--target ES6且运行环境需原生支持 ES6 generator。1.6 版本中异步函数还只是“编译到 ES6 时的试验性支持”1.7 则将其作为正式能力同时伴随后文介绍的“--target ES6与--module可同时使用”让异步代码在不同模块体系下都能按需编译。二、支持同时使用--target ES6和--module在 TypeScript 1.7 之前选择 ES6 作为编译目标时对模块格式的限制较多1.7 将ES6添加到了--module选项的支持列表当编译到 ES6 时允许显式指定模块类型。这让开发者可以针对具体运行时的需求选择最合适的特性组合例如在 ES6 目标下仍输出 AMD 格式的模块交由 RequireJS 等加载器使用。配置示例{ compilerOptions: { module: amd, target: es6 } }编译选项取值参考结合仓库中的 编译选项 文档--module支持的值包括None、CommonJS、AMD、System、UMD、ES6或ES2015。几个值得注意的约束只有AMD和System能和--outFile一起使用合并输出到单一文件ES6和ES2015也可用于目标输出为ES5或更低版本的情况未显式指定时--module的默认值取决于--target当target ES6时为ES6否则为commonjs模块解析策略--moduleResolution的默认值也随模块类型变化AMD、System、ES6时为Classic其余为Node。这些选项可以通过命令行tsc --module amd --target es6传入也可以在 tsconfig.json 的compilerOptions中集中配置。--target本身支持ES3默认、ES5、ES6/ES2015及后续更高版本详见 编译选项。三、this类型让链式 API 在继承中保持类型连贯在方法中返回当前对象即this是构建链式 API 的常见方式。TypeScript 1.7 之前类实例方法中this被推断为具体的类类型导致继承场景下的链式调用丢失子类成员1.7 起编译器在类的实例方法中会将this推断为一个特殊类型——this类型字面写作this可以大致理解为“方法调用时点左边那个表达式的类型”。基础示例BasicCalculatorexport default class BasicCalculator { public constructor(protected value: number 0) {} public currentValue(): number { return this.value; } public add(operand: number) { this.value operand; return this; } public subtract(operand: number) { this.value - operand; return this; } public multiply(operand: number) { this.value * operand; return this; } public divide(operand: number) { this.value / operand; return this; } }使用者可以这样表述2 * 5 1import calc from ./BasicCalculator; let v new calc(2).multiply(5).add(1).currentValue();这种优雅的链式写法在继承面前曾有一个问题。假设使用者编写了ScientificCalculatorimport BasicCalculator from ./BasicCalculator; export default class ScientificCalculator extends BasicCalculator { public constructor(value 0) { super(value); } public square() { this.value this.value ** 2; return this; } public sin() { this.value Math.sin(this.value); return this; } }因为BasicCalculator的方法过去被推断为返回BasicCalculator当在ScientificCalculator实例上调用继承自BasicCalculator的方法时类型系统无法正确保留子类信息import calc from ./ScientificCalculator; let v new calc(0.5) .square() .divide(2) .sin() // Error: BasicCalculator 没有 sin 方法. .currentValue();在 TypeScript 1.7 中这不再是问题divide继承自BasicCalculator返回的this类型在ScientificCalculator实例上就是ScientificCalculator因此后续.sin()可以被正确解析链式调用全程保持子类类型。this类型与 mixin 风格交叉类型this类型还非常适合描述使用了 mixin 风格继承的库如 Ember.js的交叉类型interface MyType { extendT(other: T): this T; }extend的返回值this T表示“当前类型与混入类型 T 的交叉”每次调用都会把新混入的成员并入当前实例类型。这一特性在本仓库的 高级类型 文档中被称为多态的this类型它表示某个包含类或接口的子类型属于 F-bounded 多态的一种应用相关讨论见 TypeScript 1.8 版本说明 中的“类型参数约束”。没有this类型时ScientificCalculator无法在继承BasicCalculator的同时保持接口连贯性——multiply会返回缺少sin方法的BasicCalculator使用this类型后multiply返回的this在此处即ScientificCalculator。关于 mixin 模式在 TypeScript 中的完整实践可参考仓库中的 混入Mixins 文档。四、ES7 幂运算符**与**TypeScript 1.7 支持将在 ES7/ES2016 中增加的幂运算符**求幂与**求幂并赋值。这些运算符在编译到 ES3/ES5 目标时会被转换为Math.pow调用因此旧运行环境也能直接运行。示例与编译输出输入var x 2 ** 3; var y 10; y ** 2; var z -(4 ** 3);生成ES3/ES5 目标下的 JavaScriptvar x Math.pow(2, 3); var y 10; y Math.pow(y, 2); var z -Math.pow(4, 3);可见**展开为对左操作数的重新赋值而一元负号-(4 ** 3)会先计算幂再取负生成-Math.pow(4, 3)。开发者可以放心在源码中使用更清晰的幂语法编译器负责向旧目标的降级转换。五、改进对象字面量与数组解构的类型检查TypeScript 1.7 使对象和数组字面量在通过与之对应的解构绑定进行类型推断时的检查更加直观和自然。对象字面量解构的检查规则当一个对象字面量通过与之对应的对象解构绑定推断类型时遵循以下规则对象解构绑定中有默认值的属性对于对象字面量来说是可选的对象解构绑定中的属性如果在对象字面量中没有匹配的值则该属性必须有默认值并且会被添加到对象字面量的类型中对象字面量中的属性必须在对象解构绑定中存在多余属性会报错。数组字面量解构的检查规则当一个数组字面量通过与之对应的数组解构绑定推断类型时数组解构绑定中的元素如果在数组字面量中没有匹配的值则该元素必须有默认值并且会被添加到数组字面量的类型中。示例// f1 的类型为 (arg?: { x?: number, y?: number }) void function f1({ x 0, y 0 } {}) {} // 以下调用都是合法的 f1(); f1({}); f1({ x: 1 }); f1({ y: 1 }); f1({ x: 1, y: 1 }); // f2 的类型为 (arg?: { x: number, y?: number }) void function f2({ x, y 0 } { x: 0 }) {} f2(); f2({}); // 错误, x 非可选 f2({ x: 1 }); f2({ y: 1 }); // 错误, x 非可选 f2({ x: 1, y: 1 });解读f1中两个解构属性都有默认值因此对象字面量的x、y都变为可选f2中x没有默认值它在解构绑定中成为必需属性因此f2({})和f2({ y: 1 })会因缺少x而报错。这套规则让“默认值 ⇒ 可选”的心智模型与直觉一致同时保留了多余属性检查该检查在 1.6 中已收紧见 TypeScript 1.6 版本说明 的“更严格的对象字面量赋值检查”。六、装饰器支持编译到 ES3装饰器Decorators是 TypeScript 中以元编程方式标注和修改类及其成员的实验性特性启用方式见 装饰器 文档中的--experimentalDecorators选项。TypeScript 1.7 之前装饰器只能编译到 ES5 及以上1.7 起装饰器可以编译到 ES3。具体的实现变化是编译器的__decorate辅助函数中移除了 ES5 才有的reduceRight并内联了对Object.getOwnPropertyDescriptor和Object.defineProperty的调用。这样既消除了对 ES5 专属 API 的依赖又保持了向后兼容——ES5 目标的输出也能消除此前重复出现的Object方法调用。这一改动让使用装饰器的代码可以服务于更广泛的运行时环境例如完全 ES3 的旧浏览器或嵌入式环境同时未破坏已有的 ES5 输出质量。七、总结与相关文档TypeScript 1.7 是一个“承上启下”的版本它把 1.6 中试验性的async函数正式化TypeScript 1.6 版本说明引入了影响深远的多态this类型后续在 高级类型 中形成完整章节并通过幂运算符、解构检查与 ES3 装饰器支持扩大了语言的表达力与运行环境的覆盖面其后的 1.8 版本则继续在类型系统类型参数约束、控制流分析上深化见 TypeScript 1.8 版本说明。如需进一步查阅本文涉及的编译选项与配置方式可参考编译选项--module、--target、--experimentalDecorators等选项的完整取值与默认值tsconfig.json项目级编译配置的组织方式高级类型多态的 this 类型this类型在链式继承中的系统化讲解装饰器装饰器语法、工厂与组合规则Iterators 和 Generatorsasync/await底层依赖的迭代与生成器机制混入Mixinsthis类型在混合继承模式中的应用注意本文所述特性均以 TypeScript 1.7 时代的编译行为为准async/await面向 ES6 的编译需要运行环境原生支持 ES6 generator如 Node v4这是使用该特性时最重要的前提约束。赞分享文档教程【免费下载链接】TypeScriptTypeScript 使用手册中文版翻译。http://www.typescriptlang.org项目地址https://gitcode.com/gh_mirrors/typ/TypeScript点击查看免费下载相关推荐TypeScript 1.7 破坏性改动深度解析多态 this 类型推断与类成员修饰符后的分号自动插入TypeScript 1.7 破坏性改动深度解析多态 this 类型推断与类成员修饰符后的分号自动插入 TypeScript 1.7 引入了两项会影响既有代码文档教程高效分页利器will_paginate 项目推荐高效分页利器will_paginate 项目推荐 项目介绍 在现代Web应用开发中分页功能几乎是不可或缺的一部分。无论是展示大量数据还是优化用户体验分页都文档教程TypeScript异步编程Promise、async/await和生成器详解TypeScript异步编程Promise、async/await和生成器详解 TypeScript异步编程是现代JavaScript开发的核心技能掌握Pr教程上一篇Void 代码库完全指南AI 编辑器架构、双进程模型、LLM 消息管线与 Apply 机制深度解析下一篇如何自定义 react-native-keyboard-aware-scroll-view 行为配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考