Vì sao TypeScript là mặc định của web dev 2026? Lộ trình chuyển từ JS sang TS

# Cài TypeScript và ts-node cho development
npm install --save-dev typescript ts-node @types/node

# Tạo tsconfig mặc định
npx tsc --init

{
  "compilerOptions": {
    // Bật chế độ strict - khuyến khích cho dự án mới
    "strict": true,

    // Target ES2020+ để dùng được optional chaining, nullish coalescing
    "target": "ES2020",

    // Module system - dùng ESNext cho Vite/bundler hiện đại
    "module": "ESNext",
    "moduleResolution": "bundler",

    // Source maps để debug dễ hơn
    "sourceMap": true,

    // Thư mục output
    "outDir": "./dist",

    // Thư mục source
    "rootDir": "./src",

    // Cho phép import JSON
    "resolveJsonModule": true,

    // Bắt buộc xử lý null/undefined
    "strictNullChecks": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// Thay vì dùng any, dùng union type cụ thể
type Status = 'loading' | 'success' | 'error';
type ID = string | number;

function fetchUser(id: ID) {
  // TS biết id có thể là string hoặc number
  if (typeof id === 'string') {
    // Trong block này, TS biết id là string
    console.log(id.toUpperCase());
  }
}

// Interface: dùng cho object shapes, có thể extend sau
interface User {
  id: number;
  name: string;
  email?: string; // Optional property
}

// Type alias: dùng cho union, intersection, primitives
type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

// Intersection type - combine 2 types
type AdminUser = User & { role: 'admin'; permissions: string[] };

// Hàm generic: làm việc với bất kỳ kiểu nào nhưng vẫn type-safe
function getFirst<T>(arr: T[]): T | undefined {
  return arr[0];
}

const firstNum = getFirst([1, 2, 3]); // TS biết đây là number | undefined
const firstStr = getFirst(['a', 'b']); // TS biết đây là string | undefined

// Generic với constraint: T phải có property id
function findById<T extends { id: number }>(items: T[], id: number): T | undefined {
  return items.find(item => item.id === id);
}

type Cat = { type: 'cat'; meow: () => void };
type Dog = { type: 'dog'; bark: () => void };
type Animal = Cat | Dog;

function makeSound(animal: Animal) {
  // Discriminated union - TS thu hẹp type dựa vào giá trị runtime
  if (animal.type === 'cat') {
    animal.meow(); // TS biết đây là Cat
  } else {
    animal.bark(); // TS biết đây là Dog
  }
}

import { z } from 'zod';

// Khai báo schema một lần, dùng cho cả validation và type inference
const UserSchema = z.object({
  id: z.number().positive(),
  name: z.string().min(2).max(50),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'guest']),
  createdAt: z.string().datetime().optional(),
});

// Tự động lấy TypeScript type từ schema - không cần khai báo 2 lần!
type User = z.infer<typeof UserSchema>;

// Validate API response
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const raw = await response.json();

  // Parse và validate cùng lúc - throw error nếu không hợp lệ
  return UserSchema.parse(raw);
}

// Hoặc dùng safeParse để xử lý lỗi không throw
const result = UserSchema.safeParse(rawData);
if (result.success) {
  console.log(result.data); // Đã được validate, type là User
} else {
  console.error(result.error.issues); // Mảng lỗi chi tiết
}

import * as v from 'valibot';

// Cú pháp khác một chút nhưng concept tương tự
const UserSchema = v.object({
  id: v.pipe(v.number(), v.minValue(1)),
  name: v.pipe(v.string(), v.minLength(2), v.maxLength(50)),
  email: v.pipe(v.string(), v.email()),
});

type User = v.InferOutput<typeof UserSchema>;

// tsconfig.json
{
  "compilerOptions": {
    // Cho phép file .js tồn tại trong dự án TS
    "allowJs": true,

    // Kiểm tra JS file bằng TS rules (optional, bật sau)
    "checkJs": false,

    // Bắt đầu với strict: false, bật dần sau
    "strict": false,

    "noImplicitAny": false
  }
}

# Hầu hết thư viện phổ biến có @types package riêng
npm install --save-dev @types/lodash @types/express

# Kiểm tra types có sẵn chưa
npx npx tsd check

// Tạo file declarations: src/types/some-library.d.ts
declare module 'legacy-library' {
  // Khai báo những gì bạn dùng
  export function doSomething(input: string): void;
  export const version: string;

  // Hoặc khai báo tạm để không bị lỗi
  const lib: any;
  export default lib;
}

// Thay vì bật strict: true một lần, bật từng flag
{
  "compilerOptions": {
    // Tuần 1: bắt implicit any
    "noImplicitAny": true,

    // Tuần 2: bật null checks
    "strictNullChecks": true,

    // Tuần 3: bật các flag còn lại
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true
  }
}

// any: tắt hoàn toàn type checking - TRÁNH dùng
function processAny(data: any) {
  data.nonExistentMethod(); // TS không báo lỗi, runtime crash
  const x: number = data; // TS không báo lỗi
}

// unknown: type-safe alternative cho any
function processUnknown(data: unknown) {
  // data.nonExistentMethod(); // TS báo lỗi - ĐÚNG

  // Phải narrow type trước khi dùng
  if (typeof data === 'string') {
    console.log(data.toUpperCase()); // OK - TS biết đây là string
  }

  if (data instanceof Error) {
    console.error(data.message); // OK
  }
}

// Readonly để tránh mutation ngoài ý muốn
const config: Readonly<{ apiUrl: string; timeout: number }> = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};
// config.apiUrl = '...'; // Lỗi compile!

// Satisfies operator (TS 4.9+) - validate type mà không mất inference
const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
} satisfies Record<string, string | number[]>;

// palette.red vẫn là number[], không phải string | number[]
// Nếu dùng 'as', TS sẽ cast và mất type info chi tiết

// Template literal types
type EventName = 'click' | 'focus' | 'blur';
type HandlerName = `on${Capitalize<EventName>}`;
// HandlerName = 'onClick' | 'onFocus' | 'onBlur'