TypeScript：基于描述任意字段及其所需类型的泛型类型的记录样式类型

Question

I'm trying to express my types so that when I call my code like so:

type Topics = {
  documentList: Document[];
};

const TopicsContainer = useTopicsContainer<Topics>(['documentList']);

the array passed in as argument to useTopicsContainer is constrained to the fields defined in Topics . An example implementation of useTopicsContainer could be as follows:

const useTopicsContainer = <TopicsTypes>(
  topics: (keyof TopicsTypes)[]
): TopicsState<TopicsTypes> => {
  const initialState: TopicsState<TopicsTypes> = {};
  const [topicsState, setTopicsState] = useState<TopicsState<TopicsTypes>>(
    initialState
  );

  // some code mutating the state by calling setTopicsState, like e.g.
  setInterval(
    () =>
      setTopicsState(
        Object.fromEntries(
          topics.map((topic) => [topic, createRandomDocument()])
        )
      ),
    1000
  );

  return topicsState;
};

I'd like to derive the TopicsState type from the generic TopicsTypes . So far I've tried:

type TopicsState<TopicTypes> = Record<
  keyof TopicTypes,
  TopicTypes[keyof TopicTypes]
>;

but that yields a TS2322: Type '{}' is not assignable to type 'TopicsState '. for const initialState: TopicsState<TopicsTypes> = {};

Another attempt:

interface TopicsState<TopicTypes> {
  [topic: keyof TopicTypes]: TopicTypes[keyof TopicTypes];
}

…but that results in TS1023: An index signature parameter type must be either 'string' or 'number'. for the topic key. I'm running out of ideas… if you'd like to give this one a go, below is a sandbox with all of the above code cobbled together. Thanks!

Edit

As suggested by Alex Wayne , adding Partial to TopicsState allows an empty object literal to be a TopicsState . I've updated the CodeSandbox example with that. The only remaining issue is that now I cannot assign a value to a field in topicsState , getting Type '{ [k: string]: Document; }' is not assignable to type 'Partial<Record<keyof TopicsTypes, TopicsTypes[keyof TopicsTypes]>>'.ts(2345) Type '{ [k: string]: Document; }' is not assignable to type 'Partial<Record<keyof TopicsTypes, TopicsTypes[keyof TopicsTypes]>>'.ts(2345) . On the bright side, the type checks on the consumer side in App.tsx work exactly as expected:

const TopicsContainer = useTopicsContainer<Topics>(["documentList"]);
const documentList: Document[] = TopicsContainer.documentList || [];

If I change documentList: Document[] to documentList: string , I get the desired Type 'Document[]' is not assignable to type 'string'.ts(2322) . Is there a way to relax the constraint in the implementation of useTopicsContainer ?

Answer 1

The type I was after goes as follows:

type ValueOf<T> = T[keyof T];
type TopicsState<TopicTypes> = Partial<
  Record<keyof TopicTypes, ValueOf<TopicTypes>>
>;

with it, I can now use it like so:

type Topics = {
  documentList: Document[];
};
const TopicsContainer = useTopicsContainer<Topics>(["documentList"]);
const documentList: Document[] = TopicsContainer.documentList || [];

This way, TopicsContainer knows that under the key of "documentList" the type is Document[] .

For a full example checkout the sandbox:

For posterity:

// useTopicsContainer.ts
import { useEffect, useState } from "react";
import io from "socket.io-client";

type ValueOf<T> = T[keyof T];
type TopicsState<TopicTypes> = Partial<
  Record<keyof TopicTypes, ValueOf<TopicTypes>>
>;
type KeysOfTopicsState<TopicTypes> = Extract<keyof TopicTypes, string>[];

const client = io("/topics");

const useTopicsContainer = <TopicsTypes>(
  topics: KeysOfTopicsState<TopicsTypes>
): TopicsState<TopicsTypes> => {
  const initialState: TopicsState<TopicsTypes> = {};
  const [topicsState, setTopicsState] = useState<TopicsState<TopicsTypes>>(
    initialState
  );

  // some code mutating the state by calling setTopicsState, like e.g.
  useEffect(() => {
    const topicListeners = Object.fromEntries(
      topics.map((topic) => [
        topic,
        (topicData: ValueOf<TopicsTypes>) => {
          setTopicsState((oldState) => ({
            ...oldState,
            [topic]: topicData
          }));
        }
      ])
    );

    topics.forEach((topic) => {
      client.on(topic as string, topicListeners[topic]);
    });

    return () => {
      topics.forEach((topic) => {
        client.off(topic, topicListeners[topic]);
      });
    };
  });

  return topicsState;
};

export default useTopicsContainer;

// App.tsx
import React from "react";
import useTopicsContainer from "./useTopicsContainer";

type Topics = {
  documentList: Document[];
};

export default function App() {
  const TopicsContainer = useTopicsContainer<Topics>(["documentList"]);
  const documentList: Document[] = TopicsContainer.documentList || [];

  console.log({ documentList });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Thanks to Alex Wayne and jcalz for the suggestions, rubber ducking and keeping my examples straight!