問題描述
我有一個帶有通用節點的通用樹。您可以將其視為具有多級子元素的擴展路由器配置。
問題是，每個節點都可以具有其父節點的其他泛型型別（更多詳細資訊 - Typescript Playground）。
因此，當節點有子節點時，問題在于鍵入其節點泛型。
代碼
type ReactNode = string
type languageTag = 'en' | 'ru'/* | 'de' | 'cs' | 'fr' | 'cn' | 'pl' */
// the type below may be the problem
type translations<T extends unknown = unknown> = {
[key in languageTag]: T
}
interface pageData<T extends unknown = unknown> {
path: string,
contentTranslations: translations<T>
element: ReactNode,
children?: Array<pageData<T>>
}
const informationPageData: pageData<{ hobbies: string/* , fullName: string, birthDate: string, sex: string, ... */ }> = {
path: 'information',
contentTranslations: {
en: { hobbies: 'hobbies' },
ru: { hobbies: 'хобби' }
},
element: 'profile information'
}
const profilePageData: pageData<{ recentPosts: string }> = {
path: ':profileId',
contentTranslations: {
en: { recentPosts: 'recent posts' },
ru: { recentPosts: 'недавние посты' }
},
element: 'profile component',
children: [ informationPageData ] // Error
}
const profilesPageData: pageData<{ youMayKnow: string }> = {
path: '/profiles',
contentTranslations: {
en: { youMayKnow: 'you may know' },
ru: { youMayKnow: 'возможно вы знакомы' }
},
element: 'profiles list',
children: [ profilePageData ] // Error
}
問題
我應該從哪里獲得這些型別？
目標是使其盡可能干燥。也許通過型別推斷？
打字稿游樂場
我可以請你幫忙嗎？
uj5u.com熱心網友回復：
您的pageData介面問題是父級T與子級所需的型別相同。您想要的是打開泛型型別以容納任何記錄，從而允許孩子定義自己的屬性。
interface pageData<T extends Record<string, string>> {
path: string,
contentTranslations: translations<T>
element: ReactNode,
children?: Array<pageData<Record<string, string>>>
}
你仍然會得到組件 props 的強型別特性，但沒有繼承的限制
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/405723.html
標籤：
下一篇：根據情節選擇復制檔案