本文目录
- TypeScript会成为ES的标准吗
- TypeScript解决了什么痛点
- TypeScript前景怎么样
- 作为前端，有必要去学习TypeScript吗
- TypeScript和JavaScript的区别
- 目前前端项目用TypeScript开发的多吗
- 第三节:TypeScript对象类型
- TypeScript 和 JavaScript 的区别是什么
- 来做操吧！深入 TypeScript 高级类型和类型体操
- TypeScript 速成教程
TypeScript会成为ES的标准吗
不会~
ES：全称ECMAScript,简称ES。第一个版本是在2015年6月进行发布，叫做ES2015，后面以每年一个版本的速度发展到如今的ES9。ES是一种规范，所有的主流浏览器需要遵循ES的规范去实现，而我们熟知的JavaScript是ES规范的实现。
TS：全称TypeScript，简称TS。TS是微软发布的一款编程语言，定位是JavaScript的超集（兼容JS），但是他必须经过编译后才能运行在JS环境中。核心功能是类型系统和提前实现ES的新特性。
是不是觉得TS终于支持类型检查了？有点高级语言的味道了？所以就觉得这么牛逼的语言迟早会成为ES的标准？个人认为TS不会成为ES的标准，主要有以下几点原因：
TS的定位是JS的超集，有一个先后顺序的，不是说你TS牛逼，出了一些新特性，然后ES就纳入标准了。而是ES先出proposal，你TS去实现支持，没啥大的问题然后就纳入ES标准了。明白了这个关系了吧？
主流浏览器只认ES标准，现在已经完美兼容支持ES6语法了。TS是不能在浏览器运行起来的，TS是基于JS实现的，必须打包编译成JS语言才能跑起来。
但是TS一定是前端同学必须掌握的语言，他的类型系统让你在开发编译阶段就能发现类型不一致问题，同时也可以减少一堆类型检查的代码，一些框架（vue3.0）也会基于TS语言进行开发，TS能够提前享受ES的新特性。
以上是个人认为TS不会成为ES的标准，你觉得呢？欢迎交流讨论，批评指正~
TypeScript解决了什么痛点
TypeScript 本身就不细说了，无非就是微软推出来的一个 JavaScript 的超集而已。
既然 TypeScript 被定义为 JavaScript 的超集，那么TS的出现必然是为了解决JS所存的问题，那么JS存在什么问题呢？
1、弱类型，这TM的是真的弱啊。通篇只需要用 var 声明一下就可以了，甚至你不声明也能用。这还是小事，谁又能体会变量提升带来的莫名其妙的问题？好在有 let 了，可惜仍旧没强类型。
2、对象，Java说我有类，JavaScript说我有原型；Java说我有继承，JavaScript说我有原型链。谁能说说类和原型有嘛区别？哪个神又能把原型链说得明明白白？
3、我能说 == 和 === 是不一样的吗？你能想象判定等于时的纠结滋味么？
4、有谁知道 变量 判断 要同时进行 null 和 undefined check吗？我可以说 undefined 是一个类型么？
5、有谁知道 NaN 是一个类型么？对了，我们JS还有一个 isNaN的方法呢。
6、还有一个闭包，我 f.u.c.k，谁有本事别背书，来给老妖解释一下，再解释一下你在哪种场景下会使用闭包？
欢天喜地迎财神，啊，不对，是迎TS。
自从用上了 TS，把我给激动的啊。连每天上厕所的次数都翻了倍。
TS好，TS妙，TS好的呱呱叫。
1、静态类型化，通过类型注解提供编译时的静态类型检查
2、大型的开发项目，使用TypeScript工具来进行重构更容易、便捷。
3、类型安全，在编码期间检测错误的功能，而不是在编译项目时检测错误。我们终于抛弃了弱鸡。
4、引入了JavaScript中没有的“类”概念。
5、引入模块的概念，可以把声明、数据、函数和类封装在模块中。
絮絮叨叨地说了半天，老妖兴奋的眉毛都翘了。总之，如果前端项目规模比较大，建议你上TS别含糊。如果就几个网页那还用JS吧。
TypeScript前景怎么样
谢谢邀请！
在回答这个问题之前，我们首先要搞清楚，typescript是什么？它有什么好处，能给我们带来什么收益？
什么是typescript？
它是由微软公司开发的一套脚本语言，作者认为它是普通javaScript的SuperSet。它并不能直接运行在浏览器或者服务器上，所以呢，在运行之前需要经过编译时的处理。官网说编译后可以运行在任何平台、任何服务器、任何系统上。它也是开源的，大家可以到某著名代码托管平台查看源码，但是个人理解这个开源最终解释权还是微软公司来定。
typescript的编译
我相信每一个学习ts的同学对它的第一印象绝对是它能做类型检查，比如对一些变量，函数的参数以及返回值等等做类型检查，这些检查都是在编译时做的，当你在使用编译器转换成js的过程中就可以检查出来很多错误，这样可以减少出现bug的几率，提高我们代码的质量。ts作者已经为我们提供了很好用的cli，我们可以根据自己的需要定义tsconfig。
普通的js编译通常会有以下几个步骤：
扫描分析-》AST-》转换-》目标代码
ts在这个中间加入一步代码类型检查：
扫描分析-》AST-》类型检查-》转换-》目标代码
在你开发ts的时候，cli可以实时提示代码问题
注：ts不仅仅可以转化成js，也可以转换成其他语言
typescript的优点
首先，个人理解类型检查是它最大的特点，也可以说是它最大的优点，所有的配套设施都是围绕着它来做的。
其次，ts提供了诸如接口、抽象、泛型、private、protected、public等在其他语言诸如java，c常见的方式，这些东西都是原生js不具有的，所以开发思想需要有所转变。
第三点，ts提供了最新的js语法支持
第四点，angular2就是用ts开发，如果你的团队选择它作为技术栈，那么ts就是你的基础，学会了ts就很自然的可以开发angular
typescript的活跃度
ts语言本身大概几个月发布一个新版本，目前90%的知名的开源库都提供类型定义文件，自己也能很方便的发布ts开源代码。目前bat等一线互联网公司也都或多或少的在使用typescript，整体活跃度还是不错的，所以前景还是明朗的。
个人理解，ts更适合通用性很强的代码，不适合迭代速度很快的业务代码。另外对人员素质要求也变的更高，选型应该量力而行。
喜欢我的回答就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
作为前端，有必要去学习TypeScript吗
感谢邀约，你的这个问题提的很好，10月5日凌晨，对于Vue来说是个重要的日子，尤雨溪公布了 Vue 3 源代码，这次源代码最大的亮点就是 98% 以上使用TypeScript 编写，目前就有一个很现实的问题摆在我们前端开发者的面前，如果你不学习 TypeScript ，Vue 源代码你就看的很吃力。
因此，关于你的提问，我可以肯定的告诉你，作为前端开发者，我们此时比以往任何时候更需要学习TypeScript，以下是针对这个答案的观点，欢迎大家指正。
首先我们来了解下什么是TypeScript
C#语言的创始人 Anders Hejlsberg 设计了 TypeScript，并于2013年6月19日发布了其第一个正式版本，它是JavaScript的一个超集，之所以设计这个语言的初衷就是帮助前端开发人员能像后端开发人员那样利用高级语言的特性进行编写代码。比如可以利用高级语言的这些特点：强类型、面向对象、语法检查，代码编译等。TypeScript 还有一个最大的特点就是可编译 ，编译的好处就是有利于发现错误，一发现错误就终止编译，提前帮我们定位问题，编译通过后，就会将 TypeScript 语言转换成高质量的原生JavaScript 代码。
经过这几年的发展，TypeScript 的最新版本是3.X，目前是微软最有影响力的产品之一，最重要的一点是现在完全免费并且开源。还有一个比较有趣的事情是，连谷歌这样竞争对手，在其 Angular 的前端框架产品上，也放下成见，从2.0 版本就开始拥抱TypeScript，可见谷歌在这件事情多么有先见知名，现在 React 、Vue 才意识到使用TypeScript。从目前的情况来看，如果你不学习TypeScript，Angular 框架你就无法使用，在过不了多久，React 、Vue 也不好说会不会强制要求我们使用TypeScript，反正Angular 最早这么干了，目前还是主流的前端框架之一。
然后我们在来分析下 JavaScript 的现状
这几年 JavaScript 可谓发展迅速，可谓全平台通吃，现流行称作“大前端”，目前前端不仅能做网站、还能做手机端、WebGL 3D 动画、VR、后端、游戏开发、物联网开发、甚至人工智能等等，这些互联网产品的主要形态，几乎都可以用前端来完成。由于其发展太快，JavaScript 这门语言也在紧跟时代的步伐，并且改名ECMAScript，几乎每年都会有新版本发布，目前最新版本应该到10了，就是这样的发展速度，还是与java 和 c# 这些成熟的高级语言还有很大的距离。由于版本的问题，我们在项目中可能混杂着各版本的脚本，造成了规范不统一，兼容性差的各种问题。
接下来，我们来回顾下 JavaScript 的常见的场景，由于其实弱语言的特点，不会进行类型检查，比如 1+“1” 这个问题，有可能是我们人为失误的原因多写了双引号，其结果不会报错，会正常输出一个我们不想见到的结果11，这就造成了我们很难发现问题。除此之外，还有莫名其妙的各种undefined问题，也不会影响程序运行，增加了我排查问题的难度。
因此我们需要一个工具帮我们降低 JavaScript 弱语言的脆弱性，减少由于不正确类型导致错误产生的风险和各种版本混杂造成错误的风险等等。TypeScript 的出现正好解决了我们的这类问题。
接下来具体分析下 TypeScript 的特点和优势
1、入门容易，前端开发者很容易上手
TypeScript 从表面上看来就和普通的 JavaScript 代码差不多，无非就是把高级语言的强类型这个最主要的特征引入JavaScript，就好像为 JavaScript 上了一把高级语言强类型的锁，避免这类问题的产生，由此不得不佩服微软的良苦用心，就是为了让我们前端开发者更好的更快的学习TypeScript。我们先来看段代码，理解下强类型的特征，如下代码所示：
你可能认为这段代码很平常，如果你这样调用 increaseAge(cat)，TypeScript 编译器就会报出错误，提示你increaseAge这个函数的参数必须是数字。如果是原生 JavaScript 不但不报错，还会正常的返回结果，这就大大增加了我们开发过程中潜在的风险及排查错误的时间成本。这也许就是TypeScript 的魅力所在，提前帮我们发现代码出现错的风险。
2、按需编译成我们指定的 JavaScript 版本
在上面分析 JavaScript 的现状时，我们提及到 JavaScript 版本几乎每年都会有新的版本，如果你要写出兼容性比较高的脚本，对于我们前端开发者来说是一个很大的挑战，你不能保证每个人都使用let，或者超前使用最新语法特性等。TypeScript 却很好的解决了此问题，你可以按需输出你需要的脚本，比如 ECMAScript 3、ECMAScript 5 、ECMAScript 6 。同时 TypeScript 还与时俱进，紧跟 JavaScript 的新特性，这就意味你可以使用这些新特性进行编写，无需考虑其是否兼容，兼容的事情都交给 JavaScript 编译器吧。
3、代码规范标准，有利于团队协作开发
现在的互联网产品越来越复杂，形态又多，各终终端，一个产品不可能只有一个前端进行开发，现在前端开发也是团队的开发模式，刚才提及到 JavaScript 本身的特点还有其发展太快，这就会造成每个人写代码的随意性就会很大，你当然可以为团队引入 eslint 这些插件进行代码质量检查，但是你要整理出这些规范来估计要花费不少的时间。与其花时间在这上面，还不如在TypeScript 的基础上，结合 TypeScript 的特点做一套标准即可来应对 JavaScript 版本不断更新的特点。
最后给前端初学者的一些建议
如果你是 JavaScript 的新手，我不建议你一上来就学习 TypeScript，等你有了一定的基础，对前端的概念和逻辑有一定的认知后，再学 TypeScript 也不晚，并且学习起来更快 ，这样你就会写出更健壮的 TypeScript。TypeScript 这个工具的设计初衷并不是为了吸引更多的人学习前端，而是为了让具有一定基础的前端开发者编能像其他高级语言开发者一样编写出质量更高的健壮性的代码。
小节
今天的内容就分享到这里，不知道我的这些观点是否能说服你去学习 TypeScript 。还有一个原因我漏掉了，我在这里补充下，你会发现目前端岗位的招聘需求里有的公司都明确要求熟练掌握TypeScript啦 ，学习TypeScript本身并不难。它像JavaScript一样编写和运行，只是增加一些新的理念和语法糖，我们学起来也会更加顺手，加油吧，现在开始学习 TypeScript 并不晚。
感谢大家阅读，如果你有什么好的想法欢迎到留言区分享交流，如果你赞同我的回答，欢迎给个赞和转发，谢谢支持。TypeScript和JavaScript的区别
区别主要有两点；
javascript和typescript的区别一：概念对比
JavaScript 是一种轻量级的解释性脚本语言，无需编译，可嵌入到 HTML 页面中，在浏览器端执行，能够实现浏览器端丰富的交互功能，为用户带来流畅多样的用户体验。
TypeScript代码保存在ts文件中，ts文件经过编译之后会生成一个js文件，任何有效的JavaScript代码都可以直接作为TypeScript代码编译，只不过编译过后的代码与原JavaScript代码相同，TypeScript代码编译后则会转换为对应的JavaScript代码。
javascript和typescript的区别二：内容对比
1、TypeScript 引入了 JavaScript 中没有的“类”概念。
虽然ES6已经支持类，但是TypeScript与ES6的类还是不完全一样的，ts代码可以通过类型注解声明变量的类型。
2、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
3、TypeScript 通过类型注解提供编译时的静态类型检查。
通过对比可以清晰的看到，在ts代码中可以在声明变量的时候加上": 类型"来描述变量的类型，即类型注解。
4、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
5、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
6、TypeScript 为函数提供了缺省参数值。
在TypeScript的函数中我们可以给每个参数提供类型注解，还能为函数提供返回类型注解（在参数列表后的":类型"），同时TypeScript可以在参数名右边加上一个？表示可选参数。
7、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
目前前端项目用TypeScript开发的多吗
没用。
JS的特性就是灵活，比如一个函数一个参数，拓展性放开就是把入参弄成一个对象。
当对象加混合够用的时候就没有必要上class，当对象加混合不够用的时候再用class的继承特性，同时失去了混合的灵活性。
同样道理，JS加新特性够用的时候，没必要上TS，当JS加新特性不够用的时候，再使用TS的约束，同时失去了JS的灵活性。
很明显，绝大部分的场景JS加新特性足够了，与其约束TS，不如提升规范与模式。
大部分推TS的，得是Java（C#）转行或者提意见，纯原生的前端提TS就是东施效颦，以为可以更好的约束，实际上是成本远远大于效果（招人，培训等等），当别人问到的时候，含着痛苦的眼泪表示“TS真香”（别问我怎么知道的）。
第三节:TypeScript对象类型
在 JavaScript 中，我们分组和传递数据的基本方式是通过对象。在 TypeScript 中，我们通过 对象类型 来表示它们。
而TypeScript的核心原则之一是对值所具有的的结构进行类型检查,
之前的数据类型中已经了解,如何限定变量的类型
例如:
如果变量的值不是基本数据类型的值,而是一个对象,可以使用 object 类型
这种写法只能限定变量是object 类型, 但是没法明确表明或限定对象内部属性以及值类型,
也就是说示例中name可是是任意数据类型;属性也不限定于 name 和 age
如果要限定对象属性值的类型,就需要使用字面量的方式进行类型注释
这样的写法虽然达到了限定对象内部结构, 但同时也带来了另外的问题,如属性过多,或多次复用相同类型注释.
因此可以定义接口或 类型别名来定义统一的对象属性限制
通过接口命名对象类型
或者使用类型别名来命名对象类型
但是也需要注意到,在给使用了接口和类型别名时, 变量值接受对象中的属性必须和接口或类型别名中定义的属性一致.,多了少了编译时都会报错
为了让对象类型更具灵活性, 对象类型中每个属性都可以指定几件事:
很多时候,在处理对象类型的时候, 某些属性可能并不一定存在. 这个时候就需要用到可选属性.
可选属性通过在属性名称末尾添加 ? 来将这些属性标记为可选
例如:
可选属性在进行检测时,可选属性在实现上可有可无,这样就提升了对象类型使用的灵活性.
例如:
在TypeScript中对象属性也可以标记为 readonly 只读属性
只读属性虽然不会在运行时更改任何行为.但在类型检查期间无法写入只读标记的属性
通过在属性名前添加 readonly 来标记只读属性
例如:
此时 name 属性标记为只读属性, 当你尝试修改只读属性值时, TypeScript 报错,提示你不可修改
使用 readonly 修饰符并不一定意味着一个值完全不可修改, 也就是说属性属性值是一个引用类型的值,比如对象
readonly 只是表示当前属性本身不能被重写, 但属性值是引用类型, 引用类型内部的值是完全可变的
例如:
示例中只读属性 friend 内部的属性 name 被修改了, 没有任何报错.
因为TypeScript在检查这些类型是否兼容时不会考虑两种类型内部的属性是否有 readonly 标记存在, 所以 readonly 属性也可以通过别名来更改, 也就是说将有只读属性的类型重新分配给没有只读属性的类型
有的时候你并不提前知道类型属性的所有属性名, 但你确实知道属性值的类型
在这样的情况下, 你可以使用索引签名来描述可能值的类型,
例如:
示例中所以签名的意思,表示使用 number 类型的索引获取值时,返回 string 类型
TypeScript索引签名可以同时支持两种类型的索引器.
虽然字符串索引签名是描述’字典’模式的强大方式, 但TypeScript 还是强制所有的属性与其返回的类型匹配
例如:
示例中, age 属性的类型是 number 类型, 将会出现错误,因为与索引签名冲突,
其实也很好理解, 因为在使用 age 属性时, 无论通过, obj.age , 还是 obj , 其都符合索引签名的模式, 返回的值类型应该是 string 类型, 可是你有明确的声明了 age 属性的返回值是明确的 number 类型
此时TypeScript不知道使用索引签名的规则来检查值类型,还是具体罗列 age 属性的类型来检查值类型
这种问题,可以通过给索引签名使用联合类型解决
最后你 还可以在索引签名上使用只读属性 readonly , 表示不可以给索引分配值
例如:只读索引签名
在实际使用时,一个类型有可能是其他类型的具体版本的类型很常见,
简单说就是, 一个类型只有另外一个类型中的部分信息
例如:
有一下两个类型:
人员基本信息,包含姓名,年纪信息
具体学生信息: 包含除了姓名,年纪外还有学号,班级等信息
示例中, StudentPerson 包含 Person 所有的属性信息, 也可以说是 Person 类型更详细的类型,
试想一下,如果每个定义包含 name , age 属性以及其他不同属性类型时,我们都像示例中把 name , age 属性重新定义一遍.
这样的使用方式会导致 name , age 属性大量重复
解决这样重复声明一个类型中所有的属性,我们就可以使用 extends 关键字扩展原有类型, 并添加新的属性
关键字 extends 允许我们有效的从其他命名类型复制成员, 并添加我们想要的新成员
同样 interface 接口也允许从多个接口中扩展新的类型
这样我们就可以使用 WorkPerson 接口来注释一个具有姓名,年纪, 工作信息,工号属性对象的类型
interface 允许我们通过 extends 扩展其他类型来构建新的类型
TypeScript中还为类型别名提供了另外一种称之为交叉类型的类型扩展方式. 主要用于组合现有类型
使用 & 运算符定义交叉类型
示例中,通过交叉类型组合 Colorful 并 Circle 生成一个新的类型别名,类型别名同时具有前两个类型的所有属性
也可以在类型注释的时候使用交叉类型
理解两者的主要区别,方便我们在使用时做出取舍
通用对象类型:就是需要定义一个可以通用类型,
例如:定义一个Box类型,具有 contents 属性, 但是属性的值可能是 string , number , 等各种类型
首先会想到的是属性值类型使用联合类型
但联合类型也仅仅是罗列我们已知的类型, 在使用场景下可能并不通用, 例如值也有可能是其他对象类型呢
此时也许会考虑 any 任何类型
any类型可以工作,但是可能会导致意外事故发生
也可以尝试定义 unknown 类型
使用unknown类型就意味着我们需要进行类型检查,或者使用类型断言
不过 unknow 也不是特别安全, 比较安全的做法是为每一种类型添加一个接口
但这意味着如果是给函数参数使用, 我们需要创建不同函数或函数重载, 才能对这些进行操作
这样的处理方式不仅繁琐, 而且之后需要需要新的类型还需要引入新的类型和重载, 因为我们contents类型和重载实际上都是相同的,
最好的处理方式,就是我们创建一个声明类型参数的泛型,
其实就是将类型定义为像函数参数或变量一样, 类型参数就可以在多个地方使用, 通过传递具体类型,让使用类型参数的地方全部指代当前具体类型
此时当我们在使用 Box 类型注释时,必须给出一个类型参数来代替 Type
此时会将Box视为类型模板,其中 Type 为占位符将被其他类型替换,
Box 类型可以重复使用, Type 可以用任何类型代替, 这意味着当我们需要一个新类型 Box 是, 我们根本不要在 声明一个新的 Box 类型, 我们只需要传递不同的类型替换 Type 即可
这也意味着,如果将类型用在函数参数上,我们可以通过使用泛型函数来避免重载
示例中, 我们并没有限定obj的类型, 但是在传递参数后, TypeScript根据入参推断出 Type 是一个string 类型, 因此函数的第二个参数也必须是一个字符串类,否则TypeScript将发出错误警告
例如:如下调用函数
类型的别名也是可以通用的
例如
Box 接口也可以使用类型别名来替换
由于类型别名与接口不同,类型别名不仅仅可以描述对象,还可以使用类型别名来编写其他类型的通用帮助类型
TypeScript 和 JavaScript 的区别是什么
区别一：产生背景不同
1、TypeScript起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript，使得其能够胜任开发大型项目。
2、JavaScript在1995年由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
区别二：功能不同
1、TypeScript是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2、JavaScript是一种基于对象的语言，可以创建对象同时使用现有对象。但是Javascript并不支持其它面向对象语言所具有的继承和重载功能。
区别三：局限性不同
1、TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。
TypeScript支持为已存在的JavaScript库添加类型信息的头文件，扩展了它对于流行库的支持，如jQuery，MongoDB，Node.js和D3.js等。
2、由于JavaScript语言发展的较早，也较为成熟，所以仍有一大批开发人员坚持使用他们熟悉的脚本语言JavaScript，而不是学习TypeScript。
TypeScript代码需要被编译（输出JavaScript代码），这是TypeScript代码执行时的一个额外的步骤。
参考资料来源：百度百科—JavaScript
参考资料来源：百度百科—typescript
来做操吧！深入 TypeScript 高级类型和类型体操
TypeScript 给 JavaScript 扩展了类型的语法，我们可以给变量加上类型，在编译期间会做类型检查，配合器还能做更准确的智能提示。此外，TypeScript 还支持了高级类型用于增加类型系统的灵活性。就像 JavaScript 的高阶函数是生成函数的函数，React 的高阶组件是生成组件的组件一样，Typescript 的高级类型就是生成类型的类型。TypeScript 高级类型是通过 type 定义的有类型参数（也叫泛型）的类型，它会对传入的类型参数做一系列的类型计算，产生新的类型。type Pick = { ; }; 比如，这个 Pick 就是一个高级类型，它有类型参数 T 和 K，类型参数经过一系列的类型计算逻辑，会返回新的类型。TypeScript 高级类型会根据类型参数求出新的类型，这个过程会涉及一系列的类型计算逻辑，这些类型计算逻辑就叫做类型体操。当然，这并不是一个正式的概念，只是社区的戏称，因为有的类型计算逻辑是比较复杂的。TypeScript 的类型系统是图灵完备的，也就是说它能描述任何可计算逻辑，简单点来说就是循环、条件判断等该有的语法都有。既然 TypeScript 的类型系统这么强，那我们就做一些高级类型的类型体操来感受下吧。我们会做这些体操：用 ts 类型实现加法 用 ts 类型生成重复 N 次的字符串 用 ts 类型实现简易的 js parser（部分） 用 ts 类型实现对象属性按条件过滤 我把这些体操分为数字类的、字符串类的、对象类的，把这三种类型计算逻辑的规律掌握了，相信你的体操水平会提升一截。TypeScript 类型语法基础 在做体操之前，要先过一下 TypeScript 的类型语法，也就是能做哪些类型计算逻辑。既然说该有的语法都有，那我们来看下循环和判断都怎么做：ts 类型的条件判断 图片 ts 类型的条件判断的语法是 条件 ? 分支1 : 分支2 。extends 关键字是用于判断 A 是否是 B 类型的。例子中传入的类型参数 T 是 1，是 number 类型，所以最终返回的是 true。ts 类型的循环 图片ts 类型没有循环，但可以用递归来实现循环。我们要构造一个长度为 n 的数组，那么就要传入长度的类型参数 Len、元素的类型参数 Ele、以及构造出的数组的类型参数 Arr（用于递归）。然后类型计算逻辑就是判断 Arr 的 length 是否是 Len，如果是的话，就返回构造出的 Arr，不是的话就往其中添加一个元素继续构造。这样，我们就递归的创建了一个长度为 Len 的数组。ts 类型的字符串操作 ts 支持构造新的字符串：图片 也支持根据模式匹配来取字符串中的某一部分：图片ts 类型的对象操作 ts 支持对对象取属性、取值：图片 也可以创建新的对象类型：图片 通过 keyof 取出 obj 的所有属性名，通过 in 遍历属性名并取对应的属性值，通过这些来生成新的对象类型 newObj。我们过了一下常用的 ts 类型的语法，包括条件判断、循环（用递归实现）、字符串操作（构造字符串、取某部分子串）、对象操作（构造对象、取属性值）。接下来就用这些来做操吧。ts 类型体操练习 我们把体操分为 3 类来练习，之后再分别总结规律。数字类的类型体操 体操 1：实现高级类型 Add，能够做数字加法。 ts 类型能做数字加法么？肯定可以的，因为它是图灵完备的，也就是各种可计算逻辑都可以做。那怎么做呢？数组类型可以取 length 属性，那不就是个数字么。可以通过构造一定长度的数组来实现加法。上文我们实现了通过递归的方式实现了构造一定长度的新数组的高级类型：type createArray = Arr extends Len ? Arr : createArray 那只要分别构造两个不同长度的数组，然后合并到一起，再取 length 就行了。type Add = 我们测试下：图片 我们通过构造数组的方式实现了加法！小结下：ts 的高级类型想做数字的运算只能用构造不同长度的数组再取 length 的方式，因为没有类型的加减乘除运算符。字符串类的体操 体操2：把字符串重复 n 次。 字符串的构造我们前面学过了，就是通过 ${A}${B} 的方式，那只要做下计数，判断下重复次数就行了。计数涉及到了数字运算，要通过构造数组再取 length 的方式。所以，我们要递归的构造数组来计数，并且递归的构造字符串，然后判断数组长度达到目标就返回构造的字符串。所以有 Str（待重复的字符串）、Count（重复次数）、Arr（用于计数的数组）、ResStr（构造出的字符串）四个类型参数：type RepeactStr《str p="" string, Count, Arr extends Str, ResStr extends string = ’’》 = Arr extends Count ? ResStr : RepeactStr ; 我们递归的构造了数组和字符串，判断构造的数组的 length 如果到了 Count，就返回构造的字符串 ResStr，否则继续递归构造。测试一下：图片 小结：递归构造字符串的时候要通过递归构造数组来做计数，直到计数满足条件，就生成了目标的字符串。这个体操只用到了构造字符串，没用到字符串通过模式匹配取子串，我们再做一个体操。体操3: 实现简易的 JS Parser，能解析字符串 add(11,22) 的函数名和参数 字符串的解析需要根据模式匹配取子串。这里要分别解析函数名（functionName）、括号（brackets）、数字（num）、逗号（comma），我们分别实现相应的高级类型。解析函数名 函数名是由字母构成，我们只要一个个字符一个字符的取，判断是否为字母，是的话就记录下该字符，然后对剩下的字符串递归进行同样的处理，直到不为字母的字符，通过这样的方式就能取出函数名。我们先定义字母的类型：type alphaChars = ’a’ | ’b’ | ’c’ | ’d’ | ’e’ | ’f’ | ’g’ | ’h’ | ’i’ | ’j’ | ’k’ | ’l’ | ’m’ | ’n’ | ’o’ | ’p’ | ’q’ | ’r’ | ’s’ | ’t’ | ’u’ | ’v’ | ’w’ | ’x’ | ’y’ | ’z’ | ’A’ | ’B’ | ’C’ | ’D’ | ’E’ | ’F’ | ’G’ | ’H’ | ’I’ | ’J’ | ’K’ | ’L’ | ’M’ | ’N’ | ’O’ | ’P’ | ’Q’ | ’R’ | ’S’ | ’T’ | ’U’ | ’V’ | ’W’ | ’X’ | ’Y’ | ’Z’; 还有保存中间结果的类型：type TempParseResult = { token: Token, rest: Rest } 然后就一个个取字符来判断，把取到的字符构造成字符串存入中间结果：type parseFunctionName = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends alphaChars ? parseFunctionName : TempParseResult : never; 我们取了单个字符，然后判断是否是字母，是的话就把取到的字符构造成新的字符串，然后继续递归取剩余的字符串。测试一下：图片 图片 符合我们的需求，我们通过模式匹配取子串的方式解析出了函数名。然后继续解析剩下的。解析括号 括号的匹配也是同样的方式，而且括号只有一个字符，不需要递归的取，取一次就行。type brackets = ’(’ | ’)’; type parseBrackets = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends brackets ? TempParseResult : never : never; 测试一下：图片 继续解析剩下的：解析数字 数字的解析也是一个字符一个字符的取，判断是否匹配，匹配的话就递归取下一个字符，直到不匹配：type numChars = ’0’ | ’1’ | ’2’ | ’3’ | ’4’ | ’5’ | ’6’ | ’7’ | ’8’ | ’9’;type parseNum = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends numChars ? parseNum : TempParseResult : never; 测试一下：图片 继续解析剩下的：解析逗号 逗号和括号一样，只需要取一个字符判断即可，不需要递归。type parseComma = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends ’,’ ? TempParseResult : never : never; 测试一下：图片 至此，我们完成了所有的字符的解析，解析来按照顺序组织起来就行。整体解析 单个 token 的解析都做完了，整体解析就是组织下顺序，每次解析完拿到剩余的字符串传入下一个解析逻辑，全部解析完，就可以拿到各种信息。type parse = parseFunctionName extends TempParseResult ? parseBrackets extends TempParseResult ? parseNum extends TempParseResult ? parseComma extends TempParseResult ? parseNum extends TempParseResult ? parseBrackets extends TempParseResult ? { functionName: FunctionName, params: , }: never: never: never: never : never : never;测试一下：图片 大功告成，我们用 ts 类型实现了简易的 parser！小结：ts 类型可以通过模式匹配的方式取出子串，我们通过一个字符一个字符的取然后判断的方式，递归的拆分 token，然后按照顺序拆分出 token，就能实现字符串的解析。完整代码如下：type numChars = ’0’ | ’1’ | ’2’ | ’3’ | ’4’ | ’5’ | ’6’ | ’7’ | ’8’ | ’9’; type alphaChars = ’a’ | ’b’ | ’c’ | ’d’ | ’e’ | ’f’ | ’g’ | ’h’ | ’i’ | ’j’ | ’k’ | ’l’ | ’m’ | ’n’ | ’o’ | ’p’ | ’q’ | ’r’ | ’s’ | ’t’ | ’u’ | ’v’ | ’w’ | ’x’ | ’y’ | ’z’ | ’A’ | ’B’ | ’C’ | ’D’ | ’E’ | ’F’ | ’G’ | ’H’ | ’I’ | ’J’ | ’K’ | ’L’ | ’M’ | ’N’ | ’O’ | ’P’ | ’Q’ | ’R’ | ’S’ | ’T’ | ’U’ | ’V’ | ’W’ | ’X’ | ’Y’ | ’Z’;type TempParseResult = { token: Token, rest: Rest }type parseFunctionName = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends alphaChars ? parseFunctionName : TempParseResult : never;type brackets = ’(’ | ’)’; type parseBrackets = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends brackets ? TempParseResult : never : never;type parseNum = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends numChars ? parseNum : TempParseResult : never;type parseComma = SourceStr extends `${infer PrefixChar}${infer RestStr}` ? PrefixChar extends ’,’ ? TempParseResult : never : never;type parse = parseFunctionName extends TempParseResult ? parseBrackets extends TempParseResult ? parseNum extends TempParseResult ? parseComma extends TempParseResult ? parseNum extends TempParseResult ? parseBrackets extends TempParseResult ? { functionName: FunctionName, params: , }: never: never: never: never : never : never;type res = parse; 对象类的体操 体操4：实现高级类型，取出对象类型中的数字属性值 构造对象、取属性名、取属性值的语法上文学过了，这里组合下就行：type filterNumberProp = { : never }; 我们构造一个新的对象类型，通过 keyof 遍历对象的属性名，然后对属性值做判断，如果不是数字就返回 never，然后再取属性值。属性值返回 never 就代表这个属性不存在，就能达到过滤的效果。测试一下：图片 小结：对象类型可以通过 {} 构造新对象，通过 取属性值，通过 keyof 遍历属性名，综合这些语法就可以实现各种对象类型的逻辑。总结 TypeScript 给 JavaScript 扩展了类型的语法，而且还支持了高级类型来生成类型。TypeScript 的类型系统是图灵完备的，可以描述任何可计算逻辑：有 ? : 可以做条件判断，常配合 extends 使用 通过递归可以实现循环 可以做对象的构造 {}、取属性名 keyof、取属性值 T 可以做字符串的构造 ${a}${b}，字符串的模式匹配来取子串 str extends ${infer x}${infer y} 我们分别做了这些类型体操：ts 实现加法：通过递归构造数组再取长度 ts 实现重复字符串：递归构造数组来计数，然后递归构造字符串 ts 实现 parser：通过字符串模式匹配取子串的方式来解析每一部分，最后组合调用 ts 实现对象属性过滤：通过构造对象、取属性名、取值的语法组合调用 其中要注意的就是数字类的要通过构造数组取长度的方式来计算，再就是字符串的模式匹配结合 infer 保存中间结果来取子串，这两个是相对难度大一些的。其实各种高级类型，只要熟悉了 ts 类型语法，想清楚了逻辑就能一步步写出来，和写 JS 逻辑没啥本质区别，只不过它是用于生成类型的逻辑。读到这里，是不是感觉高级类型的类型体操也没有啥难度了呢？
TypeScript 速成教程
Typescript 是 javascript 的类型超集，旨在简化大型 JavaScript 应用程序的开发。Typescript 加入了常见的概念例如 类（classes），泛型（generics），接口（interfaces）和静态类型（static types）并允许开发人员使用静态检查和代码重构等工具。 为什么在意 Typescript 现在问题仍然是为什么你应该优选使用 Typescript。这有一些关于为什么 javascript 开发者应该考虑学习 Typescript 的原因。 静态类型 Javascript 是动态类型的，这意味着直到在运行时实例化时，它不知道变量的类型，这可能导致项目中的问题和错误。Typescript 加入了对 Javascript 静态类型支持如果你正确的使用它处理由变量类型的错误设定引起的错误。您仍然可以完全控制输入代码的严格程度，或者甚至根本不使用类型。 更好的 IDE 支持 Typescript 相比 Javascript 一个更大的优势是更好的 IED 支持包括了来自 Typescript 编译器智能，实时的提示，调试以及更多功能。这里还有一大堆扩展进一步 提升你的 Typescript 开发体验。 应用新的 ECMAScript 特性 Typescript 使您可以使用最新的 ECMAScript 功能，并将它们转换到您选择的 ECMAScript 目标。这意味着您可以使用最新的工具开发应用程序，而无需担心浏览器支持。 什么时候你该使用它 到目前为止，我们应该知道为什么 Typescript 是有用的以及如何改善我们的开发体验。但它并不是解决所有问题的方法，当然也不能阻止你自己编写可怕的代码。那么让我们来看看你应该在哪里使用 Typescript。 当你拥有一个很大的代码库时 Typescript 是大型代码库的一个很好的补充，因为它可以帮助您防止许多常见错误。这尤其适用于多个开发人员工作在同一项目之中。 当你项目成员早已知道静态类型语言时 另一个明显使用 Typescript 的场景是当你和你的团队已经知道静态类型的语言像 Java 和 C# 不想改为编写 Javascript。 设置/建立 要设置 typescript，我们只需要使用 npm 包管理器安装它并创建一个新的 Typescript 文件。 安装完成之后我们可以继续探寻 Typescript 提供给我们的语法和功能特性。 类型 现在让我们来看看 Typescript 所提供的类型： 数值（Number） Typescript 所有的值类型都是浮点数。所有的数字包括二进制和十六进制都是数值类型。 字符串（String） 与其他语言一样，Typescript 使用 String 数据类型来保存文本数据。 你还可以用反引号来应用多行字符串并嵌入表达式。 布尔类型（Boolean） Typescript 支持所有的基本数据类型，布尔类型，值必须为 true 或者 false。 指定类型 现在我们已经有了基本的数据类型，我们可以看看你如何在 Typescript 中指定类型。基本上，您只需要在名称和冒号后面写出变量的类型。 单一类型 这里例子为我们如何为变量指定字符串数据类型 所有其他数据类型也是这样使用。 多类型 你仍然可以通过 | 操作符为你的变量指定多个数据类型： 这里我们使用|为变量分配两种类型。现在我们可以在其中存储字符串和数值。 类型检测 现在让我们看看我们如何检查我们的变量是否具有正确的类型。我们有多种选择，但在这里我只展示了两个最常用的选项。 Typeof typeof 仅仅知道基本类型。这意味着它只能检查变量是否是我们上面定义的数据类型之一。 在此示例中，我们创建一个字符串类型变量并使用 typeof 命令检查 str 是否为 Number 类型（始终为 false）。然后我们打印是否是数值。 Instanceof instanceof 运算符与 typeof 几乎相同，只是它还可以检查 javascript 尚未定义的自定义类型。 在这里，我们创建一个自定义类型，我们稍后将在本文中讨论，然后创建它的实例。之后，我们检查它是否真的是 Human 类型的变量，如果是，则在控制台中打印。 类型断言 有时我们还需要将变量转换为特定的数据类型。这经常发生在你已经指定了一个泛型类型像 any 并且你想使用它具体的类型的方法。 有很多选择可以解决这个问题，但在这里我只分享其中两个。 As 关键字 通过在变量名之后使用 as 关键字跟随具体的数据类型来转换变量的类型。 这里我们将 str 变量转换为字符串，以便我们可以使用 length 属性（如果您的 TSLINT 设置允许，甚至可以在没有转换的情况下工作）。 》 操作符 我们也可以使用 》 运算符，它与 as 关键字具有完全相同的效果，只有语法差异。 此代码块与上面的代码块具有完全相同的功能。它只是语法不同。 数组 Typescript 中的数组是相同对象的集合，可以用两种不同的方式创建。 创建数组 使用 我们可以通过指定类型后跟 来定义数组对象，以表示它是一个数组。 在这个例子中，我们创建一个字符串数组，它包含三个不同的字符串值。 使用泛型数组 我们还可用指定 Array 定义泛型数组 这里我们创建一个数值数组，它包含 5 个不同的数字。 多（混合）类型数组 此外，我们还可以使用 | 操作符将多个类型分配给单个数组。 此例中我们创建了一个数值可以包含字符串和数值。 多维数组 Typescript 还允许我们定义多维数组，这意味着我们可以将数组保存在另一个数组中。我们可以通过使用多个运算符来创建一个多维数组。 这里我们创建一个包含另一个数字数组的数组。 元组（Tupels） 元组基本类似数组但有一点不同。我们可以定义每个位子上储存数据的类型。这意味着我们可以通过方括号内的枚举来限制固定索引位置的类型。 在此列中，我们定义了一个简单的元组，在索引 0 位置上指定为数值类型，在索引为 1 位置上指定为字符串类型。这意味着如果我们尝试在此索引上放置另一种数据类型，则会抛出错误。 以下是非法元组的示例： 枚举（Enums） 与大多数其他面向对象编程语言一样，Typescript 中的枚举允许我们定义一组命名常量。 Typescript 还提供基于数值和基于字符串的枚举。使用 enum 关键字定义 Typescript 中的枚举。 数值枚举 首先，我们将查看数值枚举，其中我们将键值与索引匹配。 上面，我们定义了数值枚举将 Playing 初始化为 0，Paused 为 1 等等。 我们也可以将初始化器留空，而 Typescript 会从零开始自动索引它。 字符串枚举 定义字符串枚举也十分简单，我们只需要在定义的每个枚举值后初始化字符串值。 这里我们通过使用字符串初始化我们的状态来定义字符串枚举。 对象（Objects） Typescript 中的对象是包含一组键值对的实例。这些值可以是变量，数组甚至函数。它也被视为表示非基本类型的数据类型。 我们可以使用大括号创建一个对象： 这里我们创建了一个 human 对象包含三个不同的键值对。 我们可以为对象加入方法： 自定义类型 Typescript 还允许我们自定义类型，以便于我们后续重用。要创建自定义类型，我们只需要使用 type 关键字并定义我们的类型。 在此示例中，我们定义了一个名为 Human 包含三个属性的自定义类型。现在让我们看看如何创建这种类型的对象。 在这里，我们创建自定义类型的实例并设置所需的属性。 方法参数和返回类型 Typescript 允许我们为方法参数和返回值指定数据类型。现在让我们看一下使用 Typescript 定义函数的语法。 这里我们有两个示例函数，它们都具有定义类型的参数。我们还看到在结束括号后定义返回类型。 现在我们可以像普通的 javascript 一样调用我们的函数，但编译器会检查我们是否为函数提供了正确的参数。 可选属性 Typescript 允许我们为方法(注：接口等同样可以定义可选属性)定义可选属性。我们通过 ? 操作符定义。 在这个例子中，lastName 是一个可选参数，这意味着当我们不提供调用函数时，我们不会从编译器中获得错误。 这表示 2 个示例都被视为正确的。 默认值 我们使用可选属性的第二种方法是为它指定一个默认值。我们可以通过直接在函数头部赋值来实现。 在此例我中我们 lastName 赋予了默认值这意味着我们不必每次调用方法时提供它。 接口（Interfaces） 让我们看个例子让定义更加清晰： 可选属性 在 Typescript 中，有时并不是所有接口属性都是必需的。可以使用 ? 运算符在属性后面将其设置为可选。 在这里，我们创建一个具有一个普通和一个可选属性的接口，该属性是使用 ? 运算符。这就是我们两个人初始化都有效的原因。 只读属性 我们的接口中一些属性也应该只在首次创建对象时修改赋值。我们可以通过将 readonly 关键字放在我们的属性名称之前来指定此功能。 在此示例中，id 属性是只读的，在创建对象后无法更改。 模块（Barrels Modules） Barrels 允许我们在一个更方便的模块中汇总多个导出模块。 我们仅需要创建一个新文件，它将导出我们项目中的多个模块 (译者注：根据 ECMAScript 定义一个文件定义一个模块，此处可能表示模块聚合(类似库等的入口文件))。 之后我们可以通过这个便利的单一导入语句引入这些模块。 泛型（Generics） 泛型允许我们创建兼容广泛类型而不是单一类型的组件。这使得我们的组件“ 开放”和复用。 现在您可能想知道为什么我们不只是使用任何（ any ）类型来使组件接受多种类型而不是单一类型。让我们看一个例子更好地了解。 我们想要一个简单的假函数（dummy function），它返回传入的参数： 然而 any 是通用的，某种程度它能接受所有类型参数但有一个很大的区别。我们丢失了我们传入的参数是什么类型以及返回值是什么类型。 所以让我们来看看，我们如何接受所有类型并知道它返回值的类型。 这里我们使用泛型参数 T，因此我们可以捕获变量类型并在以后使用它。我们还使用它作为返回参数类型，它允许我们在检查代码时看到相应的类型。 更多详细介绍你可以查看Charly Poly关于Generics and overloads的文章 访问修饰符（Access Modifiers） 访问修饰符控制我们类成员的可访问性。 Typescript 支持三种访问修饰符 - 公共的（public），私有的（private）和受保护的（protected）。 公共的 公共成员可以在任何地方访问，没有任何限制 这也是标准修饰符，这意味着您不需要使用 public 关键字为变量添加前缀。 私有的 私有成员只能在其定义的类中能访问。 受保护的 保护成员只能在其定义的类及其子类中访问。 TSLINT TSLINT 是 Typescript 的标准 linter，可以帮助我们编写干净，可维护和可读的代码。它可以使用我们自己的 lint 规则，配置和格式化程序进行自定义。 设置 首先我们需要安装 Typescript 和 tslint，我们可以全局安装和局部安装： 之后，我们可以使用 TSLINT CLI 在我们的项目中初始化 TSLINT。 现在我们有了 tslint.json 文件，我们可以开始配置我们的规则了。 配置 TSLINT 允许使用配置我们自己的规则并自定义代码的外观。默认情况下，tslint.json 文件看起来像这样，只使用默认规则。 我们可以通过将它们放在 rules 对象中来添加其他规则。 有关所有可用规则的 概述，您可以查看官方文档。 结论 恭喜您一路走到最后！希望此篇文章帮助您理解 Typescript 的基础知识以及如何在项目中使用。 如果您发现这个有用，请考虑推荐并与其他开发人员共享。也可以访问我的网站学习更多。
