TypeScript 5.4 được phát hành vào tháng 3/2024 với nhiều cải tiến về type inference và developer experience. Bài viết này tổng hợp những tính năng đáng chú ý nhất.

Preserved Narrowing in Closures

Đây là cải tiến quan trọng nhất. Trước đây, type narrowing không được giữ lại trong closures:

// TypeScript 5.3 trở về trước
function process(value: string | number) {
  if (typeof value === "string") {
    // value là string ở đây
    setTimeout(() => {
      // Nhưng ở đây value lại là string | number!
      console.log(value.toUpperCase()); // Error!
    }, 100);
  }
}

// TypeScript 5.4
function process(value: string | number) {
  if (typeof value === "string") {
    setTimeout(() => {
      // value vẫn là string! ✅
      console.log(value.toUpperCase());
    }, 100);
  }
}

NoInfer Utility Type

Utility type mới giúp kiểm soát type inference:

// Không có NoInfer - TypeScript infer từ cả 2 arguments
function createState<T>(initial: T, defaultValue: T): T {
  return initial ?? defaultValue;
}

// defaultValue ảnh hưởng đến type của T
createState("hello", 42); // T là string | number

// Với NoInfer - chỉ infer từ initial
function createState<T>(initial: T, defaultValue: NoInfer<T>): T {
  return initial ?? defaultValue;
}

createState("hello", 42); // Error! 42 không phải string
createState("hello", "world"); // OK, T là string

Object.groupBy và Map.groupBy Types

TypeScript 5.4 hỗ trợ types cho các method grouping mới trong ES2024:

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Charlie", role: "admin" },
];

// Object.groupBy
const byRole = Object.groupBy(users, (user) => user.role);
// Type: { [key: string]: { name: string; role: string }[] }

// Map.groupBy
const byRoleMap = Map.groupBy(users, (user) => user.role);
// Type: Map<string, { name: string; role: string }[]>

Improved Auto-Import

Auto-import giờ đây thông minh hơn:

• Ưu tiên import từ package.json dependencies
• Tự động chọn named import vs namespace import phù hợp
• Hỗ trợ tốt hơn cho subpath exports

Interactive Inlay Hints

Inlay hints trong VS Code giờ có thể click để navigate đến type definition. Rất hữu ích khi làm việc với complex types.

Breaking Changes

Một số thay đổi cần lưu ý:

• lib.d.ts được cập nhật với ES2024 types
• Stricter checks cho generic functions
• Một số deprecated APIs bị remove

Cách nâng cấp

# npm
npm install typescript@5.4

# yarn
yarn add typescript@5.4

# pnpm
pnpm add typescript@5.4

Kiểm tra tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2024"],
    "strict": true
  }
}

Fullstack Station Tips

TypeScript 5.4 là bản nâng cấp đáng giá với preserved narrowing – một pain point lớn đã được giải quyết. Nếu bạn đang dùng TypeScript, mình khuyên nâng cấp ngay vì:

• Ít boilerplate code hơn với closures
• NoInfer giúp viết generic functions chính xác hơn
• Better DX với improved auto-import

Hãy đảm bảo chạy tsc --noEmit sau khi nâng cấp để phát hiện breaking changes sớm.

Tham khảo

• TypeScript 5.4 Announcement
• TypeScript Documentation

Comments