还不知道typescript
是啥的前端童鞋需要做下功课了。
接触typescript
挺早的。13年底的时候,公司的牛人在团队内推广typescript
,没多久我们就把typescript
做的项目搞上了生产环境。玩新东西的初期都是很爽的,但没多久就变成了灾难。团队人员更替,培训/学习成本增加;开发工具不统一,效率极其低下;ts
带来的利好被消耗的一干二净,只有无尽的坑。种种不顺,最后不得不把所有ts
文件删除。
这是一次不好的经历,后面我很长一段时间都没再写过typescript
了。但是,15年发生了两件事,让typescript
再次回到我的视线。
一是es6
规范的落地,二是visual studio code
的发布。这两条正好解决了上面提到的两个主要痛点:语言和工具。
随着es6
的普及,应该没几个前端童鞋会说自己不会点es6
了吧。typescript
最初就是基于es6
的,箭头函数、模块、类等等,只不过是在es6
的基础上加了个强类型(要是会as
就更简单了)。放到现在的前端环境,typescript
的学习成本已经很低了,比各种前端框架的学习成本都低,可以放心在团队内推广。
再说开发工具。typescript
刚出的时候只有vs
、vim
、webstorm
支持,除了微软自家vs
系列,其他编辑器对ts
的支持仅仅只有语法检测,智能提示、重命名什么的那是妄想。
而visual studio
体积太大,轻量级的express
也接近1G了,光这一点就能吓跑一拨童鞋了。然而,去年4月底,visual studio code
横空出世,没有vs
家族的庞大体积,性能又甩出同源的atom
几条街,对typescript
和javascript
的支持相当给力,简直就是为前端童鞋而生的。今年4月中旬,vs code
就会发布1.0
版本,也就下周的事了。要不为什么说ms
大法好?
除了语言和工具,typescript
的生态也在不断完善,DefinitelyTyped上有各种主流框架/类库的头文件,满足各种各样的需求;头文件管理工具tsd(已经废弃,新的工具叫typings)也做的越来越好,ts
项目管理一个json
文件就搞定。
一门语言,有了良好的生态,要火起来那是迟早的事。
好了,说回正题。
react
第一次看到React.propTypes
的时候,心想这不就是interface
么,typescript
+react
指日可待啊。果然,typescript
从 v1.6
开始支持jsx
语法。组件的props
和state
都可以定义interface
,类型检测有了,propTypes
拜拜。
直接贴代码:
interface Props {
from: string;
message: string;
}
class Greeting extends React.Component<Props,any> {
render () {
const {from,message} = this.props;
return (
<div>
<p>来自{from}的消息</p>
<p>{message}</p>
</div>
)
}
}
配上vs code
,到哪都有的智能提示简直不能再爽,贴张gif感受下。
Greeting
这个组件有两个prop
,from
和message
,不传这两个prop
或者类型搞错,编辑器都会有提示,state
也是一样的道理。这tm就是生产力啊!!!
最终编译出来的文件长这个样子,再搭配webpack
简直完美。
前一阵子写的web版cnode就是用typescript
+react
写的。
node
js
不是java
之类的静态语言,很多错误都只能在运行的时候才发现,而typescript
正好弥补了这一点,强类型让很多错误在开发的时候就能被发现。再有人吐槽node
不能搞大型应用,typescript
+node
分分钟打脸。
除了强类型外,用typescript
还可以体验node
暂时不支持的es6
特性,现在有很多童鞋都是直接写再用babel
编译,而typescript
生来就具备这一能力,在一定程度上取代了babel
的作用。
v1.7
的typescript
已经支持async/await
,异步流程控制不再是问题。koa2
发布了,对应的koa.d.ts
也有人写好了(感谢DavidCai1993童鞋),现在就是typescript
+node
的最好时机。
直接看图:
代码和用js
写没什么两样,通过头文件,可以很清楚地知道变量类型、函数返回值等信息,不用查api
,不怕会写错。
那只剩调试的问题了,typescript
和babel
一样,都可以通过sourcemap
来调试,做好配置,和调试js
一毛一样。
以koa2
为例:
结语
typescript
是好东西,大家快搞起!
typescript
是好东西,大家快搞起!
typescript
是好东西,大家快搞起!