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

Ouverte
#1,212 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
38/100
Type d'issue
Documentation
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react-native, typescript
Domaine
documentation

Piste de recherche

Examinez la page TypeScript sur la vérification des types du navigateur liée dans l’issue, notamment ses exemples de RootStackParamList et le comportement de setParams décrit par le rapporteur. Clarifiez comment représenter les routes avec des paramètres obligatoires et facultatifs, et mettez à jour l’exemple ou l’explication approprié afin que les appels de navigation documentés correspondent aux types pris en charge.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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?

Langage dominant
JavaScript
Étoiles
324
Forks
2k
Métriques de merge des PR
Aucune PR mergée en 30 j

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-navigation/react-navigation.github.io

Toutes les issues de react-navigation/react-navigation.github.io

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.