How TypeScript Works
TypeScript is checked at compile time and then transpiled to JavaScript for execution.
Syntax
tsc file.ts // produces file.jsTypeScript has two jobs:
- Type checking — it reads your annotations and reports errors before the program runs.
- Transpiling — it removes the types and outputs ordinary JavaScript.
This means the types exist only during development. Once compiled, there is no : string or : number left in the file — just JavaScript.
The flow
your-file.ts → tsc compiler → your-file.js → runsIn this playground the same thing happens: your TypeScript is transpiled in the browser and then executed, with console.log captured to the output panel.
Example
Loading editor…
Press Run to execute the code.
When to use it
- A CI pipeline compiles TypeScript before running tests, ensuring type errors block the build before code reaches staging.
- A developer targets ES5 output so the compiled bundle runs on older browsers without a separate Babel step.
- A monorepo uses project references so each package is compiled independently, speeding up incremental builds.
More examples
tsconfig output target
A minimal tsconfig.json that compiles strict TypeScript to ES2020 CommonJS modules in the dist folder.
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"outDir": "./dist"
},
"include": ["src/**/*"]
}Type-check without emitting JS
Runs the full type checker but skips writing output files, useful as a fast lint step in CI.
npx tsc --noEmitSource maps for debugging
Enables source maps so browser or Node debuggers show original TypeScript lines instead of compiled JavaScript.
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist"
}
}
Discussion