1.25.i — TypeScript Tooling

In one sentence: TypeScript's ecosystem includes a powerful Language Server for IDE intelligence, the TypeScript Playground for experimentation, ts-node/tsx for direct execution, and integration with modern build tools like Vite and Next.js.

Navigation: ← 1.25 Overview · 1.25.j — tsconfig Explained →

---

1. TypeScript Language Server (tsserver)

The TypeScript Language Server is the engine behind all IDE intelligence. It runs in the background and provides:

Feature	Description
Autocomplete	Suggests properties, methods, variables based on types
Hover information	Shows the type of any variable/function on hover
Error diagnostics	Red squiggles for type errors in real time
Go to Definition	Jump to where a type, function, or variable is defined
Find All References	See every place a symbol is used
Rename Symbol	Safely rename across all files
Quick Fixes	Suggested fixes for common errors (add missing import, etc.)
Refactoring	Extract function, extract variable, move to file
Signature Help	Shows parameter info when calling functions
Code Actions	Auto-import, organize imports, generate types

The Language Server reads your tsconfig.json to understand your project configuration and provides feedback based on the same rules the compiler uses.

---

2. VS Code — built-in TypeScript support

VS Code has first-class TypeScript support — no extensions needed for core functionality.

Key features tour

Hover types — hover any variable to see its inferred or annotated type:

const user = { name: "Alice", age: 30 };
// Hover over 'user' → shows: const user: { name: string; age: number; }

Go to Definition — Ctrl+Click (Cmd+Click on Mac) on any symbol:

• Click on a type name → jump to its interface/type definition
• Click on a function → jump to where it is declared
• Click on an imported module → open the source file

Peek Definition — Alt+F12 to see the definition inline without leaving your file.

Find All References — Shift+F12 to see every usage of a symbol across your project.

Rename Symbol — F2 on any identifier to rename it everywhere:

// Rename 'getUserName' → 'getDisplayName'
// Updates every file that imports or calls it

Auto-imports — start typing a function or type name, VS Code suggests importing it:

// Type "User" → VS Code suggests: import { User } from './types'

Organize Imports — Shift+Alt+O to sort and remove unused imports.

Quick Fix (Ctrl+.) — context-aware fixes:

• Missing import → add import statement
• Missing property → add property to interface
• Incorrect type → suggest correct type

VS Code settings for TypeScript

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.quoteStyle": "single",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

---

3. Recommended VS Code extensions

Extension	Purpose
Error Lens	Shows errors and warnings inline, right next to the offending code
Pretty TypeScript Errors	Reformats complex TypeScript error messages to be more readable
ESLint	Shows lint errors inline (see 1.25.l)
Prettier	Code formatting on save
Auto Rename Tag	Renames matching JSX/HTML tags
Path IntelliSense	Autocomplete for file paths in imports
Import Cost	Shows the size of imported packages inline

Error Lens example

Without Error Lens:

File has a red squiggle under 'user.nmae'
You must hover to see: Property 'nmae' does not exist on type 'User'

With Error Lens:

console.log(user.nmae);  // Property 'nmae' does not exist on type 'User'. Did you mean 'name'? ← shown inline

---

4. TypeScript Playground

The TypeScript Playground (typescriptlang.org/play) is a browser-based editor for testing TypeScript code:

Features:

• Write TypeScript and see compiled JavaScript side by side
• Adjust compiler options interactively
• Share code via URL (great for Stack Overflow, code reviews, bug reports)
• See type information on hover
• Access examples and handbook entries
• Test different TypeScript versions

Use cases:

• Learning — experiment with types without setting up a project
• Debugging — reproduce and share type issues
• Exploring — test how compiler options affect output
• Sharing — send a Playground link instead of pasting code

---

5. ts-node — run TypeScript directly

ts-node compiles and runs TypeScript in one step:

npm install -D ts-node typescript @types/node

# Run a TypeScript file
npx ts-node src/app.ts

# REPL (interactive mode)
npx ts-node
> const x: number = 42;
> x * 2
84

How it works: ts-node hooks into Node's module system, intercepts .ts file imports, compiles them in memory, and feeds the resulting JavaScript to Node.

Configuration — ts-node reads your tsconfig.json but may need adjustments:

{
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

transpileOnly: true skips type checking for faster execution (use tsc --noEmit separately for type checking).

---

6. tsx — modern alternative to ts-node

tsx is a faster, simpler alternative:

npm install -D tsx

# Run a TypeScript file
npx tsx src/app.ts

# Watch mode — restart on file changes
npx tsx watch src/app.ts

tsx vs ts-node comparison:

Feature	ts-node	tsx
Speed	Slower (type checking by default)	Fast (uses esbuild, strips types only)
ESM support	Requires --esm flag and config	Works out of the box
Configuration	May need tsconfig tweaks	Zero configuration
Type checking	Yes (disable with transpileOnly)	No (use tsc --noEmit)
Watch mode	Requires nodemon or ts-node-dev	Built in (tsx watch)
REPL	Yes	No

Recommendation: Use tsx for development (faster), run tsc --noEmit separately for type checking.

---

7. Build tools — TypeScript with modern frameworks

Vite

Vite handles TypeScript out of the box — no configuration needed:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Vite uses esbuild to strip types (fast) but does NOT type-check. Add type checking to your workflow:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "typecheck": "tsc --noEmit"
  }
}

Next.js

Next.js has built-in TypeScript support:

npx create-next-app@latest my-app --typescript

Next.js type-checks during next build and provides typed API routes, page props, and server components.

webpack

With ts-loader or babel-loader:

npm install -D ts-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

---

8. Declaration files (.d.ts)

Declaration files describe the types of a JavaScript library without containing any implementation:

// lodash.d.ts (simplified example)
declare module "lodash" {
  export function chunk<T>(array: T[], size: number): T[][];
  export function compact<T>(array: T[]): T[];
  export function uniq<T>(array: T[]): T[];
  // ... hundreds more declarations
}

Where you encounter .d.ts files:

Source	Example
@types/* packages	@types/express, @types/node, @types/react
Library's own types	axios/index.d.ts, zod/index.d.ts
Your compiled output	tsc with declaration: true produces .d.ts alongside .js
Global type extensions	Custom global.d.ts for augmenting built-in types

Creating your own declaration file:

// types/global.d.ts
declare global {
  interface Window {
    analytics: {
      track(event: string, data?: Record<string, unknown>): void;
    };
  }
}

export {};  // Makes this a module (required for 'declare global')

Generating declaration files for your library:

// tsconfig.json
{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./types"
  }
}

---

9. Source maps — debugging compiled JS

Source maps connect compiled JavaScript back to the original TypeScript source, enabling debugging:

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true
  }
}

This produces .js.map files alongside your .js output:

src/app.ts  →  dist/app.js + dist/app.js.map

What source maps enable:

• Browser DevTools — set breakpoints in .ts files, see TypeScript in Sources panel
• Error stack traces — line numbers reference your .ts source, not compiled .js
• VS Code debugging — step through TypeScript code directly

Source map workflow:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TS",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true
    }
  ]
}

In production: Source maps can be generated but should be kept private (not served to end users) or uploaded to error tracking services (Sentry, Datadog) for stack trace resolution.

---

10. Summary — TypeScript tooling ecosystem

  Writing Code                 Running Code              Building
  ───────────                  ────────────              ────────
  VS Code + Language Server    ts-node (type-check+run)  tsc (compile)
  Error Lens extension         tsx (fast, strip types)    Vite / esbuild
  Prettier (formatting)        Node.js + compiled JS     webpack + ts-loader
  ESLint (linting)                                       Next.js (built-in)
  TypeScript Playground                                  Source maps (.js.map)

---

Key takeaways

1. The TypeScript Language Server powers all IDE features — autocomplete, hover types, go to definition, rename.
2. VS Code has built-in TS support; add Error Lens and Pretty TypeScript Errors for a better experience.
3. The TypeScript Playground is invaluable for experimenting, debugging, and sharing code.
4. Use tsx for fast development execution; use tsc --noEmit for type checking.
5. Declaration files (.d.ts) describe types for JavaScript libraries — provided by @types/* or bundled by the library.
6. Source maps connect compiled JS back to TS source for debugging.

---

Explain-It Challenge

Explain without notes:

1. What does the TypeScript Language Server do, and why is it important for developer productivity?
2. What is the difference between tsx and ts-node?
3. What is a .d.ts file, and when would you encounter one?

---

Navigation: ← 1.25 Overview · 1.25.j — tsconfig Explained →