【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）:

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

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

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

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

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

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