Типобезопасный navigationHandler с React-Navigation

У меня проблема с Typescript и React Navigation для моего приложения React Native. У меня есть следующая настройка в моем проекте, которая дает мне потрясающую помощь и автозаполнение при использовании, например, navigation.push().

Типы

import { StackNavigationProp } from '@react-navigation/stack';

export type RootStackParamList = {
    Home: undefined;
    Content: undefined;
    List: undefined;
};

export type StackNavigationProps = StackNavigationProp<RootStackParamList>;

Применение

const navigation = useNavigation<StackNavigationProps>();

Однако я создал функцию-обработчик навигации, которая принимает параметр, который передается в navigation.push. Он отлично работает, пока тип параметра имеет тип any.

const navigationHandler = useCallback((targetScreen) => {
    navigation.push(targetScreen);
}, [navigation]);

Но я не доволен anyтипом и предпочел бы, чтобы targetScreenна самом деле это был просто один из экранов, которые были объявлены в моем RootStackParamListтипе. Я пытался бесчисленными способами удовлетворить pushметод объекта навигации, но я застрял.

Следующая попытка была наиболее успешной, но пока не работает так, как должна. Это дает мне автозаполнение на доступных экранах, но pushвсе еще недовольно.

Тип:

export type NavigationScreen<T extends RootStackParamList> = {
    [K in keyof T]: K;
}[keyof T];

Применение:

const navigationHandler = useCallback(
    <T extends RootStackParamList>(targetScreen: NavigationScreen<T>) => {
        navigation.push(targetScreen);
},[navigation]);

При наведении на ошибку я получаю следующее:

(параметр) targetScreen: { [K в ключе T]: K; }[keyof T] Аргумент типа '[{ [K в ключе T]: K; }[keyof T]]' нельзя присвоить параметру типа '["Home" | «Контент» | "Список"] | ["Дом" | «Контент» | "Список", не определено]'. Введите '[{ [K в ключе T]: K; }[keyof T]]' нельзя присвоить типу '["Home" | «Контент» | "Список"]'.
Тип 'keyof T' не может быть назначен типу '"Home" | «Контент» | "Список"'.
Введите строку | номер | символ» не может быть назначен типу «Главная» | «Контент» | "Список"'.
Тип 'string' не может быть присвоен типу '"Home" | «Контент» | "Список"'.
Тип «keyof T» не может быть присвоен типу «List».
Введите строку | номер | символ» не может быть присвоен типу «Список».
Тип «строка» не может быть присвоен типу «Список».

Как заставить это работать?

Если вы просто заинтересованы в использовании имени экрана для своей navigationHandlerфункции, но не в параметрах, вы можете сделать так, как @artcorpse предложил в своем комментарии к вашему вопросу, и использовать keyof RootStackParamList:

const navigationHandler = useCallback(
    (targetScreen: keyof RootStackParamList) => {
        navigation.push(targetScreen);
    },
    [navigation]
);

Если, с другой стороны, вы хотите разрешить параметры, у вас есть два варианта:

Вариант A: Общая функция

const navigationHandler = useCallback(
    <T extends keyof RootStackParamList>(
        targetScreen: T,
        targetScreenParams?: RootStackParamList[T]
    ) => {
        navigation.push(
            targetScreen as keyof RootStackParamList,
            targetScreenParams
        );
    },
    [navigation]
);

Преимущество этой опции заключается в том, что формы объектов параметров маршрута проверяются на соответствие соответствующим маршрутам, как определено в RootStackParamListтипе. Например,

type RootStackParamList = {
    Default: undefined,
    Home: {a: 'a'};
    Profile: { userId: string };
};

navigationHandler('Home', {a: 'a'}); //OK
navigationHandler('Home', {userId: 'a'}); //ERROR

Вариант B: реверсирование уже существующих типов

const navigationHandler2 = useCallback(
    (
        targetScreen: Parameters<typeof navigation.push>[0],
        targetScreenParams?: Parameters<typeof navigation.push>[1]
    ) => {
        navigation.push(targetScreen, targetScreenParams);
    },
    [navigation]
);

Эта опция берет существующие типы, которые вы определили, и пытается извлечь их из navigation.pushметода. Недостатком здесь является то, что вы не получите вышеупомянутую проверку относительно маршрутов и соответствующих форм объектов параметров.

Источники:

• Документация по API для navigation.push
• Рекомендации машинописного текста для реактивной навигации