Mastering Angular Components
上QQ阅读APP看书,第一时间看更新

History with TypeScript in Angular

When the Angular project was developed, it was important for the core team to include the best language support they could get. While evaluating different languages, they have actually considered Google Dart and TypeScript as potential candidates to implement the framework. However, there was one major feature missing in the superset which TypeScript provided. Let's look again at our first Angular component, which we wrote in a previous section:

@Component({ 
selector: 'hello-world',
template: '<div>Hello World</div>'
})
class HelloWorld {}

An Angular component always consists of an EMCAScript 6 class as well as the @Component decorator which is used to configure our component. At the time when Google started developing the Angular project, there was no such thing as the ECMAScript 7 decorator proposal and TypeScript did not support something similar. Still, the Angular team didn't want to miss out on such a great language feature which can simplify and ease the use of their framework API. This marked the birth of AtScript. AtScript was created by the Angular core team as a fork of TypeScript which added the possibility to write meta annotations using an at symbol. At the same time, the ECMAScript 7 decorator proposal was created to propose a similar feature to the JavaScript standard. It was only a few months later with TypeScript's Version 1.5 that Microsoft announced that they would include experimental support for decorators in the TypeScript transpiler.

Today, Angular has switched completely to TypeScript and AtScript as well as Dart, which is no longer supported in the core project. They have changed their code to run with the experimental decorator support of TypeScript and no longer rely on a custom solution.

From this rather long-winded history, you can get that the Angular core team has fought hard to be able to use a decorator language feature. And they have succeeded. Given the importance of this feature, we'll talk a bit about the possibilities we have with ECMAScript 7 decorators within the next section.