Avoid repetitive typescript definitions

Question

Say I have these TS definitions:

export type SearchStackParamList = {
  SearchScreen: undefined;
  Restaurant: undefined;
};

export type SearchScreenProps = CompositeScreenProps<
  NativeStackScreenProps<SearchStackParamList, 'SearchScreen'>,
  CompositeScreenProps<
    NativeStackScreenProps<SearchStackParamList>,
    NativeStackScreenProps<RootStackParamList>
  >
>;

export type RestaurantScreenProps = CompositeScreenProps<
  NativeStackScreenProps<SearchStackParamList, 'Restaurant'>,
  CompositeScreenProps<
    NativeStackScreenProps<SearchStackParamList>,
    NativeStackScreenProps<RootStackParamList>
  >
>;

See how SearchScreenProps and RestaurantScreenProps are kinda redundant? Is there a way I can improve this so it's less verbose? Maybe through some kind of "extend" function?

CertainPerformance · Accepted Answer · 2023-02-02 06:20:28Z

1

Make a wrapper type that takes a string type as a generic and gives the big complicated CompositeScreenProps in exchange.

type ScreenProps<T extends string> = CompositeScreenProps<
  NativeStackScreenProps<SearchStackParamList, T>,
  CompositeScreenProps<
    NativeStackScreenProps<SearchStackParamList>,
    NativeStackScreenProps<RootStackParamList>
  >
>;

export type SearchScreenProps = ScreenProps<'SearchScreen'>;
export type RestaurantScreenProps = ScreenProps<'Restaurant'>;

If extends string is too broad, you can use 'SearchScreen' | 'Restaurant' or whatever is appropriate.

answered Feb 2, 2023 at 6:20

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Over a year ago

Beautiful! Exactly what I was after. Thank you!

Ben Over a year ago

Just one thing, I get a TS warning for "T":

Type 'T' does not satisfy the constraint 'keyof SearchStackParamList'. Type 'string' is not assignable to type 'keyof SearchStackParamList'.

So just replacing string with keyof SearchStackParamList is probably necessary?

CertainPerformance Over a year ago

If extends string is too broad, you can use 'SearchScreen' | 'Restaurant' or whatever is appropriate. - so use T extends keyof SearchStackParamList instead

Collectives™ on Stack Overflow

Avoid repetitive typescript definitions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related