用另一個泛型接口初始化泛型類型 object

Question

我要為 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);

感謝您的幫助。

Answer 1

不知道我完全理解你在問什么。 這是你想要的？

代碼沙盒鏈接

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;