Typescript & Webpack

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Typescript & Webpack

Welcome to step 2 of our AngularJS migration process. In this lecture we are going to convert our AngularJS application to use Typescript, and also look at adding a few build tools to our application. So lets get started!

Why Typescript?

Modern Angular is built using Typescript which is the recommended language to build Angular applications with. Typescript provides great tooling options, better code readability and brings most of the usefulness of a good statically-typed language to the Javascript ecosystem.

Converting your AngularJS applications to Typescript early on can save you a lot of trouble later on in the migration process. Also, an AngularJS application written in Typescript is just a more pleasant experience overall!

Tip

New to Typescript? Don’t worry, we got you covered. Checkout my free resource to get you up to speed on Modern Javascript and Typescript to build Angular applications!

Converting to Typescript

Step 1 — .js to .ts

Typescript is just a superset of Javascript. Therefore, we can change any .js file to .ts and expect it to work without any problems.

Lets go through all the Javascript files in our AngularJS application and change the .js extensions to .ts. For example, the person-create.controller.js file (src/app/controllers/) should be renamed as person-create.controller.ts

Done? Good. All files in your AngularJS application should now have the .ts extension.

Step 2 — Module Loading

One of the features in Typescript that we want to take advantage of is Module Loading. If you need a refresher on Modules in ES6 and Typescript, a refresher can be found here.

To facilitate Module Loading in our AngularJS application, we need an index.ts file to roll-up exports from several modules into a single convenience module. Lets go ahead and create one for each controllers, directives, filters, services folder and import all the modules within the folder like so:

Listing 1. src/app/controllers/index.ts

import "./person-create.controller";
import "./person-edit.controller";
import "./person-list.controller";
import "./search.controller";

Listing 2. src/app/directives/index.ts

import "./card.directive";
import "./spinner.directive";

Listing 3. src/app/filters/index.ts

import "./default-image.filter";

Listing 4. src/app/services.index.ts

import "./contact.service";
import "./contact.resource";

With this, we have now completed the conversion to Typescript and have also included relative module imports using index.ts files, which will come in useful when we integrate build tooling into our application.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!

[🌲,🌳,🌴].push(🌲)

If you find my courses useful, please consider planting a tree on my behalf to combat climate change. Just $4.50 will pay for 25 trees to be planted in my name. Plant a tree!