PropTypes trong một ứng dụng phản ứng TypeScript

Việc sử dụng React.PropTypescó hợp lý trong Ứng dụng TypeScript React hay đây chỉ là trường hợp "dây đai và dây treo"?

Vì lớp thành phần được khai báo với một Propstham số kiểu:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

có lợi ích thực sự nào khi thêm

static propTypes {
    myProp: React.PropTypes.string
}

định nghĩa lớp?

Thường không có nhiều giá trị để duy trì đồng thời cả hai đạo cụ thành phần của bạn dưới dạng các loại TypeScript React.PropTypes.

Dưới đây là một số trường hợp hữu ích khi làm như vậy:

• Xuất bản một gói chẳng hạn như một thư viện thành phần sẽ được sử dụng bởi JavaScript thuần túy.
• Chấp nhận và chuyển đầu vào bên ngoài, chẳng hạn như kết quả từ lệnh gọi API.
• Sử dụng dữ liệu từ một thư viện có thể không có các cách đánh máy đầy đủ hoặc chính xác, nếu có.

Vì vậy, thường là một câu hỏi về mức độ bạn có thể tin tưởng vào xác thực thời gian biên dịch của mình.

Các phiên bản TypeScript mới hơn hiện có thể suy ra các loại dựa trên React.PropTypes( PropTypes.InferProps) của bạn , nhưng các loại kết quả có thể khó sử dụng hoặc tham chiếu đến nơi khác trong mã của bạn.

Typecript và PropTypes phục vụ các mục đích khác nhau. Typecript xác thực các kiểu tại thời điểm biên dịch , trong khi PropTypes được kiểm tra trong thời gian chạy .

Typecript hữu ích khi bạn đang viết mã: nó sẽ cảnh báo bạn nếu bạn chuyển đối số không đúng loại cho các thành phần React của mình, cung cấp cho bạn tính năng tự động hoàn thành cho các lệnh gọi hàm, v.v.

PropTypes hữu ích khi bạn kiểm tra cách các thành phần tương tác với dữ liệu bên ngoài, chẳng hạn như khi bạn tải JSON từ một API. PropTypes sẽ giúp bạn gỡ lỗi (khi ở chế độ Phát triển của React) tại sao thành phần của bạn bị lỗi bằng cách in các thông báo hữu ích như:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

Mặc dù có vẻ như Typecript và PropTypes làm điều tương tự, nhưng chúng không thực sự trùng lặp chút nào. Nhưng có thể tự động tạo PropTypes từ Typescript để bạn không phải chỉ định loại hai lần, hãy xem ví dụ:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Tôi đoán rằng trong một số tình huống lộn xộn mà loại đạo cụ không thể được suy ra tại thời điểm biên dịch, thì sẽ hữu ích khi xem bất kỳ cảnh báo nào được tạo ra từ việc sử dụng propTypestrong thời gian chạy.

Một tình huống như vậy sẽ xảy ra khi xử lý dữ liệu từ nguồn bên ngoài mà định nghĩa loại không có sẵn, chẳng hạn như API bên ngoài ngoài tầm kiểm soát của bạn. Đối với các API nội bộ, tôi nghĩ rằng rất đáng để nỗ lực viết (hoặc tốt hơn là tạo) các định nghĩa loại, nếu chúng chưa có sẵn.

Ngoài ra, tôi không thực sự thấy bất kỳ lợi ích nào (mà tôi tại sao tôi chưa bao giờ sử dụng nó một cách cá nhân).