Blogs Hub

by AskGif | Mar 20, 2019 | Category :coding

What are Angular TypeScript Decorators in object-oriented front-end applications ?

What are Angular TypeScript Decorators in object-oriented front-end applications ?

<p>I've taken up TypeScript over the last few months, and it is such a breath of fresh air. TypeScript has quickly become one of my favorite languages to develop in, especially on the front-end. One of my favorite features is TypeScript Decorators, and I&rsquo;ve been taking advantage of them to trim down my AngularJS code and enable me to create small components with limited overhead. I have published some of these decorators to my NPM package &ldquo;angular-future&rdquo;, which you can view the source for on GitHub.</p> <p>&nbsp;</p> <p>Decorators</p> <p>Decorators are similar in syntax to Java annotations and C# attributes. For example:</p> <pre class="language-javascript"><code>@Component({ name: "home", template: `{{$ctrl.message}}` }) @State({ url: "/", params: {} }) export class LoginPage { public message: string = "Hello world!"; public constructor( @Inject("$http") private _httpService: ng.IHttpService ) { } }</code></pre> <p>These three decorators do a lot when working with my @Module decorator. It turns this simple class into a component registered in Angular and also configures a State for Angular UI Router, all right next to the component itself. The @Inject attribute manages the static $inject property Angular needs for injection post-minification. These decorators speed up development because no longer will you run into issues like mistyping the component name in the State or forgetting to add value to $inject (or putting them out of order!). In addition, we now have a nice class-based component without any of the overhead like registering the component to the app module by hand or referencing an external template file (sidenote, there is HTML syntax highlighting extensions for VS Code that make editing the template string in-code fantastic!).</p> <p>&nbsp;</p> <p>I have also created a decorator to initialize the model in an object-oriented fashion:</p> <pre class="language-javascript"><code>@Module({ name: "app", imports: ["ui.router"], declarations: [ LoginPage ], bootstrap: LoginPage }) class MyModule { @Config() public config( @Inject("$provide") provide: any ) { // Config! } @Value("baseUrl") public baseUrl(): string { return "http://myserver/api/"; } }</code></pre> <p>This decorator takes obvious inspiration from the Angular2 NgModule. This allows developers to quickly see all of the components, services, and controllers registered to the Angular application via class reference. It also allows all of your app configuration to be added to a single location, simplifying the code organization.</p> <p>&nbsp;</p> <p>I have been using this architecture and design for my latest Angular and Ionic Framework projects and couldn&rsquo;t be happier. Prior to these decorators, TypeScript and Angular were great. However, there were a lot of hang-ups due to type-safety and module references. These decorators eliminate all of the pain points I was dealing with. Now, TypeScript and Angular are amazing. With this limited overhead, creating small, React-style components is a breeze!</p>

read more...