TypeScript object 中鍵值的類型

Question

我正在嘗試使用 TypeScript 為導航庫定義自定義類型，但我還沒有全神貫注地創建一個navigate function，它將屏幕的名稱作為第一個參數，並將屏幕的屬性作為第二個參數，同時仍然是類型安全的。

我試着：

1. 安全地輸入屏幕名稱 ( keyof Stack ) 作為第一個參數
2. 安全地封裝我的兩個導航堆棧（ navigate<LoginStack>('HomeScreen')應該永遠不會工作，只有來自LoginStack的屏幕應該是可能的）
3. 使用正確的 arguments 作為相應屏幕名稱 ( 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!
})