AceDevHub
Why TypeScript & Type BasicsFree

Setting Up TypeScript

Install the compiler, configure tsconfig.json, and understand the compile loop from .ts source to runnable JavaScript.

BeginnerFreeTooling

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.

terminal
Loading editor…

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.

tsconfig.json
Loading editor…

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.

src/index.ts
Loading editor…
dist/index.js
Loading editor…

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.

apps/api/tsconfig.json
Loading editor…
OptionTypical valueWhy it matters
stricttrueEnables strictNullChecks, noImplicitAny — catch real bugs
targetES2022+Matches Node/browser support you target
moduleResolutionNodeNextCorrect ESM import paths in Node 16+
skipLibChecktrueFaster CI — skip checking all @types/*
noEmittrue in appsTypecheck only when bundler compiles
  1. 1Install typescript locally; use npx tsc
  2. 2tsconfig.json controls include paths and compiler strictness
  3. 3tsc emits erased JavaScript to outDir (or noEmit for apps)
  4. 4Monorepos extend tsconfig.base.json for shared rules
  5. 5Next lesson: primitive types, arrays, tuples, any vs unknown