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

时间:2021-11-03 16:13:24

还不知道typescript是啥的前端童鞋需要做下功课了。

接触typescript挺早的。13年底的时候,公司的牛人在团队内推广typescript,没多久我们就把typescript做的项目搞上了生产环境。玩新东西的初期都是很爽的,但没多久就变成了灾难。团队人员更替,培训/学习成本增加;开发工具不统一,效率极其低下;ts带来的利好被消耗的一干二净,只有无尽的坑。种种不顺,最后不得不把所有ts文件删除。

这是一次不好的经历,后面我很长一段时间都没再写过typescript了。但是,15年发生了两件事,让typescript再次回到我的视线。

一是es6规范的落地,二是visual studio code的发布。这两条正好解决了上面提到的两个主要痛点:语言和工具。

随着es6的普及,应该没几个前端童鞋会说自己不会点es6了吧。typescript最初就是基于es6的,箭头函数、模块、类等等,只不过是在es6的基础上加了个强类型(要是会as就更简单了)。放到现在的前端环境,typescript的学习成本已经很低了,比各种前端框架的学习成本都低,可以放心在团队内推广。

再说开发工具。typescript刚出的时候只有vsvimwebstorm支持,除了微软自家vs系列,其他编辑器对ts的支持仅仅只有语法检测,智能提示、重命名什么的那是妄想。
visual studio体积太大,轻量级的express也接近1G了,光这一点就能吓跑一拨童鞋了。然而,去年4月底,visual studio code横空出世,没有vs家族的庞大体积,性能又甩出同源的atom几条街,对typescriptjavascript的支持相当给力,简直就是为前端童鞋而生的。今年4月中旬,vs code就会发布1.0版本,也就下周的事了。要不为什么说ms大法好?

除了语言和工具,typescript的生态也在不断完善,DefinitelyTyped上有各种主流框架/类库的头文件,满足各种各样的需求;头文件管理工具tsd(已经废弃,新的工具叫typings)也做的越来越好,ts项目管理一个json文件就搞定。

一门语言,有了良好的生态,要火起来那是迟早的事。

好了,说回正题。

react

第一次看到React.propTypes的时候,心想这不就是interface么,typescript+react指日可待啊。果然,typescript从 v1.6开始支持jsx语法。组件的propsstate都可以定义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感受下。

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

Greeting这个组件有两个propfrommessage,不传这两个prop或者类型搞错,编辑器都会有提示,state也是一样的道理。这tm就是生产力啊!!!

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

最终编译出来的文件长这个样子,再搭配webpack简直完美。

前一阵子写的web版cnode就是用typescript+react写的。

node

js不是java之类的静态语言,很多错误都只能在运行的时候才发现,而typescript正好弥补了这一点,强类型让很多错误在开发的时候就能被发现。再有人吐槽node不能搞大型应用,typescript+node分分钟打脸。

除了强类型外,用typescript还可以体验node暂时不支持的es6特性,现在有很多童鞋都是直接写再用babel编译,而typescript生来就具备这一能力,在一定程度上取代了babel的作用。

v1.7typescript已经支持async/await,异步流程控制不再是问题。koa2发布了,对应的koa.d.ts也有人写好了(感谢DavidCai1993童鞋),现在就是typescript+node的最好时机。

直接看图:

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

代码和用js写没什么两样,通过头文件,可以很清楚地知道变量类型、函数返回值等信息,不用查api,不怕会写错。

那只剩调试的问题了,typescriptbabel一样,都可以通过sourcemap来调试,做好配置,和调试js一毛一样。

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

koa2为例:

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

结语

typescript是好东西,大家快搞起!

typescript是好东西,大家快搞起!

typescript是好东西,大家快搞起!

最后,贴一下typescriptroadmap,中文版的在这里