TypeScript Academy · Lesson

Compiling TypeScript to JavaScript

Understand the TypeScript compiler and its output.

Compiling TypeScript to JavaScript is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

TypeScript cannot run directly in Node.js or the browser. It must be compiled to JavaScript first. In this lesson you'll learn how the TypeScript compiler works.

Installing the TypeScript Compiler

Install TypeScript as a dev dependency in your project. The `tsc` command becomes available in your local scripts after installation.

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

Your First tsc Compilation

Run `tsc hello.ts` to compile a single file. It produces `hello.js` in the same directory with all types stripped out.

// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: The Project Configuration

For a real project you need a `tsconfig.json`. Run `tsc --init` to generate one. It controls target, module format, strictness, output directory, and more.

npx tsc --init
// Creates tsconfig.json with defaults and comments

Key tsconfig Options

The most important tsconfig fields are target (ES version output), module (module system), outDir (output folder), and strict (enable all strict checks).

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Watch Mode with tsc --watch

Run `tsc --watch` to recompile automatically whenever you save a TypeScript file. This speeds up the development loop.

npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Type-Check Without Producing Files

The `noEmit` flag runs the type checker without writing any output files. This is useful in CI pipelines that use a bundler like Vite or esbuild for actual compilation.

// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Faster Alternatives: ts-node and tsx

For development you can run TypeScript directly without a separate compile step using `ts-node` or the faster `tsx` tool.

# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Source Maps for Debugging

Enable `sourceMap: true` so that browser devtools and Node.js debuggers map compiled JS lines back to your original TypeScript source.

{ "compilerOptions": { "sourceMap": true } }

Declaration Files (.d.ts)

With `declaration: true`, the compiler also emits `.d.ts` files. These allow other TypeScript projects to consume your library with full type information.

{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Compiler Errors Block Output by Default

By default, if your TypeScript has type errors, `tsc` still outputs the JavaScript but exits with a non-zero code. Use `noEmitOnError: true` to stop output on errors.

{ "compilerOptions": { "noEmitOnError": true } }

Quick Check

What does running `tsc --noEmit` accomplish?

Recap

The TypeScript compiler transforms .ts files into JavaScript. Configure it with tsconfig.json, use --watch for development, --noEmit for type-checking only, and ts-node/tsx to run TypeScript directly.

Frequently asked questions

Is the “Compiling TypeScript to JavaScript” lesson free?

Yes — the full text of “Compiling TypeScript to JavaScript” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Compiling TypeScript to JavaScript”?

Understand the TypeScript compiler and its output. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Compiling TypeScript to JavaScript” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy