你如何定义一个可以递归地成为 object 的任何子树的类型？

Question

Imagine that I have the following data:

const data = {
  animilia: {
    chordata: {
      mammalia: {
        carnivora: {
          canidae: {
            canis: 'lupus',
            vulpes: 'vulpe'
          }
        }
      }
    }
  },
} as const;

Now I have a component which will render this out as a tree, recursively, like so:

function RecursiveList({ list, path = [] }) {
  return (
    <ul>
      {Object.entries(list).map(([key, value]) => {
        const reactKey = [...path, key].join('.');
        if (isString(value)) {
          return <li key={reactKey}>{value}</li>
        }
        return (
          <Fragment key={reactKey}>
            <li>{key}</li>
            <RecursiveList list={value} path={[...path, key]} />
          </Fragment>
        )
      })}
    </ul>
  );
}

The problem I'm having is defining the type for list . In theory, it should be the provided type at any depth. I tried the following:

type Tree<T extends string | Record<string, unknown>> = {
  [K in keyof T]: T extends string ? string : Tree<T>;
}

This doesn't seem to accurately reflect the type.

Is there a way to define data like this that would be a recursive tree?

Answer 1

For the purposes of the React component we don't need any conditionals or generics or anything fancy. @jonrsharpe has the right idea in his comment. A Tree is an object where each key is a string and each value is either a string or another Tree .

interface Tree {
  [key: string]: Tree | string
}

function RecursiveList({ list, path = [] }: {list: Tree, path?: string[]}) {

This works perfectly in the component. The value inside your Object.entries has type string | Tree string | Tree . If it's a string we print it, and if it's a Tree we render another RecursiveList from this tree.

Typescript Playground Link