TypeScript 5 Latest Features: Improve Code Quality & Performance

Anh em ạ, TypeScript 5.0 không chỉ là một bản cập nhật thông thường đâu. Mình đã trải nghiệm và thấy nó thực sự thay đổi cuộc chơi, đặc biệt là với sự trở lại của Decorators theo chuẩn ECMAScript và những cải tiến vượt bậc về hiệu suất. Quên đi nỗi lo build time ì ạch hay phải dùng cờ --experimentalDecorators đi. Phiên bản này giúp mã sạch hơn, an toàn hơn và quá trình build dự án nhanh hơn đáng kể. Nếu bạn đang tự hỏi TypeScript 5 tính năng mới nhất có gì đáng chú ý, thì đây chính là câu trả lời.

Decorators officially return - "Magic" for Class and Method is back!

Decorators in TypeScript 5 officially follow the ECMAScript (Stage 3) standard, allowing you to neatly customize classes and methods without complicated configuration.

Clean new syntax, ECMAScript standard: Goodbye "experimentalDecorators" flag

You no longer have to enable the experimental flag in the configuration file, because TypeScript 5 has native support for Decorators.

Nhiều anh em làm phát triển phần mềm lâu năm chắc hẳn đã quen với Decorators. Trước đây, mỗi lần setup dự án, mình đều phải đau đầu với cái flag experimentalDecorators trong tsconfig.json. Nhưng với TypeScript 5.0 có những thay đổi gì? Tin vui là Decorators giờ đã là một phần của chuẩn ESM (ECMAScript Modules) Stage 3.

This means that the syntax is stable, standardized, and supported "out of the box" by tsc (TypeScript Compiler). Removing the experimental flag not only makes the configuration file cleaner, but also confirms the maturity of this feature. For frontend engineers and backend engineers, this is a big step forward in OOP (Object Oriented Programming).

This is an important part of the language. For beginners, learning Learning TypeScript from scratch for JavaScript developers is a great stepping stone to grasp these advanced concepts.

Practical applications: From validation and logging for API in NestJS to "decorating" components in Angular

Cách sử dụng Decorators trong TypeScript 5 cực kỳ hữu ích để xử lý các logic cắt ngang (cross-cutting concerns) như logging, validation.

Tại Phạm Hải, mình thường xuyên làm việc với các framework nặng về Decorators như NestJS và Angular. Cách tiếp cận mới giúp việc tái sử dụng logic trở nên thanh lịch hơn bao giờ hết. Trong NestJS, bạn có thể dễ dàng quản lý routing với @Get() hoặc dependency injection bằng @Injectable().

Giờ đây, bạn có thể tự tin viết một @LoggedMethod để tự động in ra log mỗi khi một hàm API được gọi, hoặc dùng @Validate để kiểm tra dữ liệu đầu vào. Những lợi ích của TypeScript 5 cho nhà phát triển thể hiện rõ nhất khi bạn phải quản lý một codebase phức tạp. Nó giúp tách biệt phần logic nghiệp vụ cốt lõi khỏi các tác vụ phụ trợ, giữ cho code luôn "sạch".

To enhance data security, you can combine Decorators with external libraries. Learn more about Zod validation schema TypeScript to see this perfect combination.

"Before and after" code example: I show you how the new decorator helps reduce boilerplate code

New decorators replace bulky wrapper functions, helping your class stay focused and much easier to read.

Để mình lấy một ví dụ thực tế. Giả sử bạn muốn log thời gian thực thi của một method. Trước đây, bạn phải bọc logic bên trong một hàm khác, tạo ra rất nhiều boilerplate code. Giờ đây, bạn chỉ cần gắn @logged ngay trên method.

class APIClient {
  @logged
  async fetchData() {
    // Logic fetch data từ server
  }
}

This syntax is not only beautiful but also takes full advantage of Static Typing capabilities. When combined with features like Class Attribute Initialization and Abstract Constructor Signature, your code will be extremely tight.

TypeScript 5 nâng cao chất lượng mã như thế nào? Chính là nhờ việc giảm thiểu những đoạn code lặp đi lặp lại dễ sinh lỗi này. Sự thay đổi này thực sự mang lại luồng gió mới cho các dự án JavaScript quy mô lớn.

Outstanding speed and performance: Building projects is no longer an "obsession" of waiting

This version brings deep optimizations within the compiler, helping to reduce package size and increase build speed by up to 20%.

Module Resolution "Bundler": Optimized specifically for modern build tools such as Vite, esbuild, Webpack

Tùy chọn moduleResolution: "bundler" được thiết kế đặc biệt để TypeScript hiểu đúng cách các công cụ đóng gói hiện đại xử lý import.

Một trong các tính năng nổi bật của TypeScript 5 là sự ra đời của Module Resolution Bundler. Trước đây, chúng ta thường dùng node hoặc node16, nhưng chúng lại bắt buộc phải ghi rõ đuôi file (như .js) trong các câu lệnh import. Điều này thường gây khó chịu vì các bundler hiện đại không hề yêu cầu.

Với tùy chọn "bundler" mới, TypeScript giờ đây đã "nói cùng ngôn ngữ" với Vite, esbuild, Webpack, Parcel, và swc. TypeScript 5 hỗ trợ bundler như thế nào? Nó cho phép bạn import file gọn gàng không cần đuôi mở rộng, đồng thời hỗ trợ tốt cơ chế exports trong package.json.

This is especially meaningful when building complex user interface applications. If you're working with this popular stack, check out the TypeScript with React integration guide for the best configuration.

The numbers speak for themselves: Reduce startup time, compilation time and package size

Removing namespaces and switching to modules helps TypeScript 5 reduce installation space by ~59% and increase build speed significantly.

Do you know why improving compilation performance with TypeScript 5 is highly praised? Microsoft has refactored the entire source code of TypeScript, moving from namespaces to ESM. As a result, the package size decreased from 63.8MB to only about 26.4MB.

Below is a performance comparison table based on actual reports to date:

For a Full-stack developer who has to constantly rerun the server on Node.js, saving a few seconds each time you save a file is truly an invaluable gift. Cleaning up old code also contributed greatly to this achievement. TypeScript 5 and large project optimization now go hand in hand thanks to these impressive numbers.

Improve performance with --verbatimModuleSyntax: Ensure imports/exports are processed consistently, avoiding unnecessary errors

Cờ --verbatimModuleSyntax giúp đơn giản hóa việc quản lý các câu lệnh import/export, đảm bảo trình biên dịch loại bỏ chính xác các type-only imports.

Khi làm việc với các dự án lớn, việc vô tình import thừa các type vào runtime có thể gây phình bundle size. Phiên bản mới giới thiệu cờ --verbatimModuleSyntax. Khi bật tính năng này, bất kỳ câu lệnh import nào không có từ khóa type sẽ được giữ nguyên.

Ngược lại, nếu có từ khóa type, nó sẽ bị loại bỏ hoàn toàn khỏi mã JavaScript biên dịch. Điều này mang lại sự rõ ràng tuyệt đối và giúp các công cụ build hoạt động hiệu quả hơn. Nó là một phần của chiến lược TypeScript 5 cho frontend và backend, giúp quá trình chuyển đổi mã an toàn hơn.

If you are planning to upgrade an old project, please refer to Migration JavaScript to TypeScript step by step to apply this flag most effectively.

"Small but powerful" improvements make code safer and more flexible

Bên cạnh tốc độ, phiên bản này mang đến Const Type Parameters, Union Enums và export type * để siết chặt an toàn kiểu.

Const Type Parameters: Tighten data types, helping TypeScript to infer types more accurately, especially with immutable values

Thêm modifier const vào generic type parameter giúp trình biên dịch tự động suy luận ra kiểu literal chính xác nhất thay vì kiểu chung chung.

Const Type Parameters là một trong những kiểu dữ liệu mới trong TypeScript 5 (hay chính xác hơn là cách xử lý kiểu) mà mình cực kỳ ưng ý. Trước đây, khi truyền một mảng vào hàm generic, hệ thống thường suy luận nó thành mảng mutable (ví dụ string[]).

Để ép nó thành tuple bất biến, bạn phải thêm as const lúc gọi hàm. Giờ đây, bạn chỉ cần khai báo <const T> ở định nghĩa hàm. Hãy xem sự khác biệt:

// Cách cũ (Trước TS 5.0)
function getNames<T>(names: T[]) {
  return names;
}
const oldResult = getNames(["Hai", "Pham"] as const); 

// Cách mới với TS 5.0
function getNamesNew<const T>(names: T) {
  return names;
}
// 'newResult' tự động được suy luận là readonly ["Hai", "Pham"]
const newResult = getNamesNew(["Hai", "Pham"]);

This feature improves type inference superbly, combining perfectly with Variadic Tuple Types and Key Remapping to create powerful utility types. This concept may be a bit abstract to newcomers. To master the basics, you should check out TypeScript Generics with easy-to-understand explanations with examples.

All Enums are Union Enums: All enums are now considered unions, making narrowing and type checking with enums safer and more predictable

Every enum now acts as a union type, allowing correct narrowing and preventing the assignment of invalid values.

Union Enums đã giải quyết triệt để một "nỗi đau" tồn tại từ lâu. Trước đây, nếu bạn có một enum chứa các giá trị được tính toán (computed members), trình biên dịch sẽ coi nó như một kiểu số chung chung. Điều này dẫn đến rủi ro gán sai giá trị mà không bị báo lỗi.

With this update, each member of the enum has a separate type. For example, you can define a new type that includes only a few specific values ​​from the original enum:

enum LogLevel {
  Debug,
  Info,
  Warning = Math.random() > 0.5 ? 2 : 3, // Giá trị tính toán
  Error
}
// TS 5.0 hiểu chính xác từng giá trị, không còn là number chung chung
type InfoOrError = LogLevel.Info | LogLevel.Error;

This enhances type safety and supports Null Checking better when used in switch-case statements. TypeScript's latest features impact projects in ways that force you to write more standardized code.

This is part of adhering to rigorous standards in programming. See more about TypeScript strict mode best practices to optimize your codebase.

"export type *" support: Refactor and manage type modules in a cleaner, more compact way in large projects

Cú pháp export type * from "module" giúp bạn re-export toàn bộ các type từ một file khác mà không sợ lẫn lộn với các giá trị runtime.

In enterprise projects, organizing export files (barrel files) is very common. The update adds the **export type *** syntax, allowing you to explicitly re-export all Type Aliases and Interfaces from another module.

With support for new JSDoc tags like @satisfies and @overload, or resource management features like using declarations and Deferred Type Parameter Instantiation in the next versions, your code quality will be raised to the next level.

When exporting files, understanding the nature of types is essential. Don't miss the article Interface vs Type How is TypeScript different for a more in-depth look.

In short, updating to take advantage of the latest TypeScript 5 features is not just about "catching trends". This is a real step forward in developer experience and project performance. From powerful Decorators, improved compilation speed to features that make code safer, all are good reasons for you to consider applying it immediately to your codebase. At Pham Hai, we always encourage you to upgrade to enjoy a smoother development environment and fewer bugs.

Have you tried any features of TypeScript 5 or are you still afraid of anything during the migration process? Leave a comment to share your experiences or questions, I will discuss with you!

Lưu ý: Thông tin trong bài viết này chỉ mang tính chất tham khảo. Để có được lời khuyên tốt nhất, vui lòng liên hệ trực tiếp với chúng tôi để được tư vấn cụ thể dựa trên nhu cầu thực tế của bạn.