react-navigation / react-navigation/react-navigation.github.io
typescript - type checking route params when some params are required while other are optional
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 324
- Fork
- 2k
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
regarding: https://reactnavigation.org/docs/typescript/#type-checking-the-navigator
it says:
Specifying undefined means that the route doesn't have params. A union type with undefined (e.g. SomeType | undefined) means that params are optional.
here it says SomeType | undefined, where it looks like its referring to a single param. but "params" is plural and seems to refer to all the route params.
however, in the above example it shows:
type RootStackParamList = {
Home: undefined;
Profile: { userId: string };
Feed: { sort: 'latest' | 'top' } | undefined;
};
this example shows that either a route takes no params, takes 1 required param or 1 optional param. but what if a route takes both required and optional params? in this case i cannot type the entire param object to be undefined
so something like this:
type RootStackParamList = {
SomeRoute: {
param1: string,
param2: string | undefined,
}
};
i tried this, however it still shows errors when not passing the optional params. so this code:
navigation.navigate('SomeRoute', {
param1: 'some string'
});
shows this error:
Argument of type '{ param1: string; }' is not assignable to parameter of type '{ param2: string | undefined; param1: string; }'.
Property 'param2' is missing in type '{ param1: string; }' but required in type '{ param2: string | undefined; param1: string; }'.ts(2345)
in my case, im setting param2 in SomeRoute with useLayoutEffect with setParams(), so i need to type it or else that shows in error.
Type '{ param2: any; }' is not assignable to type 'Partial<Readonly<{ param1: string; }>>'.
Object literal may only specify known properties, and 'param2' does not exist in type 'Partial<Readonly<{ param1: string; }>>'.ts(2322)
this error disappears when typing it like i did. but i still get the other error.
i have also tried setting the types as optional with a question mark. but this also shows an error if the screen takes no other params.
so this no longer shows an error:
type RootStackParamList = {
SomeRoute: {
param1: string;
param2?: string | undefined,
}
};
navigation.navigate('SomeRoute', {
param1: 'some string,
});
but this does:
type RootStackParamList = {
SomeRoute: {
param2?: string | undefined,
}
};
navigation.navigate('SomeRoute');
is it possible to define route params like this? where some are required while others are optional, not just the while params object?
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Xem lại trang kiểm tra kiểu TypeScript của navigator được liên kết trong issue, bao gồm các ví dụ về RootStackParamList và hành vi của setParams được người báo cáo mô tả. Làm rõ cách biểu diễn các route có tham số bắt buộc và tùy chọn, đồng thời cập nhật ví dụ hoặc phần giải thích liên quan để các lệnh gọi điều hướng được ghi trong tài liệu khớp với các kiểu được hỗ trợ.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- documentation
- Loại issue
- Tài liệu
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100