Learn TypeScript - Installation, tsconfig.json Configuration, and Basic Tooling

#Introduction

In episode 1 you learned why TypeScript. Now it's time to cover how a TypeScript project is organized. The center of everything is tsconfig.json — a JSON file that tells the tsc compiler what to compile, where to put the output, and how strict the checking should be.

Many beginner developers skip this episode and jump straight into writing code. As a result, they struggle against strange errors like missing modules, outdated JavaScript targets, or files compiled to the wrong location.

Episode 2 dissects the important tsconfig.json options one by one, introduces the basic tsc commands, and sets up the tooling you'll use throughout the series.

#Installing TypeScript Per Project

#TypeScript as a devDependency

In episode 0 we installed TypeScript globally. For a real project, install it as a devDependency so the TypeScript version is documented in package.json and consistent across team members:

npm init -y
npm install --save-dev typescript
npx tsc --version

The npx tsc --version command uses the local version from the node_modules folder — safer than relying on a global version that can differ between machines.

#Two Compiler Modes

tsc works in two modes. Script mode compiles the files named directly on the command line. Project mode reads tsconfig.json to determine which files to compile — this is the mode used in nearly every real-world project.

#Anatomy of tsconfig.json

Create a base config with the npx tsc --init command, then look at the generated tsconfig.json file:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "lib": ["es2022", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

The most important options:

• target determines the output JavaScript version, for example es2022.
• module determines the output module format: esnext, commonjs, or nodenext.
• strict enables all strict type checks (episode 22).
• outDir and rootDir determine the output location and source structure.
• lib selects the available environment definitions, like dom for the browser.

#Basic tsc Commands

#Checking Without Output

tsc has a few commands you should memorize:

npx tsc --noEmit
npx tsc --watch
npx tsc --project tsconfig.json

The npx tsc --noEmit command checks all files without producing output — ideal for CI validation. Meanwhile npx tsc --watch recompiles whenever a file changes, which is very helpful during development.

#A Clean Folder Structure

With rootDir: "./src" and outDir: "./dist", the source folder structure is preserved in the output. The file src/index.ts will produce dist/index.js. This structure avoids scattered output and simplifies deployment.

#Supporting Tooling

#Running TypeScript Without Two Stages

For development, compiling and then running Node.js twice feels slow. Tools like tsx or ts-node run TypeScript directly:

npm install --save-dev tsx
npx tsx src/index.ts

The tool npx tsx src/index.ts handles transpilation and execution in a single process, and also supports watch mode via tsx watch. We'll use this pattern again in episode 16 when building a Node.js backend.

#Closing

Episode 2 laid the configuration foundation: local TypeScript as a devDependency, a tsconfig.json with the core options, the essential tsc commands, and tooling to run code without two stages. You can now set up a TypeScript project from scratch with confidence.

Key takeaways:

• Install TypeScript as a per-project devDependency, not globally.
• npx tsc --init generates a tsconfig.json skeleton.
• target, module, strict, outDir, and rootDir are the most important options.
• Use npx tsc --noEmit for validation without output.
• tsc --watch makes iterative development easier.
• tsx runs TypeScript directly without a separate compilation step.

In the next episode 3 we'll discuss primitive types and basic structural types — string, number, boolean, null, undefined, bigint, symbol, plus any, unknown, and void. These are the alphabet of the TypeScript type system that you'll combine in the following episodes.