关于Typescript
更新日期:
Typescript这事情,当你管理大点的应用的时候,就会感受到它的好处了。
认识Typescript
什么是Typescript
TypeScript是JavaScript的超集,带来了诸多新特性:
- 可选的静态类型
- 类型接口
- 在ES6和ES7被主流浏览器支持之前使用它们的新特性
- 编译为可被所有浏览器支持的JavaScript版本
- 强大的智能感知
Typescript特性
- 可选静态类型
类型可被添加到变量,函数,属性等。这将帮助编译器在App运行之前就能显示出任何潜在的代码警告。
给JavaScript加上可选的类型系统,很多事情是只有静态类型才能做的,给JavaScript加上静态类型后,就能将调试从运行期提前到编码期,诸如类型检查、越界检查这样的功能才能真正发挥作用。TypeScript的开发体验远远超过以往纯JavaScript的开发体验,无需运行程序即可修复潜在bug。
- 支持使用ES6和ES7的新特性
在TypeScript中,你可以直接使用ES6的最新特性,在编译时它会自动编译到ES3或ES5。
- 代码自动完成,代码智能感知
TS与JS
TS是一个应用程序级的JavaScript开发语言。
TS是JavaScript的超集,可以编译成纯JavaScript。
TS跨浏览器、跨操作系统、跨主机,开源。
TS始于JS,终于JS。遵循JavaScript的语法和语义,方便了无数的JavaScript开发者。
TS可以重用现有的JavaScript代码,调用流行的JavaScript库。
TS可以编译成简洁、简单的JavaScript代码,在任意浏览器、Node.js或任何兼容ES3的环境上运行。
TypeScript比JavaScript更具开发效率,包括:静态类型检查、基于符号的导航、语句自动完成、代码重构等。
TS提供了类、模块和接口,更易于构建组件。
参考
使用Typescript
关于Typescript的语法,更多的可参考官方文档,这里只列出常用的:基础类型、接口和类。
基础类型
TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型使用。
1 | // 布尔值 |
接口
TypeScript的核心原则之一是对值所具有的结构进行类型检查。
它有时被称做“鸭式辨型法”或“结构性子类型化”。
在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
1 | interface SquareConfig { |
- 接口继承
1 | interface Shape { |
类
ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。
1 | class Greeter { |
当接口继承了一个类类型时,它会继承类的成员但不包括其实现。
接口同样会继承到类的private和protected成员。
公共,私有与受保护的修饰符:
public
(默认): 可以自由的访问程序里定义的成员private
: 当成员被标记成private
时,它就不能在声明它的类的外部访问protected
:protected
修饰符与private
修饰符的行为很相似,但protected
成员在派生类中仍然可以访问readonly
: 将属性设置为只读的,只读属性必须在声明时或构造函数里被初始化
1 | class Person { |
在Typescript中,可以使用ES6很多新的特性,其中类Class也是ES6特性之一。包括getter
和setter
,其实都是ES6而不是Typescript的特性。
但public
、private
、protected
等,则是Typescript中增加的。
声明文件
大多数情况下,类型声明包的名字总是与它们在npm上的包的名字相同,但是有@types/
前缀:
1 | npm install -D @types/node |
这里我们参考node.d.ts
中的require
,在我们在typescript中使用require
的时候,若无安装@types/node
或是自己声明,会报错的:
1 | // 声明require |
项目配置
tsconfig.json
:文件中指定了用来编译这个项目的根文件和编译选项。tslint.json
:规则定义。
1 | // 常见tsconfig.json |
项目迁移
常用迁移步骤:
- 安装依赖(
typescript
/ts-loader
/tslib
等) - 文件重命名(
.js => .ts
|.jsx => .tsx
) - 添加
tsconfig.json
和tslint.json
- 调整Webpack配置(
resolve.extensions
/loaders
) - 添加声明文件(
@types/node
等)
为什么是Typescript
大型项目常见问题
- 类型不明确,甚至在使用中转换。
1 | var type = 1; |
- 对象成员属性不明确,使用容易出错。
1 | var obj = {a: 123, b: 323}; |
- 接口返回内容和格式不明确。
1 | ajax('url', function (json){ |
接手代码注释不多,相关变量命名不规范,变量类型、接口类型等均难以debug。
重构代码、重命名符号需要改动太多相关文件。
谁在使用Typescript
框架:Angular
工具:TSLint
编译器:VSCode
工具库:RxJS
、UI-ROUTER
UI:ANT Design
React UI库
APP:Reddit
Angular说
- TypeScript 拥有很好的工具。
它提供了先进的自动补全功能,导航,以及重构。有这样的工具几乎是开发大型项目的必要条件。没了这些工具,修改代码的恐惧将会导致该代码库在一个半只读(semi-read-only)状态, 并且使大规模重构变得极具风险,同时消耗巨大资金。
- TypeScript 使抽象概念明确。
一个好的设计在于定义良好的接口。支持接口的语言使得表达想法变得更加容易。
不能清楚地看到界限,开发者开始依赖具体类型而不是抽象接口,导致了紧密耦合。
- TypeScript 使代码更易阅读和理解。
Reddit说
- 要支持强类型。
- 要有很好的配套工具。
- 已经有了成功案例。
- 我们的工程师可以很快上手。
- 能同时工作于客户端和服务器。
- 有优秀的类库。
Typescript vs Flow:
Typescript是JavaScript的强类型版本。
Flow是通过一组可以添加到JavaScript的注解,然后通过工具检查正确性。
Flow的类型注解能自动的被Babel移除。
与TypeScript相比,Flow在类型检查中做得更好。
Typescript是强类型,能使代码有更少的类型相关bug,更容易构建大型应用,还有着丰富的生态系统。
TypeScript的一大加分项就是其生态系统,TypeScript的支持库实在是太棒了。
并且还支持目前流行的编辑器,比如VSCode, Atom和Sublime Text。
此外,TypeScript还支持解析JSDoc。
为什么使用Typescript
- 提供了先进的自动补全功能,导航,以及重构工具。
构建丰富的开发工具从第一天起就成为了TypeScript团队的明确目标。
这也是为什么他们构建了编程语言服务,使得编辑器可以提供类型检查以及自动补全的功能。那么多的编辑器都对TypeScript有极好的支持,就是因为TypeScript提供了编程语言服务。
- 是JavaScript的超集,从JavaScript迁移方。。
从JavaScript迁移到TypeScript不需要经过大改写。可以慢慢的、一次一个模块的迁移。
随便挑选一个模块,修改文件扩展名.js
为.ts
,然后逐步添加类型注释。当你完成了这个模块,再选择下一个。
一旦整个代码库都被类型化,你就可以开始调整编译器设置,使其对代码的检查更加严格。
- 支持接口,抽象设计。
在一个静态类型的编程语言中,使用接口来定义子系统之间的界限。
- 类型的支持,使代码更易阅读和理解。
我们不需要深入了解代码的实现,也不需要去阅读文档,就可以更更好地理解代码。
- 生态系统完善,支持库完备,已有不少使用TypeScript的成熟项目。
参考
结束语
很多时候,当我们维护不同重量级的应用,或是在不同的场景中使用应用的时候,面对的架构选择往往是不一样的。
就像我们在很小的页面里使用redux会觉得繁琐,在数据类型不多的对象或接口中使用typescript会觉得没啥效果一样,个人还是认为,好的架构在能遇见拓展性的同时,不过度设计,恰到好处才是最棒的。
码生艰难,写文不易,给我家猪囤点猫粮了喵~
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢