Quy chuẩn Viết Custom Component & Typescript (Enterprise)

Hướng dẫn đặt tên Component/Files và quy tắc khi nào chọn `type` vs `interface` cho Props.

Core Mental Model

Thiết kế Component chuẩn: Tên thể hiện đúng trách nhiệm, Props rõ ràng mã hóa Type/Interface và hỗ trợ mở rộng.

Key Takeaways & Principles

Đặt tên Component: Dùng tên ngắn gọn trực diện như `Button` (trong `src/components/ui/button.tsx`), KHÔNG dùng tiền tố `Custom` thừa thãi.

Dùng `interface` khi: Định nghĩa Object shapes cần mở rộng (extends) hoặc Declaration Merging (Component Props cho UI Library).

Dùng `type` khi: Định nghĩa Union types ("sm" | "md" | "lg"), Discriminated Unions (Status = Success | Error), Tuples, Primitives hoặc Mapped types.

intermediate

15 phút

#TypeScript

#Component Design

#Best Practices

Hướng dẫn đặt tên Component/Files và quy tắc khi nào chọn `type` vs `interface` cho Props.

Core Mental Model

Thiết kế Component chuẩn: Tên thể hiện đúng trách nhiệm, Props rõ ràng mã hóa Type/Interface và hỗ trợ mở rộng.

Đặt tên Component: Dùng tên ngắn gọn trực diện như `Button` (trong `src/components/ui/button.tsx`), KHÔNG dùng tiền tố `Custom` thừa thãi.

Dùng `interface` khi: Định nghĩa Object shapes cần mở rộng (extends) hoặc Declaration Merging (Component Props cho UI Library).

Dùng `type` khi: Định nghĩa Union types ("sm" | "md" | "lg"), Discriminated Unions (Status = Success | Error), Tuples, Primitives hoặc Mapped types.