Pathwise

Manuals / TypeScript / Chapter 2

A · Setup · beginner · Week 1 · Chapter 2 of 11

Strict setup & compiler basics

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.

Path progress
11%

Step 1 of 5

Initialize TypeScript

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

Initialize TypeScriptDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Initialize TypeScrdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

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.

Was this step clear?
Chapter learning outcomes
  • tsconfig.json
  • strict flags
  • tsc vs bundler
  • VS Code TS features
  • JSDoc @ts-check bridge

Clear these before you leave

Side quest

Strict or bust

Convert utils.js fully to utils.ts with explicit exports typed. Zero implicit any.