參考類型在其內部，TypeScript

Question

我正在嘗試根據輸入的值（屏幕名稱）將類型（屏幕參數類型）傳遞給字段。

這是導航道具。

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;
  };
};

我希望參數根據插入導航 function 中的屏幕名稱接收屏幕的參數類型。

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

因此，如果在screenToNavigateTo中插入的屏幕是username ，則參數類型將為{ token: string }並且對於 rest 它將是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'];
  };
};

但這似乎不起作用

Answer 1

您希望VerifyUser的兩個字段相互匹配，所以我們想要的是所有有效配對的並集。

此通用映射類型采用 object Routes並將其映射到具有相同鍵的新 object，但值是具有屬性screenToNavigateTo和params的對象。 screenToNavigateTo是Routes的鍵， params是值。

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

然后我們在末尾添加[keyof Routes] （ 索引訪問類型）以丟棄鍵並獲得所有元素的聯合。

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>
};