June 19, 2016

Angular 2: Official tutorial projects in ES6 + TypeScript + seed! (part 3 of 3)


Pages: 1 2 3

How to set up an Angular 2 project: TypeScript

Here, I expect you to have set up an ECMAScript-based Angular 2 project based on above explanations already and that now you’re interested in moving towards TypeScript.

I cannot decide whether a TypeScript-based implementation is right for you.
  • TypeScript’s static typing can be an important and useful safety net, especially in more complex projects. If you come from a statically typed language such as Java, you may find this environment more familiar. TypeScript also adds a few syntactic enhancements on ECMAScript 6.
  • On the other hand, static typing can be perceived as an impediment, especially when coming from the JavaScript world or when used to a typical “rapid application development” environment. Note that TypeScript really is a product, not a standard.
I encourage you to try out both setups, and decide for yourself.

And again: reading this chapter is completely optional. You can just take the tutorial project as a skeleton and start writing your business code.

In the following section, I will only show the steps where a TypeScript setup derives from the ECMAScript setup presented above.

Generate skeleton

Again, you may use Yeoman to generate the project skeletton (or start with the completed ECMAScript setup, as we built it earlier).

Project structure

Same as in the ECMAScript section, except that the following additional folder will be generated during the build:
  • typings: Generated by npm (typings). Contains the *.d.ts type definition files.

npm dependencies

See the complete package.json file here.

We make a few changes to the earlier ECMAScript setup:
  • Add reflect-metadata: a TypeScript-specific runtime dependency.
  • All the babel… parts are removed, of course, as we do not transpile using Babel, but using the TypeScript compiler.
  • Instead, of course, add TypeScript’s dependencies: typings (plus the grunt-ts task).
Note that for convenience, we define a postinstall action for npm:
"postinstall": "typings install"
This will get invoked after
npm install
(But not yet; make sure to first finish TypeScript setup, as described below.)

Grunt setup

See the complete Gruntfile.js file here.

Here of course, we replace the Babel transpilation steps by their TypeScript equivalent.
  • This is done through the setup in initConfig(). Make sure to specify that the tsconfig file should be consulted as well.
  • Invoke ts on deploy and live reload.

Transpilation config

See the complete tsconfig.json file here.

The tsconfig.json file is the TypeScript equivalent of Babel’s babel.rc file:
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}
You can usually stick with the example file here. Make sure that both "emitDecoratorMetadata" and "experimentalDecorators" are set to true!

See the complete typings.json file here.

Did I mention already that TypeScript is statically typed?

Imagine that we write TypeScript code, and then we import it. That’s not a problem, because TypeScript code is statically typed, hence type information is there, in the code.

However, external modules distributed trough npm are compiled to plain old ES5 code. There’s no type information, and that’s a problem.

The solution comes through the typings project which provides type definitions (*.d.ts files) for all npm modules (at least, that is the ultimate goal). In the package.json file, we defined to run download and installation of the type definitions at build time.

In the typings.json file, we define where to download type definitions for all 3rd party libraries in use.

For a simple Angular 2 project, you at least need to provide Angular 2’s type definitions:
{
    "globalDependencies": {
        "core-js": "github:DefinitelyTyped/DefinitelyTyped/core-js/core-js.d.ts"
    }
}
Otherwise, transpilation will fail due to lack of type definitions.

SystemJS runtime module dependency config

See the complete systemjs.config.js file here.

We can completely reuse the configuration from the ECMAScript setup.

index.html

See the complete index.html file here.

Again, this is the same as in the ECMAScript setup, apart from one difference:
  • We need to additionally import the reflect-metadata library which is a TypeScript-specific runtime dependency.

JavaScript runtime bootstrapping

See the complete main.ts file here.

No changes to the ECMAScript equivalent. Note that like all JavaScript files, because we’re writing TypeScript, the file ending is now *.ts.

The main app component

See the complete app.component.ts file here.

No changes to the ECMAScript equivalent.

Additional components

See the app/scripts directory here.

Just as described in the ECMAScript section. Again, note these syntactical changes in TypeScript:
  • Don’t forget to explicitly declare interfaces using implements statements.
  • You can make use of the private keyword.
  • There’s the more concise TypeScript constructor syntax constructor(private http: Http) { } over constructor(http: Http) { this.http = http; }.

Server startup

See the complete package.json file here.

See the explanation in the ECMAScript section.

Conclusion

With this blog post, I hope I have presented fellow AngularJS developers with a comprehensive guide to take the first step towards Angular 2 – setting up a project. I hope that the two project skeletons may serve you as a comprehensible starting point to build a clean, sound Angular 2 project setup. With the main focus on the ECMAScript 6 step, I hope they help lower the hurdle to get started with Angular 2 – and maybe even animate to look into TypeScript.

In fact, having an ECMAScript and a TypeScript setup side-by-side I find quite interesting. It shows that switching from one to the other isn’t that hard, and it serves as a live example of the pros and cons of each technology (although we didn’t delve too deep into that in this article).

I’m really curious about Angular 2, and I will gladly continue investigating this new technology in future blog posts, and hopefully adapt these project seeds according to new knowledge I gain.

Please share your thoughts about this article, and the project seed repositories, in the comments section below. If you have expert knowledge in some of the technologies used by the seed projects, your contributions on GitHub are highly welcome!


Pages: 1 2 3


No comments:

Post a Comment