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

Offen
#1,212 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
38/100
Issue-Typ
Dokumentation
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react-native, typescript
Bereich
documentation

Rechercherichtung

Überprüfe die im Issue verlinkte TypeScript-Seite zur Typprüfung des Navigators, einschließlich ihrer Beispiele für RootStackParamList und des vom Reporter beschriebenen setParams-Verhaltens. Stelle klar, wie Routen mit erforderlichen und optionalen Parametern dargestellt werden, und aktualisiere das entsprechende Beispiel oder die Erklärung, sodass die dokumentierten Navigationsaufrufe den unterstützten Typen entsprechen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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?

Vorherrschende Sprache
JavaScript
Sterne
324
Forks
2k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-navigation/react-navigation.github.io

Alle Issues in react-navigation/react-navigation.github.io

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.