TypeScript在过去几年中越来越受欢迎。它是2020年最有前途的五种语言之一。最大的前端框架之一Angular正在使用TypeScript。大约60%的JS程序员已经在使用TypeScript,22%的人想尝试一下。为什么?从历史上看,JavaScript最终成为Internet上编写网页和应用程序脚本的主要语言。现在可以通过Node.js和Deno等框架在前端和后端使用JavaScript。但是JavaScript是用来创建像现代网络上那样的大型复杂系统的吗?没有。在本文中,我们将向您介绍一种解决方案——TypeScript——并让您开始向JavaScript代码添加类型。1.什么是打字稿?简而言之,TypeScript是JavaScript的超集,具有可选类型并编译为纯JavaScript。简单来说,TypeScript在技术上是具有静态类型的JavaScript,如果你想拥有的话。现在,向JavaScript添加静态类型的原因是什么?我至少可以列出三个:您可以避免巧妙地隐藏忍者错误,例如经典的“未定义”不是函数。在不显着破坏代码的情况下进行重构代码更容易。将自己定位在复杂的大型系统中不再是噩梦。事实上,一项研究表明TypeScript可以检测出15%的JavaScript错误。动态类型的自由通常会导致错误,这些错误不仅会降低程序员的工作效率,还会由于添加新代码行的成本增加而导致开发停止。结果,JavaScript无法合并类型和编译时错误检查等内容,使其成为企业和大型代码库中服务器端代码的糟糕选择。正如他们的标语所说,TypeScript是可扩展性的JavaScript。1.使用TypeScript需要学习什么?TypeScript本质上是一个JSlinter。或者,带有编译器可以理解的文档的JS。因此,与CoffeeScript(添加了语法糖)或PureScript(看起来一点也不像JavaScript)等其他语言相比,您无需学习太多就可以开始编写TypeScript代码。TS中的类型是可选的,每个JS文件都是一个有效的TypeScript文件。如果您的初始文件中存在类型错误,编译器会报错,但它会返回一个像以前一样工作的JavaScript文件。无论您身在何处,TypeScript都会在那里与您会面,随着时间的推移,您可以轻松培养自己的技能。2.TypeScript是用在前端还是后端?TypeScript被编译为JavaScript。所以TS可以用在任何可以使用JS的地方:前端和后端。JavaScript是最流行的编写应用程序和网页前端脚本的语言。因此,TypeScript可以用于完全相同的目的,但它在服务器端的复杂企业项目中大放异彩。在Serokell,我们的大多数Web前端都是用TypeScript实现的。2.什么是类型,它们在TS中如何工作?1.类型简介类型是一种区分正确程序和错误程序的方法,它通过在代码中描述我们在运行程序之前计划如何使用我们的数据。它们的范围从数字和字符串等简单类型到完美模拟我们问题域的复杂结构。编程语言分为两类:静态类型或动态类型。在具有静态类型的语言中,必须在编译时知道变量的类型。如果我们声明一个变量,编译器应该知道(或能够推断)它是数字、字符串还是布尔值。想想Java。在具有动态类型的语言中,情况不一定如此。变量的类型只有在程序运行时才知道。想想Python。TypeScript可以支持静态类型,而JavaScript不支持。由于TypeScript的静态类型,你将需要更加努力地工作:引入未定义的变量(编译时警告帮助)将两个包含数字的字符串相加(如“4”+“20”=“420”)对不允许操作的东西,例如作为修剪数字。使用静态类型系统,您可以创建自己的复合类型。这使工程师能够更详细地表达他们的意图。显式类型还使您的代码具有自说明性:它们确保您的变量和函数按预期运行,并使计算机能够记住周围的上下文。2.TypeScript类型TypeScript有很多基本类型,比如Boolean、Number、String、Array、Tuple等,有些是JS没有的;你可以在TypeScript的文档中了解更多关于它们的信息。除此之外,这里还有一些我们想要展示的其他类型,以展示TS的表现力:(1)Any&Unknown虽然any作为类型可以覆盖,但是,你想要的任何东西,unknown是其类型安全的对应物。any可以让你在想要转义类型系统时为其分配任何JavaScript变量。它通常用于对未经检查且类型未知的传入变量(例如来自第三方API)进行建模。Unknown与any非常相似,但它不会让您对变量做任何事情,直到它被显式类型检查。(2)void当没有返回值时使用void,例如作为不返回任何值的函数的返回类型。(3)NeverNever是不应该发生的事情的返回类型,比如抛出异常的函数。(4)交集和联合类型这些使您能够创建自定义类型以更好地适合您的逻辑。交集类型允许您将几种基本类型组合成一种类型。例如,您可以创建一个名称为:string且自定义类型为phone_number:number的Person。这相当于说:我希望我的类型是这样那样的。联合类型使您的类型可以采用几种基本类型之一。例如,您可以有一个返回结果的查询:string或undefined。这相当于说:我希望我的类型是这个或那个。如果您将类型视为空间,所有这些很快就会变得有意义。TypeScript中的类型可以是隐式的或显式的。如果您不显式编写您的类型,编译器将使用类型推断来推断您正在使用的类型。但是,显式编写它们有一些好处,例如帮助其他开发人员阅读您的代码并确保您看到的就是编译器看到的。3.TypeScript和JavaScript务实一点是值得的。查看此图:TypeScript现在在2020年第一季度的GitHub拉取请求中排名第7,领先于PHP和C。虽然一个重要的原因是微软(创建它)和谷歌等公司对TypeScript的支持,但它支持好理由。1.选择TypeScript而不是JavaScript的3个理由(1)TypeScript更可靠与JavaScript相比,TypeScript代码更可靠,也更容易重构。这使开发人员能够避免错误并使重写更容易。类型消除了可能潜入JavaScript代码库的大多数愚蠢错误,并创建了一个快速反馈循环以在编写新代码和重构时修复所有小错误。(2)TypeScript更显式显式类型将我们的注意力集中在我们的系统是如何构建的以及它的不同部分如何相互交互。在大型系统中,重要的是能够抽象出系统的其余部分,同时牢记上下文。类型允许我们这样做。(3)TypeScript和JavaScript实际上可以互换,为什么不呢?由于JavaScript是TypeScript的子集,因此您可以在TypeScript代码中使用所需的所有JavaScript库和代码。2020年大多数流行的JavaScript库都有类型——绝对类型是许多不同JavaScript库的类型存储库,您可以使用它来使与它们的交互更加类型安全。这意味着你可以在你的JavaScript代码库中逐渐采用TypeScript,首先将类型添加到各个模块,然后扩展到......我想使用已知的宇宙。2.TypeScript的缺点你不能让一个JavaScript团队或一个JavaScript存储库立即将它们切换到惯用的TypeScript。有一些权衡取舍,你必须预先牺牲时间。虽然我们可以争论显式类型从长远来看会给你带来的节省,但在短期内添加它们确实需要更多时间。这可以说不是什么大问题,但它是支持JavaScript的一个论点。因此,您可能不会为自己使用的小型项目和原型选择TypeScript。3.测试与类型简单谈谈测试与类型:这两种东西都会捕获不同类别的错误,因此以无党派方式处理这两种东西是有意义的。您仍然可以同时使用单元测试和更高级的技术,例如使用TS进行基于属性的测试,同时保持静态类型系统的优势。总结一下,这里是两种语言的快速比较:4.TypeScript快速入门指南(1)TypeScriptCompiler要编译你的TS代码,你需要安装tsc(TypeScriptCompiler的缩写)。最简单的方法是通过终端。这可以通过npm使用以下命令轻松完成:npminstall-gtypescript如果您想将TypeScript与VisualStudioCode一起使用,他们的网站上有一个方便的指南。安装tsc后,您可以使用tscfilename.ts将文件从JavaScript迁移到TypeScript。(2)假设由于奇怪的行为我们想将以下JavaScript文件更改为TypeScript:functionmy_sum(a,b){returna+b;}leta=4;letb="5";my_sum(a,b);好消息。任何JS文件在技术上都是有效的TypeScript文件,因此您有了一个良好的开端——只需将文件扩展名从.js切换为.ts。TypeScript具有类型推断功能,这意味着它可以自动推断出您使用的某些类型,而无需您添加它们。在这种情况下,它假设函数对两个类型为any的变量求和,这是正确的,但现在用处不大。如果我们只想对数字求和,我们可以添加类型签名my_sum使其只接受数字。函数my_sum(a:number,b:number){returna+b;}leta=4;letb="5";my_sum(a,b);现在TypeScript给了我们一个错误。“字符串”类型的参数不可分配给“数字”类型的参数。幸运的是,我们发现了错误。:)为了进一步避免此类错误,您还可以为变量添加类型定义。letb:number="5"//Type'"5"'isnotassignabletotype'number'.letb:number=5//Everythingok.TypeScript在它能做什么以及如何帮助你方面非常灵活。有关如何将现有JavaScript代码库移动到TypeScript或使用TypeScript改进JS代码的不太简单的示例,请阅读本指南。4.如何在浏览器中使用TypeScript?要在浏览器中运行TypeScript,您需要使用TypeScript编译器(tsc)将其转换为JavaScript。在这种情况下,tsc会根据.ts代码创建一个新的.js文件,您可以使用JavaScript文件的任何方式使用它。结论总的来说,TypeScript是您工具集中的一个很棒的工具,即使您没有充分利用它也是如此。从小处着手并逐渐发展、学习和添加新功能很容易。TypeScript实用且对初学者友好,因此无需担心。本文由文舒琪伍翻译自GintsDreimanis和OlgaBolgurtseva的文章《Why You Should Choose TypeScript Over JavaScript》,转载请注明出处,原文链接:https://serokell.io/blog/why-typescript)
