对象中键值的 TypeScript 类型

Question

我正在尝试使用 TypeScript 为导航库定义自定义类型，但我还没有全神贯注地创建一个 navigate 函数，该函数将屏幕的名称作为第一个参数，屏幕的属性作为第二个参数，同时仍然是类型安全的。

我正在努力：

安全地键入屏幕名称 (keyof Stack) 作为第一个参数
安全地封装我的两个导航堆栈（navigate<LoginStack>('HomeScreen') 应该永远不会工作，只有来自 LoginStack 的屏幕应该是可能的）
使用相应屏幕名称 (keyof Stack) 的正确参数作为第二个参数

我目前的做法：

ScreenDefinitions.ts:

export interface LoginStackScreens {
    LoginScreen: BaseProps & { isHeadless?: boolean };
    ForgotPasswordScreen: BaseProps & { email: string };
}
export interface HomeStackScreens {
    HomeScreen: BaseProps & { isHeadless?: boolean };
    SavedScreen: BaseProps;
    ChatsListScreen: BaseProps;
    MyProfileScreen: BaseProps;
    PostDetailsScreen: BaseProps & {
        post: Post;
    };
    // ... some more
}

Navigation.ts:

type ValueOf<T> = T[keyof T];
function navigate<Stack extends HomeStackScreens | LoginStackScreens>(screenName: keyof Stack, props: ValueOf<Stack>): void {
    // Navigation logic
}

navigate<HomeStackScreens>('HomeScreen', {});

虽然我获得了点 1. 和 2.，但第二个参数（arguments）的类型不安全，因为它们包含 HomeStackScreens 堆栈中的所有值：

而在这种情况下我只想拥有 BaseProps & { isHeadless?: boolean }（参见 HomeStackScreens 定义）

Answer 1

试试这个！

function navigate<Stack extends {}>(
  screenName: keyof Stack,
  props: Stack[typeof screenName]
) {
  // Implementation
}

示例，

type SomeStack = {
  someScreen: {
    test: string
  }
}

navigate<SomeStack>('someScreen', {
  test: 5 // Fails - should be a string!
})

对象中键值的 TypeScript 类型

TypeScript type for value of key in object

javascript

types

typescript

definitelytyped

reactjs