用于动态反应上下文的 TypeScript 类型

Question

我正在创建一个新的上下文 export const SchemaContext = React.createContext(null);

上下文对象创建到组件中，该组件将成为上下文的一部分。

type TSchemaProps<M = {}}> = {
  model: M
};


export const Schema = <M,>({
  model: globalModel
}: TSchemaProps<M>) => {
  const [model] = useState<M>(globalModel);

  const context = {
    model,
    isRoot: true
  };

  return (
    <SchemaContext.Provider value={context}> // Type { model: M } is not assignable to null
      {children}
    </SchemaContext.Provider>
  );
};

现在我们可以使用 JSX 泛型来打字了

type TModel = {
    docNum: number,
    docDate: number,
    group: {
        kpp: string,
        orgn: string
    }
};

const MainComp = () => {
  <Schema<TModel> />
}

如何将 TModel 传递给上下文类型？

Answer 1

您可以在生成上下文时将generic 传递给createContext 以定义其值的类型。

type TModel = {
    docNum: number,
    docDate: number,
    group: {
        kpp: string,
        orgn: string
    }
};

...

export const MyContext = createContext<TModel | SomeOtherType>(defaultValues);