Lumina

Manuals / TypeScript / Ch 2

A · SetupBeginner45 min read

2. Strict setup & compiler basics

TypeScript · 44 pages source format

tsconfig.json controls compilation. strict: true enables the checks that matter. tsc type-checks; Vite/esbuild bundle. Understand .ts vs .tsx. JSDoc @ts-check as a bridge from JS.

What you'll learn

  • tsconfig.json
  • strict flags
  • tsc vs bundler
  • VS Code TS features
  • JSDoc @ts-check bridge

Initialize TypeScript

npm install -D typescript. npx tsc --init. Set "strict": true, "module": "ESNext", "moduleResolution": "bundler", "outDir": "dist", "rootDir": "src".

npm install -D typescript
npx tsc --init

// tsconfig.json highlights
{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

Do this now

Create tsconfig.json in your project. Add "typecheck": "tsc --noEmit" script.

Clear?

First .ts file

Rename utils.js → utils.ts. Run tsc. Fix errors one at a time. Start with parameter types on exported functions.

Do this now

Convert one utility file. Add types to all exported function params and returns.

Clear?

Strict flags that matter

strict enables: noImplicitAny, strictNullChecks, strictFunctionTypes, etc. strictNullChecks alone prevents most null reference bugs.

  • noImplicitAny — no untyped params
  • strictNullChecks — null/undefined explicit
  • strictFunctionTypes — safer callbacks
  • noUncheckedIndexedAccess — array access may be undefined

Do this now

Intentionally write let x: string = null — see error. Fix with string | null or ensure never null.

Clear?

VS Code superpowers

Hover for types. Cmd+click to definition. Quick fix lightbulb. Organize imports. Problems panel lists all errors.

Do this now

Fix 5 errors using hover + quick fix only — no guessing.

Clear?

JSDoc bridge

// @ts-check at top of .js file enables checking without rename. Good for gradual migration.

// @ts-check

/**
 * @param {string} str
 * @returns {string}
 */
function titleCase(str) { /* ... */ }

Do this now

Add @ts-check to one .js file. Add JSDoc @param types. Fix resulting errors.

Clear?

Checklist