TypeScript trong thực chiến — Compiler, Tooling và Patterns

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "dist"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,   // arr[i] có thể undefined
    "noImplicitOverride": true,        // override method phải có keyword override
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true    // { x?: number } khác { x: number | undefined }
  }
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":        ["src/*"],
      "@utils/*":   ["src/utils/*"],
      "@types":     ["src/types/index.ts"]
    }
  }
}

// trước
import Button from '../../../components/Button';

// sau
import Button from '@/components/Button';

declare module 'string-strip-html' {
  export function stripHtml(
    html: string,
    opts?: { onlyStripTags?: string[] }
  ): { result: string };
}

declare global {
  interface Window {
    myAnalytics: {
      track(event: string): void;
    };
  }
}

// Cần dòng export để file thành module — declare global mới hiệu lực
export {};

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: 'development' | 'production' | 'test';
      DATABASE_URL: string;
      PORT?: string;
    }
  }
}

export {};

declare module '*.css';
declare module '*.svg' {
  const src: string;
  export default src;
}
declare module '*.md?raw' {
  const content: string;
  export default content;
}

monorepo/
├─ tsconfig.json                // solution-style root: chỉ liệt kê references
├─ packages/
│  ├─ utils/
│  │  ├─ tsconfig.json
│  │  └─ src/index.ts
│  └─ app/
│     ├─ tsconfig.json
│     └─ src/index.ts
└─ package.json

{
  "files": [],
  "references": [
    { "path": "./packages/utils" },
    { "path": "./packages/app" }
  ]
}

{
  "compilerOptions": {
    "composite": true,           // bắt buộc khi được reference
    "declaration": true,
    "outDir": "dist",
    "rootDir": "src",
    "target": "ES2022",
    "module": "ESNext",
    "strict": true
  },
  "include": ["src"]
}

{
  "extends": "../utils/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "references": [{ "path": "../utils" }]
}

$ tsc -b              # build tất cả references theo thứ tự
$ tsc -b --clean      # xoá tất cả output
$ tsc -b --watch      # incremental + watch

$ mkdir my-cli && cd my-cli
$ npm init -y
$ npm i -D typescript tsx @types/node
$ npx tsc --init

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": false,
    "sourceMap": true
  },
  "include": ["src"]
}

{
  "type": "module",
  "scripts": {
    "dev":   "tsx watch src/index.ts",
    "start": "tsx src/index.ts",
    "build": "tsc",
    "check": "tsc --noEmit"
  }
}

import { readdir } from 'node:fs/promises';

async function main(): Promise<void> {
  const dir = process.argv[2] ?? '.';
  const entries = await readdir(dir);
  console.log(`${entries.length} file/folder trong ${dir}`);
}

main();

$ npm create vite@latest my-app -- --template vanilla-ts
$ cd my-app && npm install
$ npm run dev

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noEmit": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

$ npm i -D tsup typescript

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  sourcemap: true,
  clean: true,
  target: 'es2022'
});

{
  "name": "my-lib",
  "version": "1.0.0",
  "main":    "./dist/index.cjs",
  "module":  "./dist/index.js",
  "types":   "./dist/index.d.ts",
  "exports": {
    ".": {
      "types":   "./dist/index.d.ts",
      "import":  "./dist/index.js",
      "require": "./dist/index.cjs"
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsup",
    "check": "tsc --noEmit"
  }
}

import { z } from 'zod';

const EnvSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']),
  DATABASE_URL: z.string().url(),
  PORT: z.coerce.number().int().positive().default(3000)
});

export const env = EnvSchema.parse(process.env);
// env có type: { NODE_ENV: 'development' | ..., DATABASE_URL: string, PORT: number }

export class ApiError extends Error {
  constructor(public readonly status: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

export async function api<T>(
  url: string,
  init?: RequestInit
): Promise<T> {
  const res = await fetch(url, init);
  if (!res.ok) {
    throw new ApiError(res.status, `HTTP ${res.status}`);
  }
  return res.json() as Promise<T>;
}

// Usage:
interface User { id: number; name: string; }
const u = await api<User>('/api/users/1');
// u tự động có type User

export interface User { id: number; email: string; }

export interface UserRepository {
  findById(id: number): Promise<User | null>;
  create(data: Omit<User, 'id'>): Promise<User>;
}

// Triển khai 1: Sqlite
export class SqliteUserRepo implements UserRepository {
  async findById(id: number) { /* ... */ return null; }
  async create(data: Omit<User, 'id'>) { /* ... */ return { id: 1, ...data }; }
}

// Triển khai 2: In-memory (cho test)
export class MockUserRepo implements UserRepository {
  private users = new Map<number, User>();
  async findById(id: number) { return this.users.get(id) ?? null; }
  async create(data: Omit<User, 'id'>) {
    const id = this.users.size + 1;
    const user = { id, ...data };
    this.users.set(id, user);
    return user;
  }
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TS (tsx)",
      "runtimeExecutable": "tsx",
      "args": ["${workspaceFolder}/src/index.ts"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}