旧项目TypeScript改造问题与解决方案记
8页1、 旧项目TypeScript改造问题与解决方案记 概述由于本次改造的项目为一个通过NPM进行发布的基础服务包,因此本次采用TypeScript进行改造的目标是移除Babel全家桶,减小包体积,同时增加强类型约束从而避免今后开发时可能的问题。本次改造使用的是TypeScript v2.9.2,采用Webpack v4.16.0进行打包编译。开发工具使用的是VSCode,使用中文语言包。预期目标是直接将TypeScript代码通过loader直接编译为ES5的代码。本文中涉及的问题有部分是TypeScript配置和使用的问题,也有部分是VSCode本身配置相关问题。改造问题记录与分析VSCode相关“无法找到相关模块”报错在项目中,如果我们使用了webpack.alias,可能会提示找不到模块。具体错误如下:终端编译报错:TS2307: Cannot find module _utils/index.编辑器报错:ts找不到模块“_utils/index”。这是由于编辑器无法读取对应的别名信息导致的。此时我们需要检查对应的模块是否存在。如果确认模块存在,且终端编译编译时不报错,而只是编辑器报
2、错,则是因为编辑器无法读取webpack配置,我们需要增加另外的配置。解决方法:除了配置webpack.alias,还需要配置相对应的tsconfig.json,具体配置如下所示:compilerOptions: baseUrl: ., paths: _util/*: src/core/utils/* 注:如果配置了tsconfig.json以后还是报错的话,需要重启下VSCode,猜测是由于VSCode只在项目加载时读取相关配置信息。在JavaScript项目中的jsconfig.json同理。TypeScript相关对象属性赋值报错在JavaScript中,我们经常会声明一个空对象,然后再给这个属性进行赋值。但是这个操作放在TypeScript中是会发生报错的:let a = ;a.b = 1;/ 终端编译报错:TS2339: Property b does not exist on type ./ 编辑器报错:ts 类型“”上不存在属性“b”。这是因为TypeScript不允许增加没有声明的属性。因此,我们有两个办法来解决这个报错:1. 在对象中增加属性定义(推荐)。具体方式为:
3、let a = b: void 0;。这个方法能够从根本上解决当前问题,也能够避免对象被随意赋值的问题。2. 在对象中添加类型定义(推荐)。具体方式为如下: propName: string: any; let a: obj = ;a.a = 1;这样也能够避免报错问题,并且不引入全对象any情况。3. 给a对象增加any属性(应急)。具体方式为:let a: any = ;。这个方法能够让TypeScript类型检查时忽略这个对象,从而编译通过不报错。这个方法适用于大量旧代码改造的情况。# Window对象属性赋值报错与上一个情况类似,我们给一个对象中赋值一个不存在的属性,会出现编辑器和编译报错:window.a = 1; / 终端编译报错:TS2339: Property a does not exist on type Window. / 编辑器报错:ts 类型“Window”上不存在属性“a”。这也是因为TypeScript不允许增加没有声明的属性导致的。由于我们没有办法声明windows属性的值(或者说很困难),因此我们需要通过下面这一种方式来解决:1. 我们在windows
4、使用时增加一个类型转换,即(window as any).a = 1;。这样就能够保证编辑器和编译时不会出错。不过该方法只建议用于旧项目改造,我们还是要尽量避免在window对象上面增加属性,应该通过一个全局的数据管理器来进行数据存取。# ES2015 Object新增的原型链上的方法报错在项目中,使用到了一些Object原型链上面的一些ES2015新增的方法,如Object.assign和Object.values等,此时编译会失败,同时VSCode会提示报错:终端编译报错:TS2339: Property assign does not exist on type ObjectConstructor. 编辑器报错:ts 类型“ObjectConstructor”上不存在属性“assign”。这是由于我们在tsconfig.json中指定的target是ES5,而TypeScript并没有相关的polyfill,因此我们无法使用ES2015中新增的方法。通过以上分析,我们可以使用如下方法解决:1. 可以使用lodash工具集中的相关方法,安装时需要安装lodash.assign和ty
《旧项目TypeScript改造问题与解决方案记》由会员Baige****0346分享,可在线阅读,更多相关《旧项目TypeScript改造问题与解决方案记》请在金锄头文库上搜索。
员工积极主动行为的组态效应:基于过程的视角
汪晖齐物平等与跨体系社会的天下想象
函数性质中的数学抽象在问题解决与设计中的应用
日本东京大学入学考试理科数学试题解析
二次电池研究进展
实践研究与论理逻辑
光学视觉传感器技术研究进展
龙泉青瓷的传承困境与发展
齐齐哈尔地区抗根肿病大白菜品种的抗性鉴定与评价
基于系统动力学模型的胶州湾海域承载力预测
基于弯液面电化学连接碳纤维实验初探
龟甲胶研究发展探析
鼻腔黏膜免疫佐剂鞭毛蛋白的研究进展
鼻内镜辅助上颌骨部分切除术治疗鼻腔鼻窦腺样囊性癌的临床分析
黑豆不同发芽期多酚、黄酮及抗氧化活性分析
齐鲁青未了:山东当代文学审美流变论
黄登水电站机电设备安装工程施工技术质量管理
黄河文化传承视角下音乐剧创作探究
黄亦琦从风论治咳嗽变异性哮喘经验※
鲸豚动物吸附式声学行为记录器综述
2022-03-24 12页
2022-03-24 11页
2022-03-24 10页
2022-03-24 25页
2022-03-24 13页
2022-03-24 18页
2022-03-24 10页
2022-03-24 32页
2022-03-24 8页
2022-03-24 9页