用另一个泛型接口初始化一个泛型类型对象答案

【问题标题】：Initialize a generic type object with another generic interface用另一个泛型接口初始化一个泛型类型对象
【发布时间】：2020-12-05 12:59:22
【问题描述】：

我要为 React 上下文提供类型安全。

我有这样的界面

interface Form<T> {
  inputTracker: (val: { name: string; value: T }) => void;
  errorTracker: (val: { name: string }) => boolean;
}

这是 Context 的接口。我将它保留为通用的，这样无论我在哪里使用它，我都可以为表单输入自定义类型。

现在我想用这个接口初始化一个上下文，但我很难。

export const FormContext: Form<T> = createContext<Form<T>>({
  inputTracker: (val) => {},
  errorTracker: (val) => true,
});

我似乎找不到将另一个泛型变量赋予 FormContext 类型的方法，以便我可以传递给 Form。我需要这种类型的界面，因为我想在很多这样的地方使用这种上下文。

const {inputTracker} = useContext<CustomType>(FormContext);

感谢您的帮助。

【问题讨论】：

用useContext<Form<T>>(FormContext怎么样，然后声明createContext<Form<any>>是不是工作错了？

标签： javascript reactjs typescript

【解决方案1】：

不确定我是否完全理解您的要求。这是你要找的吗？

CodeSandbox link

import React from "react";

interface Form<T> {
  inputTracker: (val: { name: string; value: T }) => void;
  errorTracker: (val: { name: string }) => boolean;
}

export const FormContext = React.createContext<Form<number>>({
  inputTracker: (value: { name: string; value: number }) => {},
  errorTracker: (value: { name: string }) => true
});

const App: React.FC = () => {

  const formContext = React.useContext(FormContext);
  const { inputTracker, errorTracker } = formContext;

  return <div>App</div>;
};

export default App;

【讨论】：