引用类型本身，TypeScript答案

【问题标题】：Reference Type Within itself, TypeScript引用类型本身，TypeScript
【发布时间】：2021-03-29 21:00:17
【问题描述】：

我正在尝试根据输入的值 (screenName) 将类型（屏幕参数类型）传递给字段。

这是导航道具。

export interface IEditProfileStackNavigatorProps<RouteName extends keyof EditProfileRoutes> {
  navigation: StackNavigationProp<EditProfileRoutes, RouteName>;
  route: RouteProp<EditProfileRoutes, RouteName>;
}

路线

export type EditProfileRoutes = {
  Options: undefined;
  Name: undefined;
  Username: { token: string };
  Bio: undefined;
  Location: undefined;
  VerifyUser: {
    screenToNavigateTo: keyof Omit<EditProfileRoutes, 'VerifyUser'> | keyof ManageAccountRoutes;
    params: any;
  };
};

我希望 params 根据导航功能中插入的屏幕名称接收屏幕的参数类型。

navigation.navigate('VerifyUser', {
  screenToNavigateTo: 'Username',
  params: { some: 'value' } }
)}

如果插入screenToNavigateTo 的屏幕是username，则参数类型将为{ token: string }，其余为undefined。

我的方法是做类似的事情

export type EditProfileRoutes = {
  Options: undefined;
  Name: undefined;
  Username: { token: string };
  Bio: undefined;
  Location: undefined;
  VerifyUser: {
    screenToNavigateTo: keyof Omit<EditProfileRoutes, 'VerifyUser'> | keyof ManageAccountRoutes;
    params?:EditProfileRoutes['VerifyUser']['screenToNavigateTo'];
  };
};

但这似乎不起作用

【问题讨论】：

标签： javascript typescript react-native types react-navigation

【解决方案1】：

您希望VerifyUser 的两个字段相互匹配，所以我们想要的是所有有效配对的联合。

这个generic mapped type接受一个对象Routes并将其映射到一个具有相同键的新对象，但值是具有screenToNavigateTo和params属性的对象。 screenToNavigateTo 是来自 Routes 的键，params 是值。

type RouteParams<Routes> = {
  [K in keyof Routes]: {
    screenToNavigateTo: K,
    params: Routes[K];
  }
}

然后我们在末尾添加[keyof Routes]（index access type）以放弃键并获得所有元素的联合。

type RouteParams<Routes> = {
  [K in keyof Routes]: {
    screenToNavigateTo: K,
    params: Routes[K];
  }
}[keyof Routes]

我们从RouteParams<EditProfileRoutes> 得到的已解决联合如下所示：

{
    screenToNavigateTo: "Options";
    params: undefined;
} | {
    screenToNavigateTo: "Name";
    params: undefined;
} | {
    screenToNavigateTo: "Username";
    params: {
        token: string;
    };
} | { ...

使用这种类型，我们现在可以将EditProfileRoutes 定义为：

export type EditProfileRoutes = {
  Options: undefined;
  Name: undefined;
  Username: { token: string };
  Bio: undefined;
  Location: undefined;
  VerifyUser: RouteParams<Omit<EditProfileRoutes, 'VerifyUser'>> | RouteParams<ManageAccountRoutes>
};

【讨论】：