6 Tooling

TypeScript is one of the most loved languages. Yes, people love its syntax. But probably the main reason why it’s being loved is tooling. TypeScript developers appreciate auto-completion, these squiggly lines indicating errors as you type, and refactoring offered by IDEs. And the best part is that most of these features are implemented by the TypeScript team and not by the IDE developers.

You’ll see the same auto-complete and error messages in the online TypeScript Playground, in Visual Studio Code, or in WebStorm. When you install TypeScript, its bin directory includes two files: tsc and tsserver. The latter is the TypeScript Language Service that IDEs use to support these productivity features. When you type the TypeScript code, the IDEs communicate with tsserver that compiles the code in memory.

With the help of sourcemap files, you can debug the TypeScript code right in the browser. Linters allow you enforce the coding styles in your organization.

6.1  Source maps

6.2  The linter TSLint

6.3  Bundling code with Webpack

6.3.1  Bundling JavaScript with Webpack

6.3.2  Bundling TypeScript with Webpack

6.4  Using the Babel transpiler

6.4.1  Using Babel with JavaScript

6.4.2  Using Babel with TypeScript

6.4.3  Using Babel with TypeScript and Webpack

6.5  Tools to watch

6.5.1  Deno

6.5.2  ncc

6.6  Summary