LLM:Typescript

Typescript Guide

This page aims to explain how to properly type some tricky parts of the LLM codebase.

⛵️ react-navigation

Official Documentation

First of all in order to understand the basics, you should definitely check the documentation which contains a lot of useful information.

Typing the navigators

Each navigator needs to be typed with a list of routes mapped to their corresponding params.

These navigator types are defined in the src/components/RootNavigator/types folder, in a .ts file having the the same name as the .tsx implementation.

Example:

import { ScreenName } from "../../../const";

export type MyNavigator = {
  [ScreenName.MyScreen]: {
    stuff: string;
    isStuffed?: boolean;
  };
};

💡 Tip: Having undefined params - or as a type union - allows to navigate to a screen or navigator without the need to pass a second argument to the call: navigate(ScreenName.…) instead of navigate(ScreenName.…, {}).

We use enums declared instead of strings to declare navigator and screen names. They are declared in the src/const/navigation.ts file.

It seems to be obvious but as a reminder always use ScreenName for screens and NavigatorName for navigators.

Typing the screens

Helpers

We wrote multiple helper types located in src/components/RootNavigator/types/helpers.ts to ease the typing of screens.

Props

To properly type the props of a Screen you should use the StackNavigatorProps type most of the time.

type Props = StackNavigatorProps<
  // The navigator name which contains the screen
  OnboardingNavigatorParamList,
  // The name of the route pointing to this screen
  ScreenName.OnboardingModalWarning
>

Sometimes when the component tries to access parent navigators or screens you will have to type the full navigation stack. In this case you should use the CompositeScreenProps types (or BaseComposite / RootComposite helpers).

/*
The stack here is the following:
  - RootNavigator (covered by BaseComposite)
  - BaseNavigator (covered by BaseComposite)
  - ManagerNavigatorStackParamList
  - MainNavigatorParamList <-- we are here
*/
type Props = BaseComposite<
  CompositeScreenProps<
    StackNavigatorProps<ManagerNavigatorStackParamList>,
    StackNavigatorProps<MainNavigatorParamList>
  >
>;

useNavigation

The useNavigation hook should be typed the same way as the Props type but using specific helpers: StackNavigatorNavigation, CompositeNavigation or BaseCompositeNavigation.

const navigation = useNavigation<StackNavigatorNavigation<BaseNavigatorStackParamList>>();

💡 Tip: StackNavigatorNavigation<…> is equivalent to StackNavigatorProps<…>["navigation"].

useRoute

The useNavigation hook should be typed the same way as the Props type but using the specific StackNavigatorRoute helper StackNavigatorRoute. For composition, use the same helpers as for Props and access the ["route"] property.

const route = useRoute<StackNavigatorRoute<BaseNavigatorStackParamList>>();

💡 Tip: StackNavigatorRoute<…> is equivalent to StackNavigatorProps<…>["route"].

💾 react-redux