Setting Up TypeScript
Install the compiler, configure tsconfig.json, and understand the compile loop from .ts source to runnable JavaScript.
TypeScript ships as an npm package containing the tsc CLI and the compiler API your editor uses. A project without tsconfig.json still compiles individual files with defaults, but real repos need explicit rules: which folders to include, how strict to be, what JavaScript version to emit, and whether tsc writes files or only typechecks. Monorepos like AceDevHub extend a root tsconfig.base.json so apps/web and apps/api share compiler rules while including different source paths.
Install TypeScript as a dev dependency
Install typescript locally in the project — not globally — so CI and every teammate use the same compiler version. The tsc binary lives in node_modules/.bin/tsc. npx tsc or npm scripts invoke it without a global install that might drift from package.json.
Running tsc with no filename argument reads tsconfig.json from the current directory (or -p path/to/tsconfig). It typechecks every file matching include and writes JavaScript to outDir unless noEmit is true — common in Next.js apps where the framework bundles TypeScript and tsc only verifies types in CI.
Anatomy of tsconfig.json
compilerOptions control how TypeScript reads and emits code. include and exclude are glob patterns for which .ts files participate. A minimal config for a Node-style library might target ES2022, emit to dist/, and enable strict — the bundle of flags that catches the most real bugs. Understanding each flag matters when debugging "works locally, fails in CI" mismatches.
Your first .ts file and compile output
Create src/index.ts, run npx tsc, and inspect dist/index.js. The output JavaScript contains no type annotations — only the runtime logic. sourceMap links stack traces back to TypeScript line numbers when you debug. This erase step is why types never slow production execution.
Monorepo layout — extends and project references
AceDevHub uses a root tsconfig.base.json with shared compilerOptions. Each app has tsconfig.json with "extends": "../../tsconfig.base.json" and its own include paths. Project references (optional) let tsc build packages in dependency order — packages/shared before apps/api. For learning, one tsconfig per folder is enough; know extends prevents copy-pasting the same strict flags.
| Option | Typical value | Why it matters |
|---|---|---|
| strict | true | Enables strictNullChecks, noImplicitAny — catch real bugs |
| target | ES2022+ | Matches Node/browser support you target |
| moduleResolution | NodeNext | Correct ESM import paths in Node 16+ |
| skipLibCheck | true | Faster CI — skip checking all @types/* |
| noEmit | true in apps | Typecheck only when bundler compiles |
- 1Install typescript locally; use npx tsc
- 2tsconfig.json controls include paths and compiler strictness
- 3tsc emits erased JavaScript to outDir (or noEmit for apps)
- 4Monorepos extend tsconfig.base.json for shared rules
- 5Next lesson: primitive types, arrays, tuples, any vs unknown