1. 首页
  2. 未分类

TypeScript 干掉所有已知 Bug

“u003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRbiRsmjFrZY4rp” img_width=”640″ img_height=”100″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002FRbvP0Ct1vYMD1S” img_width=”1080″ img_height=”753″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003E作者 | Matt Elandu003Cu002Fpu003Eu003Cpu003E译者 | 弯月,责编 | 胡巍巍u003Cu002Fpu003Eu003Cpu003E出品 | CSDN(u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-1″u003EID:u003Cu002Fiu003ECSDNnews) u003Cu002Fpu003Eu003Cpu003E家家有本难念的经,人人都有废寝忘食力求正确的程序。 u003Cu002Fpu003Eu003Cpu003E我的程序是用JavaScript编写的单页应用,只使用了JQuery和JavaScript,但它是我写过的最摇摇欲坠的程序了。 u003Cu002Fpu003Eu003Cpu003E而当我切换到TypeScript后,它帮我消灭了所有已知的bug,还防止了一切类型的错误再次发生。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRT4Gwk56bt5iOJ” img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h1″u003E找出已有的“链接”问题u003Cu002Fh1u003Eu003Cpu003E换成TypeScript之后的第一个好处就是,所有方法调用参数过多或过少,或者方法名拼错的地方,都能够立即发现(代码非常庞大而且没有文档,编写者也大多没有经验,也没有标准化编程的经验)。 u003Cu002Fpu003Eu003Cpu003E而让tsc(TypeScript编译器)强制编译一切代码,不存在的方法就会让编译终止。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRT7S2kzFTfre26″ img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h1″u003E字符串类型的变量u003Cu002Fh1u003Eu003Cpu003E程序中有一些地方会将数值类型的变量与数字进行比较。使用==进行比较时没问题,因为JavaScript会尝试将非数值的数字转换成真正的数字,但使用===比较时(为了安全性和性能,这样做是必须的),你就会发现‘1’ === 1会返回false,从而导致大量错误。 u003Cu002Fpu003Eu003Cpu003E而用明确的类型声明所有的参数和变量(例如 : number),就能捕获所有此类型的错误。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002FRTJXJ1kBqzfCnu” img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h1″u003E利用ESLint捕获愚蠢的错误u003Cu002Fh1u003Eu003Cpu003E我们使用ESLint来清理TypeScript代码,因为TSLint会在2019年某个时候被弃用。 u003Cu002Fpu003Eu003Cpu003EESLint可以帮助我们捕获可能会导致问题的地方,例如返回值没有赋给某个变量,或者其他可能导致不正确的问题。由于我们在构建过程中加入了ESLint,因此每次构建都会捕获lint错误。 u003Cu002Fpu003Eu003Cpu003E在ESLint之外,我们还使用了Prettier来格式化代码,最后不花任何代价就得到了统一的代码风格。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRTJXJ7YR5xGDl” img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cstrongu003E引入类u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E由于我们使用编译器来捕获明显的错误,用linting来捕获新的错误,因此感觉我们可以放心地将JavaScript函数移动到类中,从而获得更有组织、更标准化的TypeScript代码,并找出一切可以重用和统一的代码。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRTJXJ7uHXU5GZc” img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h1″u003E消灭全局状态u003Cu002Fh1u003Eu003Cpu003E由于我们引入了类,因此必须将状态从全局作用域移动到各个类中。 u003Cu002Fpu003Eu003Cpu003E似乎除了明显的方法调用错误和不同数据类型的值的比较之外,糟糕的状态管理是第二大Bug的源泉。 u003Cu002Fpu003Eu003Cpu003E虽然在这个项目上,我们没有时间引入像redux等框架,但只要将状态移入各个类中,就足以让我们找出不恰当地操纵状态的代码并进行改正了。u003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRTLSNam5ZxLDlM” img_width=”340″ img_height=”57″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003Eu003Cpu003Eu003Cu002Fpu003Eu003Ch1 toutiao-origin=”h1″u003E可测试性 u003Cu002Fh1u003Eu003Cpu003E将一大堆意大利面式的JavaScript代码改成独立的类,我们就可以针对每个类编写Jest测试用例,从而获得更大的安全性,对应用程序进行修改时也更有信心。 u003Cu002Fpu003Eu003Cpu003E最终我们发现,将老旧的JavaScript遗留应用程序移植到TypeScript上,无论从开发、质量保证还是最终用户的角度来看,都是一项非常漂亮的举措,因为它引入的额外的严格和安全度量可以帮我们让应用程序更稳定,而且我们修改代码时不会破坏已有代码。 u003Cu002Fpu003Eu003Cpu003E当然,我并没有将应用程序转成Angular,也没有添加Redux之类的状态管理库,但最终,该项目提前完成,没有出现任何故障,在这个过程中还解决了大量已有错误,从而证明了与其在JavaScript中逐个修改bug并胆战心惊地期待一切正确,还不如将应用程序转成TypeScript更节省时间。 u003Cu002Fpu003Eu003Cpu003E每个项目都不一样,但我强烈u003Ci class=”chrome-extension-mutihighlight chrome-extension-mutihighlight-style-2″u003E建议u003Cu002Fiu003E,如果你想重新组织旧应用程序,那么应该考虑一下TypeScript。u003Cu002Fpu003Eu003Cpu003E原文:https:u002Fu002Fdev.tou002Fintegermanu002Fhow-typescript-squashed-all-known-bugs-98cu003Cu002Fpu003Eu003Cpu003E本文为 CSDN 翻译,转载请注明来源出处。u003Cu002Fpu003Eu003Cpu003E【END】u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003ECSDN 博客诚邀入驻啦!u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E本着共享、协作、开源、技术之路我们共同进步的准则,u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E只要你技术够干货,内容够扎实,分享够积极,u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E欢迎加入 CSDN 大家庭!u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002FRdVggx58lYpvos” img_width=”960″ img_height=”550″ alt=”TypeScript 干掉所有已知 Bug” inline=”0″u003E”

原文始发于:TypeScript 干掉所有已知 Bug

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/14662.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code