TypeScript Project Setup- Hot Reloading, Libraries and Build Targets

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to create a TypeScript project that does hot reloading.

We also look at how to choose type definitions to include in our project so that we can use the features we want.

Using Watch Mode

To make our lives easier, we should make sure that our project recompiles and reloads each time we save our code.

This way, we don’t have to recompile and restart our app every time we change code.

With watch mode, we watch the source code files that are changed, and then the compiler will rebuild the app automatically.

Our TypeScript project should already have the TypeScript compiler installed already.

Then we run:

tsc --watch

to watch for code changes and recompile the code.

Now if we change our code, we should see messages when building and show any compiler errors if they’re found.

Automatically Executing Code After Compilation

tsc --watch only recompiles the files and don’t run them.

To run them, we’ve to use another program.

The ts-watch package starts the compiler in watch mode, observes the 9output and runs commands based on compilation results.

For instance, we can write:

npx tsc-watch --onsuccess "node dist/index.js"

to run tsc-watch without installing it and runs dist/index.js with Node on success.

Starting the Compiler Using NPM

We can add a start script in package.json to run commands to start the project.

So we can write:

{
  //...
  "scripts": {
    "start": "tsc-watch --onsuccess "node dist/index.js""
  },
  //...
}

Version Targeting

With the TypeScript compiler, we can target different versions of JavaScript in our final build.

We can go as low as ES3 to the newest versions.

This way, we can support legacy browsers easily.

For instance, we can write:

{
  "compilerOptions": {
    "target": "es5",
    //...
  }
}

to support browsers like Internet Explorer, which don’t have the support of the latest JavaScript features built-in.

The following versions are supported.

es3–3rd edition of the language. It’s the default value when target isn’t specified. It’s defined in 1999

es5 — the 5th edition of JavaScript released in December 2009

es6–6th edition of JavaScript which added lots of features for creating complex apps like classes, modules, arrow functions, promises, etc.

es2015 — same as es6

es2016–7th edition of the JavaScript specification includes the includes method for arrays and the exponentiation operator

es2017–8th edition of the JavaScript specification. It adds features for inspecting objects and async/await

es2018–9th edition of the JavaScript specification. It adds the spread and rests operations or objects ad string handling and async operations.

esNext — target features that will be included with the next edition of the JavaScript specification.

Since ES6, JavaScript versions are indicated by the year.

ES6 is the same as ES2015. Then JavaScript moved to release new features incrementally each year.

Therefore, the version changed to the year.

When file changes are saved, then the code will be compiled and run.

The generated code is in the dist folder.

Setting the Library Files for Compilation

To enable features that aren’t available in the target version, we can change the target.

We can set the lib compiler options with the following options.

es5 , es2015 , es2016 , es2017 and es2018 change the type definition file that correspond to the JavaScript version.

esnext lets us include proposed additional to JavaScript into our code.

dom include DOM libraries.

dom.iterable provide type information for the additions to the DOM API and allow iteration over HTML elements.

webworker inclusion of web worker features.

es2015.core include type information for the main features introduced by ES2015.

es2015.collection settings include type information for Map and Set constructors.

es2015.generator and es2015.iterable includes type information for generators and iterable features.

es2015.promise — includes type information for promises.

es2015.reflect — includes type information for reflecting features to get access to properties and prototypes

es2015.symbol , es2015.symbol.wellknown— includes type information about symbols

We include lib settings under the compilerSections section.

For instance, we can write:

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "./dist",
    "rootDir": "./src",
    "noEmitOnError": true,
    "lib": ["es2015", "dom", "es2015.collection"]
   }
}

Conclusion

To use the JavaScript features we want, we’ve to include the TypeScript type definitions to include in our protect.

We can also target the version of JavaScript we want for our TypeScript project.