react-navigation / react-navigation/react-navigation.github.io

typescript - type checking route params when some params are required while other are optional

未关闭
#1,212 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
JavaScript
星标
324
派生
2k
PR 合并指标
30 天内没有已合并 PR

描述

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?

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

检查 issue 中链接的 TypeScript 导航器类型检查页面,包括其中的 RootStackParamList 示例以及报告者描述的 setParams 行为。明确如何表示带有必需参数和可选参数的路由,并更新相关示例或说明,使文档中的导航调用与支持的类型相匹配。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
documentation
Issue 类型
文档
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。