function arguments 中的映射類型

Question

我在文件中有一個屏幕列表：

文件1.ts

export const LANDING = 'landing.Landing'
export const REGISTER = 'landing.Register'
export const LOGIN = 'landing.Login'

以及另一個文件中每個屏幕的道具列表

文件2.ts

type LandingProps = { foo: string }
type RegisterProps = { bar: number }
type LoginProps = { baz: object }

我想在另一個文件中創建一個navigate function，例如：

文件3.ts

import { LANDING, REGISTER, LOGIN } from 'file1'
import { LandingProps, RegisterProps, LoginProps } from 'file2'

const screens = [LANDING, REGISTER, LOGIN] as const
type ScreenType = typeof screens[number]

type Props = LandingProps | RegisterProps | LoginProps

function navigate(screen: ScreenType, props: Props) {
    console.log('Navigation to screen ', screen)
    console.log('Props are: ', props)
}

如何鍵入參數props以使 props 與相應的 ScreenType 匹配？

順便說一句，是否可以根據file1的所有導出創建一個類型，而無需指定哪個？

Answer 1

為了讓編譯器根據screen的類型來限制props的類型，你需要給它一個映射。 在您的情況下，最簡單的方法是制作一個虛擬接口，因為props的類型已經類似於鍵：

interface ScreenPropsMapping {
  [LANDING]: LandingProps,
  [REGISTER]: RegisterProps,
  [LOGIN]: LoginProps
}

因為LANDING等是const字符串文字，我們可以將它們用作接口中的計算鍵。

然后你給navigate()一個像這樣的通用簽名：

function navigate<K extends keyof ScreenPropsMapping>(
  screen: K, props: ScreenPropsMapping[K]
) {


}

這里， K被限制為映射接口的鍵之一，而props被限制為該鍵處的特定屬性類型：

navigate(LANDING, { foo: "" }); // okay
navigate(LANDING, { bar: 1 }); // error

---

至於您的旁注，如果您真的希望一個類型成為模塊中所有導出值類型的聯合，您可以執行以下操作：

import * as File1 from 'file1'
type File1Types = typeof File1[keyof typeof File1];
// type File1Types = "landing.Landing" | "landing.Register" | "landing.Login"

---

好的，希望有幫助； 祝你好運！

Playground 代碼鏈接