具有 UNIQUE 通用节点的通用树

Question

问题描述

我有一个带有通用节点的通用树。您可以将其视为具有多级子元素的扩展路由器配置。

要注意的是，每个节点都可以有其父节点的其他通用类型（更多详细信息 - 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
}

问题

我应该从哪里获得这些类型？

目标是让它尽可能干。也许使用类型推断？

Typescript Playground

请问有什么需要帮助的吗？

Answer 1

pageData 接口的问题是 parent T 与 children 所需的类型相同。您想要的是打开通用类型以容纳任何记录，从而允许 children 定义自己的属性。

interface pageData<T extends Record<string, string>> {
  path: string,
  contentTranslations: translations<T>
  element: ReactNode,
  children?: Array<pageData<Record<string, string>>>
}

你仍然会得到组件 props 的强类型特性，但没有继承的限制

具有 UNIQUE 通用节点的通用树

Generic tree with UNIQUE generic nodes

translation

type-inference

typescript

reactjs

问题描述

代码

问题