关于typescript的研究

348 阅读6分钟

1、TS出现的背景

      自从前端项目趋向工程化之后,模块化开发模式开始成为主流。公用的逻辑和UI被抽离出来,独立成模块,供外部调用。但是,在调用这些模块的时候,会面临这各种沟通问题——因为要我们要知道如何调用,以及要相关的参数、返回值的类型与结构。

       在传统的做法中,如第三方库JQuery,想要通过源文件查看这个库是如何被调用的,需要查看可能被压缩混淆过的源文件,难度极大,因此只能访问技术网站,查API文档。当然对于第三方库,文档一般都是维护好的,故多花费一些时间去弄明白即可;但是对于内部库,一旦文档维护不好,就可能会出现用法不对等各种问题,从而影响开发质量和进度。

       于是,typescript应运而生。我们知道JavaScript是弱语言类型,其最大的编程陋习就是可能会造成我们类型思维的缺失。而typescript是JavaScript的超集,它在JavaScript的基础上设计了一套新语法,提供了静态类型高级数据类型等语言特性,但是最终还是编译成JavaScript执行。typescript的强类型等语法检查和编译都是在编译时实现的,在运行时还是JavaScript。

        在与JavaScript的对比中可以发现,typescript的参数和返回值类型明确,在调用时不会用错,且它的数据结构也是明确的,这样就有利于语法排错和数据流的可预测性。

2、TS给我们所带来的

       由stackoverflow 发起的2020年程序员调查中,TypeScript 在程序员最爱的编程语言中排在了第二位,由此可见ts深受程序员的喜爱,那么我们不禁会疑惑,究竟是什么让ts备受欢迎?可以发现typescript给我们带来了很多好处:

(1)TypeScript 有类型检查机制,写代码的时候就能够及时发现错误,有利于语法排错。例如在给函数误传了类型不同的参数,由VS Code 对 TypeScript 的强力支持,就能够立刻看到错误。

(2)VS Code 能根据 TypeScript 的类型信息提供更好的代码提示和补全功能。在大型项目的多人协作编写代码过程中,明确的类型起到了文档的作用,这样让代码更加的具备可读性、规范性以及更易于维护,因此大公司、大型项目更偏爱 TypeScript。

(3)typescript的学习成本较低,它的入门前提是会JavaScript,也就是入门门槛也比较低。所以只要会JavaScript就能编写出typescript代码。而且JavaScript发展快速,以往只能在typescript中使用的功能在JS中可能也可以用。

3、TS在实际开发中解决的问题

       由字面可以发现,typescript就是Type+Script,它**解决的核心问题就是JS中的type缺失的问题,**当然,要注意的是这个type指的是类型而非面向对象的类。在实际开发过程中,利用typescript编程既能享受静态类型带来的有点,又能让代码像JavaScript一样简洁与灵活,而TS在实际开发过程中所解决的问题上面也有所提及,接下来再说几点:

       Typescript全面支持了类型推导。例如随便用JavaScript写一个object,ts都可以推导出完善的interface类型。那么随着ts版本的推进,ts的类型推导能力也越来越而强大——比如要新定义一个类型,这是则是可以基于已有的类型,通过编程的手段,进行转化加工,最终得到一个新类型。

       此外,typescript并没有要求100%的静态类型覆盖。Javascript 代码可以用 Typescript 直接编译通过。所以 Javascript 项目想迁移 Typescript ,只需要批量把后缀改成 .ts,当你在一些地方希望享受静态类型的好处时,再逐渐补充类型定义。而碰到静态类型没有带来实质利益的case,也大可不必定义类型或者用any 来定义。

4、TS的重难点

     虽说TS入门简单:.js to .ts=>over?,但实际上进阶却是困难的,其中的重难点包括以下几点:

(1)可索引类型

       我们知道,ts的核心原则之一就是对值所具有的结构进行类型检查,接口为其中的契约,可索引类型也是接口的一种表现形式。

(2)interface  和 type 关键字【注:两者不互斥】

        interface  和 type 关键字的含义和功能非常接近,相同点是都可以用来表示 object、或function,且都可以被继承,只是语法上存在区别。

两者之间主要有以下区别:

        **interface:**同名的 interface 自动聚合,也可以跟同名的 class 自动聚合;只能表示 object、class、function 类型。

     **   type:**不仅仅能够表示 object、class、function,与 interface 不同,type 还可以用来标书其他的类型,比如基本数据类型、元素、并集等;不能重名(自然不存在同名聚合了),扩展已有的 type 需要创建新 type;支持复杂的类型操作。

(3)infer

       infer 关键字最早出现在 PR 里面,「表示在 extends 条件语句中待推断的类型变量」。在条件判断语句中,该关键字用于「替换手动获取类型」。

(4)工具泛型

       所谓的工具泛型,其实就是泛型的一些语法糖的实现。具体有:

       Partial的作用就是将传入的属性变为可选。

      ** Required**的作用是将传入的属性变为必选项。

      ** Readonly**将传入的属性变为只读选项。

       等等。

(5)类型断言

Typescript 允许我们覆盖它的推断(毕竟代码是我们自己写的),然后根据我们自定义的类型去分析它。这种机制,我们称之为 「类型断言」。

【注意】:

推荐类型断言的预发使用 as关键字,而不是<> ,防止歧义;

类型断言并非类型转换,类型断言发生在编译阶段。类型转换发生在运行时;

(6)函数重载

以上为概述,具体参看这篇文章:mp.weixin.qq.com/s?src=11&ti…

5、用TS的时候,遇到的问题,解决方法

       要说使用的时候所遇到的问题,那可多了,不仅有参数类型方面的疑惑,在重载方面也存在一定的不解,解决办法就是再重看官方文档,文档大概看完后没找到答案,就找度娘帮助一下,然后再看代码中相关的例子,还有不惑的地方,就向前辈请教,当然,在接下来的学习中也还有很多不足的地方,学习还需继续,同志还需努力!