1. 18:35 11/10/2026
Khi xây dựng các ứng dụng React đa nền tảng, việc duy trì một codebase nhất quán và có thể tái sử dụng là điều vô cùng quan trọng. TypeScript mang lại cho bạn sự an toàn về kiểu dữ liệu, trong khi Storybook cung cấp một môi trường kể chuyện giao diện người dùng độc lập. Khi kết hợp hai công cụ này, bạn có thể định nghĩa các component một cách rõ ràng, thử nghiệm chúng một cách dễ dàng và đảm bảo chúng hoạt động trơn tru trên cả web và thiết bị di động.
**Tại sao TypeScript lại quan trọng**
- **Kiểu dữ liệu rõ ràng**: Các props, events và trạng thái được định nghĩa rõ ràng giúp giảm thiểu các lỗi do truyền sai tham số, đặc biệt khi một component được chia sẻ giữa các nền tảng.
- **Tự động hoàn thành tốt hơn**: IDE có thể cung cấp các gợi ý chính xác, giúp quá trình phát triển trở nên nhanh chóng và hiệu quả.
- **Kiểm tra nghiêm ngặt**: Quá trình biên dịch TypeScript sẽ phát hiện các vấn đề trước khi mã được thực thi, giúp bạn tránh được nhiều lỗi khó khăn trong quá trình chạy.
**Các bước thiết lập**
1. **Tạo một thư viện components dùng chung**
- Sử dụng một dự án riêng biệt (ví dụ: `my-lib`) với cấu trúc thư mục rõ ràng (`src/components/`).
- Xuất các component dưới dạng ESM hoặc CommonJS, tùy thuộc vào mục tiêu của bạn.
2. **Viết interface với TypeScript**
```typescript
export interface ButtonProps {
label: string;
onClick?: () => void;
variant?: 'primary' | 'secondary';
}
```
Việc định nghĩa interface một cách rõ ràng giúp bạn dễ dàng tái sử dụng component trên cả hai nền tảng.
3. **Tích hợp Storybook**
- Cài đặt `@storybook/react` và `@storybook/react-native` trong thư viện.
- Tạo tệp `.storybook/main.ts` để trỏ đến các câu chuyện trên cả hai nền tảng.
4. **Tạo các câu chuyện cho từng nền tảng**
- Sử dụng thư mục `stories/` và đặt tên cho các tệp theo quy ước `Button.web.stories.tsx` và `Button.native.stories.tsx`.
- Trong mỗi câu chuyện, bạn có thể điều chỉnh các tham số (ví dụ: `decorators` cho theme của web so với theme của thiết bị di động).
5. **Thêm các tham số kiểm tra**
- Sử dụng `args` để xác định các giá trị props khác nhau.
- Thêm các câu chuyện kiểm tra trạng thái (ví dụ: disabled, loading) để đảm bảo component phản ứng một cách chính xác.
**Mẹo thực tế**
- **Tận dụng các loại trích xuất từ props**: Sử dụng `ExtractProp` để lấy các props chỉ dành cho web (ví dụ: `HTMLAttributes<HTMLButtonElement>`) và các props chỉ dành cho thiết bị di động (ví dụ: `PressableProps`) mà không gây xung đột.
- **Sử dụng các loại chung**: Tạo một tệp `types.ts` chung để định nghĩa các loại trạng thái, theme hoặc callback có thể được sử dụng trên cả hai nền tảng.
- **Tự động hóa kiểm tra kiểu dữ liệu**: Thêm `tsc --noEmit` vào script `package.json` của thư viện để đảm bảo không có lỗi kiểu dữ liệu nào tồn tại trong quá trình xây dựng.
- **Tài liệu trong Storybook**: Sử dụng ghi chú để ghi lại cách sử dụng, các biến thể có thể có và bất kỳ lưu ý đặc biệt nào về nền tảng.
**Lợi ích đạt được**
- **Tiết kiệm thời gian**: Các component được phát triển một lần và có thể sử dụng trên cả hai nền tảng, giúp giảm thời gian viết mã.
- **Tính năng nhất quán**: Các theme, hành vi và trạng thái được đồng bộ hóa, mang lại trải nghiệm người dùng thống nhất.
- **Quy trình phát triển nhanh hơn**: Storybook cho phép bạn xem, thử nghiệm và ghi lại các component mà không cần khởi động ứng dụng, giúp quá trình phát triển trở nên nhanh chóng.
- **Tương lai bền vững**: TypeScript bảo vệ mã nguồn khỏi các thay đổi trong tương lai, giúp thư viện trở nên đáng tin cậy cho các nhóm lớn.
Bằng cách kết hợp TypeScript và Storybook, bạn có thể xây dựng một hệ sinh thái component mạnh mẽ, sẵn sàng cho tương lai, giúp các nhóm phát triển React Web và React Native làm việc hiệu quả hơn và mang lại các sản phẩm chất lượng cao hơn cho người dùng.