用typescript写react和node是怎样的一种体验

Posted 2021-04-25 前端那些事儿

还不知道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为例：

好东西记得分享哦！