【Angularjs系列】Angularjs项目中切换js到ts(下)

前面一篇文章说了如果将已有的js切换到ts,这篇文章会说项目中如果来了新的需求,如何用ts写新增的需求。

我们还是以ts & html & less为结构,如下:比如这次我们做活动案例添加了一个component组件,这里稍微说一下,最好都用component不要用controller,component复用性比较强且angular 2 +以后都是用的component,如果,我是说如果以后能够升级,那也能节省不少时间,但是目前项目中已有的controller不能改成component,因为我们项目中用的ui-router 0.2.x版本,这个版本的路由不支持component,只有ui-router 1.x.x才支持,所以路由那一块的还是得用controller,不涉及路由引用的都可以用component。(以后可以考虑升级ui-router):

【Angularjs系列】Angularjs项目中切换js到ts(下)_第1张图片

activityTemplate.component.ts: 看到了吧,全部强类型,没有js转换到ts用的any类型,可以定义类型interface, 这样开发起来方便,不容易出错,也有vscode的智能提示,这里需要注意的是ng下面定义了很多接口类型,所以引用ng下面的component,controller接口即可,包括angularjs里面的组件生命周期也已暴露接口。

【Angularjs系列】Angularjs项目中切换js到ts(下)_第2张图片

然后在module里面注册的时候,是new一个class构造器,这和之前的直接const一个component不同,需要注意:

【Angularjs系列】Angularjs项目中切换js到ts(下)_第3张图片

vipServices.controller.ts:消费者是一个controller,VIP 服务,可以看到这里注入了一个service通过$inject静态变量,然后构造里面强类型这个服务,接着就可以用了

【Angularjs系列】Angularjs项目中切换js到ts(下)_第4张图片

vipServices.html:html模板直接引用之前的component,传入@input data,当然也可以@output events,这和angular 2一样方便:

【Angularjs系列】Angularjs项目中切换js到ts(下)_第5张图片

基本上就这些,习惯了写起来就很方便了,是不是感觉正在写angular 2+ app!

参考文章: https://brianflove.com/2016/12/26/typing-up-your-angular-1-app/

你可能感兴趣的:(angularjs,ts,typescript)