TypeScript + Webpack

Hey, hello! As always, it’s been a long time since I posted. Anyway, probably nobody cares besides me so I just going to straight to the point to be discussed in the post, a simple integration between TypeScript and Webpack.

First of all, this post assumes you already know a little about JavaScript and already heard about - or used - a task-runner like Grunt or Gulp.

Defining TypeScript

In a nutshell TypeScript is a javascript-based kind of language that compiles to JavaScript. TypeScript most important feature is being statically typed, bypassing JavaScript dynamic nature and allowing the development of big, scalable applications more easily.

Defining Webpack

Webpack on the other hand is a library that basically wraps all your JavaScript files inside one file. Besides the concatenation itself he also builds a dependency tree to know what file needs to go first. He is also highly customizable, allowing to define distinct files between your third party dependencies and your app code and also defining what extensions should be used in the process. I assume he does a lot more things than that but I actually don’t know too much about Webpack either, I used the first time a few weeks ago. Oh, two more details. you also can run Webpack inside Grunt/Gulp/Broccoli/whatever script and Webpack also handles CSS files if you want to concatenate your styles.

Setting up environment

We are going to use Atom and the atom-typescript package because reasons.

After you install both Atom and atom-typescript do the following steps:

1- Open a command prompt and run the following command

npm init

This will create a package.json file that will save every npm that you install from now on. Don’t close your prompt just yet, we are going to be using that until the end of this tutorial.

2- Install TypeScript

npm install typescript --save

3- Install TypeScript Webpack loader

npm install ts-loader --save

4- Install DefinitelyTyped

npm install tsd -g

DefinitelyTyped is a package manager for TypeScript definition files. Definition files allows the developer to define the functions of a specific library in a .d.ts file in a similar way that WSDL files do.

5- Install jQuery definition file

tsd install jquery --save

This will activate autocomplete capabilities to the jQuery library functions using TypeScript.

6- Create a tsconfig.json file.

This file is self-explanatory. A TypeScript configuration file. Access tsconfig.json documentation here.

7- Create 2 TypeScript files: app.ts and greeter.ts (this last inside a ts folder).

8- Create a simple index.html to see the result being generated by the app.

9- Create a Webpack configuration file called, you guessed, webpack.config.js.

10- In command prompt, run the command webpack. You are going to see something like this:

11- Run a local server pointing to the folder containing your newly created app. You can use anything that you got at your disposal like a Python local server, a Node local server, a Ruby local server and so on.

12- Access your favorite browser and see the result. Noice.

So, that’s it! You learned how to use TypeScript and Webpack together to build a scalable frontend app. If you want to access the full code linked to this post please clone my TypeScript + Webpack Github repository.