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.
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
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.