TypeScript is like a big brother to JavaScript. It’s built on top of JavaScript, so anything you can do in JavaScript, you can do in TypeScript. TypeScript adds extra features to the language to help you write code more securely.
When you’re starting out with TypeScript, you might see it as a supercharged version of a spell checker. It’s there to catch mistakes and make your code better. And the cool thing is, TypeScript plays well with the tools you’re already using. Whether it’s your text editor, build tools, or testing frameworks, TypeScript fits right in.
Now, to make TypeScript work just the way you want in your project, you’ll need to configure it. That’s where tsconfig.json comes in. It’s a file that tells TypeScript how to behave in your project.
If you’re just getting started with TypeScript, you’ll probably stick with the default settings in tsconfig.json. But if your project has special needs or needs to work with other tools, you can tweak those settings to fit your project perfectly.
Below is image of how normal tsconfig.json file looks like for Full-Stack MERN stack based project
A normal tsconfig.json file for react project
Let’s take a closer look at some of its essential settings.
The first property to take a look at is compilerOptions, where you specify compiler settings.
Compiler settings in compilerOptions
The compilerOptions property is where you define TypeScript compiler settings.
These options include –
target – Specifies the ECMAScript target version for the emitted JavaScript. Defaults to ES3. To ensure maximum compatibility, set this to the lowest version that your code requires to run. ESNext setting allows you to target the latest supported proposed features.
module – Defines the module system to use (CommonJS, AMD, ES6, etc.). Usage depends on your project’s requirements and the environment that your code will run in. Most modern projects will use ES6 or ESNext.
outDir – Specifies the output directory for compiled JavaScript files. Usually set to dist to create a dist directory for your compiled files.
strict – Enables strict type-checking options to help catch errors in your code. Set to true for strict type checking.
alwaysStrict – Automatically set to true if strict is enabled, this parses the code in JavaScript strict mode and emits use strict for each source file.
esModuleInterop – In JavaScript, there are two main module systems: ECMAScript modules (ESM) and CommonJS modules (CJS). They have different syntax and semantics for imports and exports. When working in a TypeScript project that uses both ESM and CJS modules, setting esModuleInterop to true ensures that TypeScript handles imports and exports in a way that is compatible with both module systems. This is recommended if you are working with third party libraries that use both CJS and ESM.
lib – Specifies the libraries to include when type-checking. TypeScript includes type declarations (type definitions) for JavaScript built-in objects, such as Array, String, Promise, etc. These declarations define the shape and behavior of these objects, allowing TypeScript to provide accurate type checking and IntelliSense support. By default, TypeScript includes a standard set of library declarations (dom, es5, es6, etc.) based on the ECMAScript version targeted by your project.
jsx – If you are using JSX (for example with React), this setting determines how your JSX files should be treated(preserve, react, react-native, etc.).
sourceMap – Generates source map files (.map) to aid debugging. Source maps are files that map the generated JavaScript code back to its original TypeScript source code.
baseUrl -Specifies the base directory for resolving non-relative module names. In this case, it’s “./src”.
removeComments – Strips comments from your compiled code. Helpful if minifying your compiled code.
Other TSConfig settings:
include – specifies an array of file paths or glob patterns that TypeScript should include in the compilation process. Only files matching the specified patterns will be considered for compilation. You can use glob patterns (e.g. “src/*/.ts”) to include files from specific directories or with specific file extensions. If include is not specified, TypeScript includes all .ts, .tsx, and .d.ts files in the project directory by default.
exclude – This setting specifies an array of file paths or glob patterns that TypeScript should exclude from the compilation process (even if they match the patterns specified in the include setting). You can use exclude to ignore files or directories that you don’t want to be compiled, such as test files, build artifacts, or third-party libraries. Usually you will want to exclude your node_modules folder.
files -Specifies an array of files to include in the compilation process. Unlike include, which uses glob patterns, files directly lists individual files to be compiled.
path: Allows you to specify path mappings for module resolution. This can be useful for resolving module imports based on custom directory structures or aliasing.
outfiles: Concatenates and emits all TypeScript files to a single JavaScript file specified by this option. This is useful for projects that require bundling multiple TypeScript files into one
