首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尤雨溪自述:打造Vue 3.0背后的故事

Vue 2 是通过替换状态对象属性的 getter 和 setter 实现这种响应能力的。...为此我们需要改动新版框架的浏览器支持范围——这是一项破坏性变更,只有新的主要版本才能实现。 解决架构问题 在现有代码库上修复这些问题需要大量高风险的重构工作,几乎等同于重写了。...在现有代码库上修复这些问题需要大量高风险的重构工作,几乎已经等同于重写了。 同时,我们在很多内部模块与看起来无处可去的零散代码之间生成了很多隐藏的耦合关系,结果积累了不少技术债。...为了支持他们的使用场景,我们需要在源码之外单独编写和维护一套 TypeScript 声明,其使用了另一套类型系统。转向 TypeScript 后,我们就能自动生成声明文件,降低维护成本。...这一优化极大减少了需要遍历的树的数量,规避了大部分虚拟 DOM 树开销。 其次,编译器会激进检测模板中的静态节点、子树甚至数据对象,并在生成的代码中将它们提取到渲染函数之外。

79030

TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript参考资料TypeScript入门指南(JavaScript的超集)

这能帮助类型系统推导出这些具名的声明。 类型解析器与检查器(Type resolver / Checker): 解析每种类型的构造,检查读写语义并生成适当的诊断信息。...当解析导出(import)的时候,会优先选择“.ts”文件而不是“.d.ts”文件,以确保处理的是最新的文件。...编译器会进行与Nodejs相似的流程解析导入,沿着目录链查找与将要导入相匹配的带.ts或.d.ts扩展名的文件。 导入失败不会报error,因为可能已经声明了外部模块。...一个SourceFile对象表示一个给定文件的AST并且带有一些额外的信息如文件名及源文件内容。 然后,联合器(Binder)处理AST节点,结合并生成Symbols。.../#download-links 有人说:“TypeScript 让 JavaScript 又变成了 Java,而我们不需要另一个 Java,所以我们不需要 TypeScript“。

2.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

旧项目TypeScript改造问题与解决方案记

这个方法适用于大量旧代码改造的情况。...在`tsconfig.json`配置文件中增加lib。此方法的原理是让TypeScript编译时引用外部的Promise对象,因此在编译时不会报错。...### 模块引用和导出报错 在ES2015的代码中,我们可以通过`@babel/plugin-proposal-export-default-from`插件直接导出引入的文件,具体示例如下: export...因此,我们解决这个问题只需要用下面这一种方法: 1. 将上面的`export from`的语法稍加调整适配TypeScript语法。...## TypeScript局部替换 在进行重构改造的时候,我们在最开始可能只能逐个模块进行替换。我们需要新的TypeScript文件和旧的JavaScript文件能够和平共存进行编译运行。

4.9K10

TypeScript 3.9正式发布!平均编译时长从26秒缩短至10秒

此外,我们还收到来自微软团队的反馈意见,他们表示 TypeScript 3.9 的平均编译时长由 26 秒缩短至 10 秒左右。 我们还对编辑器方案中的文件重命名功能做出几项调整。...TypeScript 3.9 调整了内部编译器与语言服务缓存文件的查找方式,顺利解决了这个问题。 虽然仍有改善空间,但我们希望目前的成果能够为广大用户带来更好的使用体验!...let f2 = () => { 42 } 感谢社区成员 Wenlu Wang 的贡献,TypeScript 现在获得了快速修复功能,可添加缺失的 return 语句、删除大括号或者为对象字面量等箭头函数实体添加括号...支持 “Solution Style” tsconfig.json 文件 编辑器需要确定当前文件属于哪个配置文件,以及当前“项目”中还包含哪些其他文件,从而选择适当的选项。...及更高版本中的 CommonJS 等目标模块系统,TypeScript 现在能够将导出的声明提升至文件顶部。

1.6K20

TypeScript 4.4 RC版来了,正式版将于月底发布

如此一,我们就能将这些对象作为类似于字典的类型,并在其中通过中括号使用字符串键对它们进行索引。...路径归一化速度更快 TypeScript 往往需要对各种文件路径类型进行“归一化”,确保将其转换为编译器能够随处使用的统一格式。...为大型输出更快生成源映射 TypeScript 4.4 为超大输出文件提供了源映射生成优化功能。与旧版 TypeScript 编译器相比,新版本的发布时长可缩短约 8%。...--force 构建速度更快 在项目引用中使用 --build 模式时,TypeScript 必须执行最新检查以确定需要重建哪些文件。...在 TypeScript 4.4 中,--force 构建也能根据检查结果确定需要重建的具体文件了。

2.5K20

如何在大型代码仓库中删掉 6w 行废弃的文件和 exports?

文件内部使用分析 第二步的问题比较复杂,这里最终选用 ESLint 配合自己 fork 改写 no-unused-vars 这个 rule ,并且自己提供规则对应的修复方案 fixer 实现。...修复不是凭空产生的,需要作者自己对相应的 AST 节点做分析、删除等操作,好在 ESLint 提供了一个 fixer 工具包,里面封装了很多好用的节点操作方法,比如 fixer.remove() , fixer.replaceText...,增加了一些 TypeScript AST 节点的分析。...首先是 速度太慢 ,这个插件会基于 webpack 编译的结果分析哪些文件是无用的,每次使用都需要编译一遍项目。...ts 文件,一样会触发重新编译) 而 deadcode-plugin 就是依赖 compilation.fileDependencies 这个变量判断哪些文件未被使用,所有 ts 文件都在这个变量中的话

4.6K20

「中文翻译」Vue3 的诞生之路

为了支持它们的用例,我们在不同的类型系统下,必须与源代码分开编写和维护 TypeScript 声明。切换到 TypeScript 将使我们能够自动生成声明文件,从而减轻了维护负担。...该框架通过递归遍历两个虚拟 DOM 树并比较每个节点上的每个属性确定真实 DOM 的哪些部分需要更新。...其次,编译器会主动检测模板中的静态节点、子树甚至数据对象,并将其提升到生成代码中的 render 函数之外。这样可以避免在每次渲染上重新创建这些对象,从而大大提高了内存使用率并减少了垃圾回收的频率。...在 Vue 3 中,我们通过将大多数全局 API 和内部帮助程序移至 ES 模块导出来,实现了这一目标。这使现代的打包工具可以静态分析模块依赖性并删除未使用的导出相关的代码。...模板编译器还会生成友好的 Tree-shaking 代码,在模板中实际使用了该功能时才导入该功能的帮助程序。

66020

TypeScript是如何工作的

members 记录了类、接口或字面量实例成员,exports 记录了模块导出对象。Symbols 是一个对象的标识,或者说是一个对象对外的身份特征。...我们可以在 typescript 源码的 src 文件下面找到 tsserver 文件夹,这个文件编译之后,就是我们项目中的 node_modules/typescript/lib/tsserver.js...由于 TypeScript 插件不需要将 TS 文件编译成 JS 文件,所以 typescript-core 只会运行到检查器这一步。...如对于语法诊断,VSCode 提供了 createDiagnosticCollection 方法,需要语法诊断功能的插件只需要调用这个方法创建一个 DiagnosticCollection 对象,然后将诊断结果按文件添加到这个对象中即可...三、TypeScript 与 babel 在开发过程中,错误提示功能由 VSCode 提供。但是我们的代码需要经过编译之后才能在浏览器中运行,这个过程中是什么东西处理了 TypeScript 呢?

5.4K30

TypeScript 演化史 -- 12】ES5ES3 的生成器和迭代支持及 --checkJS选项下 .js 文件中的错误

特定的语法,所以不需要先通过TypeScript编译器就可以直接运行ts文件: $ node index.ts 4 8 15 16 23 42 现在将index.ts文件编译成index.js: tsc...编译改变程序的行为。...如果要编译包含多个文件TypeScript 项目,这是很不好的,每个生成的 JS 文件都包含执行该文件所需的所有帮助程序,从而大大的增加了代码的大小。...这可以通过将--checkJs编译器选项设置为true实现。也可以通过在每个文件的顶部添加// @ ts-nocheck注释将特定文件列入黑名单。...每当在处理文件时,请考虑先添加// @ ts-check并修复潜在的类型错误,以有效地实现蠕变迁移。

1.1K20

如何在大型代码仓库中删掉废弃的文件和 exports?

文件内部使用分析 第二步的问题比较复杂,这里最终选用 ESLint 配合自己 fork 改写 no-unused-vars 这个 rule ,并且自己提供规则对应的修复方案 fixer 实现。...修复不是凭空产生的,需要作者自己对相应的 AST 节点做分析、删除等操作,好在 ESLint 提供了一个 fixer 工具包,里面封装了很多好用的节点操作方法,比如 fixer.remove() , fixer.replaceText...,增加了一些 TypeScript AST 节点的分析。...首先是 速度太慢 ,这个插件会基于 webpack 编译的结果分析哪些文件是无用的,每次使用都需要编译一遍项目。...ts 文件,一样会触发重新编译) 而 deadcode-plugin 就是依赖 compilation.fileDependencies 这个变量判断哪些文件未被使用,所有 ts 文件都在这个变量中的话

4.5K60

Airbnb 是如何从 JavaScript 迁移到 TypeScript 的?

一份文件一份文件地逐步部分迁移,修复类型错误,不断重复直到整个项目迁移完成。...只修复一种类型比修复文件容易地多:修复整个文件可能非常复杂,因为文件可能有许多依赖。使用混合迁移,更难追踪迁移的实际进度和文件的状态。 看起来,一次性全部迁移明显更好!...然后,我们需要在诊断中指定的行上添加 any 类型。这种方法允许我们解决错误,因为添加 any 类型可以修复编译错误。...只有在删除 @ts-ignore 注释后,TypeScript 编译器才会发出所有需要解决的诊断错误。 const str3 = foo ?...因此,我们可以通过从我们的插件运行 eslint-prettier 快速修复前面步骤可能引入的任何格式问题。 迁移管线的最后一部分确保所有的 TypeScript 编译冲突都得到解决。

1.5K20

Vue.js 3.x 优化概览

多个repo难以管理,编辑器需要打开多个项目; 某个模块升级,依赖改模块的其他模块需要手动升级,容易疏漏; 公用的npm包重复安装,占据大量硬盘容量,比如打包工具webpack会在每个项目中安装一次...它依赖于ES2015中的 import 和 export 语句,用来检测代码模块是否被导出、导入,且被 JavaScript 文件使用。...而对于上述例子,理想状态只需要 diff 这个绑定 message 动态节点的 p 标签即可。Vue.js 3.0 做到了,它通过编译阶段对静态模板的分析,编译生成了 Block tree。...Block tree 是一个将模版基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的,而且每个区块只需要以一个 Array 追踪自身包含的动态节点。...,就不再需要文件中跳来跳去。

3.4K20

如何将Node.js库转换到Deno

我们使用用TypeScript编写edgedb-js,它已经使用了ESM语法。在编译过程中,tsc将我们的文件转换成普通的=CommonJS语法的JavaScript文件。...Node.js可以直接运行编译后的文件 本文下面将讨论如何将TypeScript文件修改为Deno可以直接使用的格式 依赖 edgedb-js没有任何第三方依赖,所以这里不必担心任何三方库的Deno兼容性问题...只要确保这些文件重新导出相同的功能就能符合预期 但实际上应该如何重写这些导入呢。这里我们需要开发一个简单的codemod脚本。...原生的std/fs模块而不是Node兼容版本的std/node/fs 声明一个重写规则集合并初始化一个Map对象表示源文件路径到需要重写的目标文件的路径 const sourceDir = "....我们将使用TypeScript的Compiler API将源文件解析为抽象语法树并找到导入语句 为了实现这个功能我们需要用到typescript NPM包的compile API。

2.4K30

TypeScript 演化史 — 第十二章】ES5ES3 的生成器和迭代支持及 –checkJS选项下 .js 文件中的错误

特定的语法,所以不需要先通过TypeScript编译器就可以直接运行ts文件: $ node index.ts 4 8 15 16 23 42 现在将index.ts文件编译成index.js: tsc...编译改变程序的行为。...如果要编译包含多个文件TypeScript 项目,这是很不好的,每个生成的 JS 文件都包含执行该文件所需的所有帮助程序,从而大大的增加了代码的大小。...这可以通过将--checkJs编译器选项设置为true实现。也可以通过在每个文件的顶部添加// @ ts-nocheck注释将特定文件列入黑名单。...每当在处理文件时,请考虑先添加// @ ts-check并修复潜在的类型错误,以有效地实现蠕变迁移。

1.9K20

《现代Typescript高级教程》概述

这在2.0版本中引入的严格的空值检查(--strictNullChecks)中体现得尤为明显,这个功能帮助开发者在编译时捕获可能的null或undefined引用错误。...TypeScript的类型系统使得开发者可以明确定义对象和函数的结构,这样在大型项目中维护和理解代码就更加简单。...此外,TypeScript还有良好的工具支持,比如TSLint和Prettier,这些工具可以帮助开发者编写更一致、更可读的代码。...在性能方面,由于TypeScript在运行前进行编译,因此可以提前发现并修复很多可能在运行时才会出现的错误。这种预编译的方式可以大大提高应用程序的性能,因为运行时需要进行的工作量较少。...而且,由于有大量的开源贡献者,绝大多数流行的JavaScript库都有相应的类型定义文件

15340

从 0 到 1 搭建一个企业级前端开发规范

在项目根目录通过tsc \--init命令创建 tsconfig.json 文件并替换为以下内容 有关 TypeScript 的详细配置可以查看这篇文章 { "compilerOptions":...因为 tsconfig.json 中的编译选项仅仅针对代码类型检查,而不是代码编译,因此不需要TypeScript 生成编译文件 以下是tsconfig.json中一些设置的解释 lib: TS 需要引用的库...,即声明文件,ES5 默认 dom,es5,scripthost allowJs: 允许编译 JS 文件(js,jsx) allowSyntheticDefaultImports: 允许从没有设置默认导出的模块中默认导入...jsx: 支持 JSX.参考文档 include:编译需要编译文件或者目录 添加 ESLint 代码规范校验 ESLint 可以帮助我们找出有问题的编码模式或不符合规则的代码 有关 ESLint 的详细讨论可以查看这篇文章...并且自动修复 如果需要屏蔽不需要检测的文件或目录,可以在项目根目录添加 .eslintignore .DS_Store node_modules dist build public 添加 Prettier

2.8K20
领券