能用js重写的都会被typescript重写

蚊子前端博客
发布于 2019-05-13 20:50
TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码,包括流行的JavaScript库,并从JavaScript代码中调用TypeScript代码

能被js重写的中奖被typescript重写-蚊子的前端博客

没用过typescript可能会下面的两个疑问:

  1. javascript越来越完善,还有没有必要学习typescript?

  2. typescript学习的成本如何呢?

1. typescript的生态

针对这两个疑问我们来稍微地解答下:

typescript是javascript的超集,所有es2016, es2017, es2018等等,包括未来的标准就会被包含在typescript中:

typescript是javascript的超集-蚊子的前端博客

尤其在多人合作的项目中,typescript能强制开发者的标准,对其他的开发者能天然的做到文档提示的功能,例如这段代码:

COPYJAVASCRIPT

/** * 判断当前商品的状态 * qcoin/object/redpack/flow类型的商品里,1表示待领取,2表示已领取; * code,url等类型的商品,会直接进行发送,1就表示已领取,没有状态2 * 统一后:state: 0:未成功, 1:待领取, 2:已领取, 3:已过期, 4:已下架 * * @param state 当前商品的状态 * @param type qcoin(QB), object(实物), code(兑换码), url(纯链接), redpack(现金红包), flow(流量型) */ const getOrderState = (state: number, type: string): number => { if (state === 1 && (type === 'code' || type === 'url')) { return 2; } return state; };

在调用getOrderState方法时,能直接提示该方法有几个参数,每个参数的类型是什么,返回的数据是什么类型的,如果错误地调用了该方法,则在编写阶段就会提示出来!

同时通过Google的搜索量上来看,大概有1850万的搜索结果,typescript的生态是越来越好。

typescript在Google中的搜索结果-蚊子的前端博客

而且,typescript对angular和react有着优良的支持,在使用react编写代码的过程中,同时尤雨溪也在用typescript对Vue3.0进行重写。之前尤雨溪也在知乎上说压flow压错了宝,typescript真香https://www.zhihu.com/question/310485097/answer/591869966

2. typescript的学习成本

typescript的学习非常的低,针对一些平常的操作,随手就可以写上相应的类型。

COPYJAVASCRIPT

function sum(a: number, b:number): number { return a + b; } sum(23, 56);

针对比较复杂的数据类型,可以通过interface来实现:

COPYJAVASCRIPT

interface GoodsItem { cost: number; // 现价 cover: string; // 图片 customer_service: string; // 规则 desc: string; // 描述 discount_score: number; // 积分价格 icon_url: string; // icon prize_enname: string; prize_zhname: string; rule: string[] | string; // 规则名 score_cost: number; // 积分兑换的价格 sending_count_today: number; // 今日发放的上限 sending_count_total: number; // 总量 short_name: string; // 短名称 sort: number; // 权重 state: number; // 状态 type: string; // 类型 validity: string; // 有效期 } let goods: GoodsItem; // 使用GoodsItem来定义goods变量

当然,对一些更加复杂的,比如泛型等则需要特意地学习下。这里可以看下知乎上总结的typescript骚操作

3. 总结

最开始写页面时,使用的是Vue,那时候就是纯按照教程上的方式来编写的,例如data, computed, watch等方法。在后来的项目中,使用vue-property-decorator来进行实现,虽然对于默认的对象书写方式有类型推导支持,但里面的实现绕了很多弯。问题的本质其实很简单:因为当初 API 的设计根本就没有考虑类型系统,Vue2.x对typescript支持的非常不好,我们也期待Vue3.0出现的变更。最近改用react写新的项目时,typescript发挥它很大的优势,类型提醒、数据提示(如dom对象下的方法)等,支持地都特别棒.

自从接触了typescript,总想着把之前所有用javascript实现的代码再用typescript重构一下。但是,历史代码能不动还是别动了,在以后新的项目中好好使用typescript即可!

标签:
阅读(1234)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆