# Dev Container — TypeScript

## Overview
Configure a dev container for TypeScript and Node.js development using the official Node feature or base image. Supports version selection, package manager configuration (npm, pnpm, yarn), and frontend tooling.

## Node Feature
```jsonc
{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22"
    }
  }
}
```

### Feature Options
| Option | Default | Description |
|--------|---------|-------------|
| `version` | `lts` | Node.js version (`22`, `20`, `lts`, `latest`, `none`) |
| `nodeGypDependencies` | `true` | Install native build dependencies for node-gyp |
| `pnpmVersion` | `none` | Install pnpm (`latest`, `9`, specific version, `none`) |
| `nvmVersion` | `latest` | nvm version |

## Full Example
```jsonc
{
  "name": "TypeScript Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "forwardPorts": [3000, 5173],
  "portsAttributes": {
    "3000": { "label": "API", "onAutoForward": "notify" },
    "5173": { "label": "Vite Dev Server", "onAutoForward": "openBrowser" }
  },
  "postCreateCommand": "npm ci",
  "postStartCommand": "npm run dev",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "typescript.tsdk": "node_modules/typescript/lib"
      }
    }
  }
}
```

## Using the Base Image vs Feature
| Approach | When to Use |
|----------|-------------|
| `"image": "mcr.microsoft.com/devcontainers/javascript-node:22"` | Node/TS-only projects |
| `"image": "mcr.microsoft.com/devcontainers/typescript-node:22"` | TypeScript-specific image |
| Base image + `ghcr.io/devcontainers/features/node:1` | Multi-language projects |

## Package Managers
### pnpm
```jsonc
{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22",
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile"
}
```

### Yarn
```jsonc
{
  "postCreateCommand": "corepack enable && yarn install --immutable"
}
```

## Monorepo Setup (Turborepo / Nx)
```jsonc
{
  "name": "Monorepo",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile",
  "postStartCommand": "pnpm dev",
  "forwardPorts": [3000, 3001, 5173]
}
```

## Frontend Framework Ports
| Framework | Default Port |
|-----------|-------------|
| Vite | 5173 |
| Next.js | 3000 |
| Angular | 4200 |
| Create React App | 3000 |
| Remix | 5173 |
| Astro | 4321 |

## Best Practices
- Use `npm ci` or `pnpm install --frozen-lockfile` in `postCreateCommand` for deterministic installs.
- Use `postStartCommand` for dev servers so they restart on Codespace resume.
- Forward the dev server port and set `"onAutoForward": "openBrowser"` for quick feedback.
- Set `typescript.tsdk` to the workspace TypeScript for consistent version behavior.
- Add both ESLint and Prettier extensions and configure `formatOnSave` for consistent code style.
- Pin Node.js to a major version (`22`, `20`) rather than `lts` for reproducibility.
- Use `corepack enable` for Yarn v2+ to use the project-local version.