TypeScript Fundamentals
Setting Up TypeScript — tsc, tsconfig.json
Master configuring TypeScript, running compiler commands with tsc, understanding tsconfig.json compiler options, strict mode flags, and modern build runners like tsx and ts-node.
To start writing TypeScript, you need the TypeScript compiler toolchain (tsc) and a compiler configuration file (tsconfig.json).
1. Installation & Initialization
Install TypeScript globally or as a project dependency:
Initialize a new TypeScript configuration file:
This command generates a default tsconfig.json pre-populated with common compiler options and documentation comments.
2. Understanding tsconfig.json
The tsconfig.json file controls how tsc checks your project types and transpiles TypeScript code into JavaScript.
Essential tsconfig.json Options
3. Running TypeScript: tsc, ts-node, and tsx
Method 1: Using tsc Compiler directly
Method 2: Instant Execution without Manual Dist Emitting
In modern development, tools like tsx or ts-node compile in-memory for lightning-fast local execution:
4. Interactive Code Playground
Explore compiler settings and type validation below:
5. Common Pitfalls & Edge Cases
strict: false Traps: Disabling strict allows implicit any types and skips null checks, missing up to 80% of TypeScript safety benefits. Always keep "strict": true."module": "CommonJS" while writing ES6 import/export can lead to module resolution issues. Prefer "moduleResolution": "NodeNext" for modern Node.js applications.skipLibCheck: Compiling large third-party node_modules declaration files slows down builds drastically. Set "skipLibCheck": true to inspect only project code.6. Interview Questions & Quiz
Q1: What does "strict": true do in tsconfig.json?
Answer: Setting "strict": true acts as a master toggle that enables strict type-checking behavior, including noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, and alwaysStrict.
Q2: What is the difference between target and module in tsconfig.json?
Answer:
target: Controls the JavaScript syntax level emitted (e.g., ES5, ES2020, ESNext) so older JavaScript runtimes can execute the code.module: Controls how JavaScript modules are output (e.g., CommonJS require(), ESNext import/export).7. Configuration Quick Reference Table
| Flag | Purpose | Recommended Value |
|---|---|---|
target | Output JavaScript specification level | ES2022 |
strict | Enables all strict type-checking flags | true |
noImplicitAny | Flags variables that fall back to any | true |
strictNullChecks | Distinguishes null and undefined from types | true |
skipLibCheck | Skips checking type declarations in node_modules | true |