ExpressJS + TypeScript setup in five minutes

As a part of implementing OOP in ExpressJS based backend server (See my next post on this), I am trying to build a basic ExpressJS + TypeScript configured server.

Project structure will be as shown in diagram 1. We shall put all the ‘.ts’ files in ‘src’ folder, compiled javascript files in ‘dist’ folder. Two config files namely ‘package.json’ and tsconfig.json will contain node project configuration and typescript compilation configuration respectively.

Create App.ts files under src directory. This file will contain the ‘App’ class, which creates new express instance and load routes.

src/App.ts

Create server.ts under src. This will import the App from App.ts and starts new server instance.

src/server.ts

Now we shall add typescript configuration. Create new file ‘tsconfig.json’. In the ‘compilerOptions’ we need to specify which ECMAScript target, output directory, module and source map details. ‘include’ should contain path to typescript files. Since we have created all the typescript files under src, we can provide that path.

tsconfig.json

Package.json can be created by npm init, Observe the ‘build’ and ‘start’ scripts.
‘build’ script will compile the the typescript. You may install ‘typescript’ globally or you can add it as project module. Here I have added it as a project development module.

package.json

That’s all!. Now start the server by command ‘npm start’ you will see server running on port 3000. Clicking on localhost will display a message ‘Hello World!’.

Working example of above work is available on github.