Production Ready Build With TypeScript Compiler Options

Production Ready Build With TypeScript Compiler Options

Have you ever built TypeScript project and defined some of the compilerOptions in your tsconfig.json file but don’t know what they do or how they optimise the TypeScript build. Let’s look at them in detail and see what you need to configure to get a production-ready optimised build.

What are compiler options?

These are the configuration passed in tsconfig.json file which controls how TypeScript compiles the source code in JavaScript.

Sample tsconfig.json file

 {
 "compilerOptions": {
 "target": "es6",
 "module": "commonjs",
 "lib": ["es6"],
 "strict": true,

 // Specifies the output directory for compiled JavaScript files.
 // TypeScript will place all generated files in the "dist" folder.
 "outDir": "./dist",

 // Specifies the root directory for TypeScript source files.
 // TypeScript looks for files in the "src" folder when compiling.
 "rootDir": "./src",
 "sourceMap": true,
 "noImplicitAny": true
 }
}

Key Compiler Options in TypeScript

• target: Specifies the JavaScript version (e.g., ES5, ES6, ESNext). It’s always considered better to use the latest version to take advantage of newer language features which also lead to an optimised build.
• module: Defines the module system (CommonJS, ESNext, AMD). Depending on which module type you’re using you need to define this. Ex- commonJS is a default module for Node.js
• lib: Includes standard libraries (e.g., DOM, ES6). The es6 library provides support for ECMAScript 6 (ES6) features, such as let, const, arrow functions, and template literals. The dom library provides DOM-related APIs, which are useful if your function interacts with the browser's Document Object Model.
• allowJs: Allows JavaScript files to be in the TypeScript compilation process. This is useful when working with codebases containing both TypeScript and JavaScript files.
• checkJs: The checkJs compiler option in TypeScript enables type-checking for JavaScript files (.js). When this option is set to true, TypeScript analyzes JavaScript files for type errors, similar to how it checks TypeScript files.

Options For Type Checking

• strict: Enables all strict type-checking options which prevents runtime bugs in production as it helps in catching the potential bugs earlier.

function greetings(name: string) {
 console.log(`Hello, ${name}`);
}

greetings(); // Error: Argument of type 'undefined' is not assignable to parameter of type 'string'.

• noImplicitAny: When noImplicitAny: true is enabled, TypeScript raises an error when a variable's type cannot be inferred and defaults to any.

function sum(a, b) {
 return a + b;
}

// Error: Parameter 'a' implicitly has an 'any' type.
// Error: Parameter 'b' implicitly has an 'any' type.

• strictNullChecks: Ensures null/undefined values are only assigned where explicitly allowed.

let name:string = null; // Error: Type 'null' is not assignable to type 'string'.

• noUnusedLocals: Flags unused local variables.

function sum(a: number, b: number) {
 let result = a + b; // Error: 'result' is declared but its value is never read.
 return a + b;
}

• noUnusedParameters: Flags unused function parameters.

function greetings(firstname: string, surname: number) {
 console.log(`Hello, ${name}!`);
}

// Error: Parameter 'age' is declared but its value is never read.

Code Quality and Linting

• noFallthroughCasesInSwitch: Flags unintentional fallthroughs in switch statements. A fallthrough occurs when a case doesn't have a break, return, or throw, causing the code to continue executing further cases unintentionally.

function getMonth(day: number) {
 switch (day) {
 case 1:
 console.log("January");
 case 2:
 console.log("February");
 default:
 console.log("Default Case");
 }
}

// Error: Fallthrough in 'case' statement.

• noImplicitReturns: This option make sure that a function returns value in all possible code path cases. This prevents any unexpected undefine return values.

function calculateSum(a: number, b:number): number{
 const value = a + b;
 // Error: Function lacks return statement
}

Build Options

• incremental: Enables faster incremental builds by caching previous compilation results. It stores information about the last build in .tsbuildinfo file. The speeds up build by reusing unchanged builds.
• composite: Allows project references for monorepos. This option requires declaration: true and enables dependency management between TypeScript projects.
• tsBuildInfoFile: Stores path of .tsbuildinfo file where cache compilation results get stored.

Conclusion

Configuring TypeScript compiler options correctly ensures a robust development environment with fewer bugs, cleaner code, and optimized performance. By using these options effectively, your team can build scalable and maintainable applications with confidence.

Queries and Doubts

Thanks for the read :) Hope you have enjoyed reading it 🤩 and learnt something new today.

If you have any doubts or queries feel free to drop a comment or

⁍ Connect with me on my 🔗Topmate 💬.

⁍ You can also reach out to me on my 🔗LinkedIn.

⁍ Please clap for this post if you enjoyed reading it 📗 and follow for more interesting articles.

⁍ You can also support me and my writings by treating me to a nice virtual cup of coffee ☕️.