The previous article explained how to switch existing JS to TS. This article will explain how to use TS to write new requirements in a project if new requirements come in.

We still use ts & HTML & less as the structure, as follows: For example, if we add a component to the activity case, it is better to use component instead of controller. Component is reusable and Angular 2 + will always use component. I mean, if it can be upgraded in the future, it will also save a lot of time. But the controller in the current project cannot be changed to Component, because the UI-Router version 0.2.x used in our project does not support Component in routing. X is only supported by uI-router 1.x.x, so we’ll use controller for routing and Component for anything that doesn’t involve route references. (Consider upgrading the UI-router in the future) :

ActivityTemplate.com ponent. Ts: We can convert js to any for ts. We can define interface, which is easy to develop and not error prone. We can also use VScode’s smart tip. The Controller interface, including the component lifecycle in AngularJS, is also exposed.

We then register a new class constructor in the Module. This is not the same as const component.

VipServices. Controller. Ts: consumer is a controller, a VIP service, you can see here into a service by $inject static variables, and then construct it strongly typed the service, then can use

Vipservices. HTML: The HTML template references the previous Component directly, passing in @input data or @output events, which is just as convenient as Angular 2:

Basically, that’s it. If you get used to it, you can write an Angular 2+ app.

Refer to the article: brianflove.com/2016/12/26/…