如何正确键入React上下文提供程序

Question

我觉得我做的都错了。Typescript试图告诉我要做什么？我在这里玩变态游戏

TypeScript error in /Users/alex-wilmer/Projects/resideo/pro-portal/packages/web/src/utils/feature-flags/index.tsx(46,9):
Type 'Dispatch<SetStateAction<{ OCT19_DEMO: undefined; }>>' is not assignable to type '() => void'.  TS2322

    44 |       value={{
    45 |         flags,
  > 46 |         setFlags,
       |         ^
    47 |       }}>
    48 |       {children}
    49 |     </FeatureFlagsContext.Provider>

import React, {
  createContext,
  useContext,
  FC,
  useState,
  Dispatch,
  SetStateAction,
} from 'react';

type Flags = {
  OCT19_DEMO: string | undefined;
};

type UseFeatureFlagsValue = {
  flags: Flags;
  setFlags: Dispatch<SetStateAction<{}>>;
};

export const FeatureFlagsContext = createContext({
  flags: { OCT19_DEMO: undefined },
  setFlags: () => {},
});

export const FEATURE_FLAG_PREFIX = 'REACT_APP_FEATURE_FLAG_';

export const FeatureFlagsProvider: FC<{
  children: React.ReactNode;
}> = ({ children }): JSX.Element => {
  const [flags, setFlags] = useState(
    Object.entries(process.env).reduce(
      (acc, [key, val]) => {
        if (!key.startsWith(FEATURE_FLAG_PREFIX)) return acc;
        acc[key.replace(FEATURE_FLAG_PREFIX, '')] = val;
        return acc;
      },
      {
        OCT19_DEMO: undefined,
      }
    )
  );

  return (
    <FeatureFlagsContext.Provider
      value={{
        flags,
        setFlags,
      }}>
      {children}
    </FeatureFlagsContext.Provider>
  );
};

export const useFeatureFlags = (): UseFeatureFlagsValue =>
  useContext(FeatureFlagsContext);

Answer 1

createContext接受一个类型参数，所以传入类型UseFeatureFlagsValue可以解决这个问题：

export const FeatureFlagsContext = createContext<UseFeatureFlagsValue>({
  flags: { OCT19_DEMO: undefined },
  setFlags: () => {},
});

您是否需要在此处使用默认值？大多数情况下，在创建上下文时，您不应该需要传递默认值(理想情况下，您的使用者应该在可以提供有用内容的提供者中呈现)。

React docs:

仅当组件在树中的上方没有匹配的提供程序时，才使用defaultValue参数。这对于在不包装组件的情况下隔离测试组件非常有用。注意:将undefined作为Provider值传递不会导致使用组件使用defaultValue。

如果不需要使用默认值，则可以使用Non-Null assertion operator通过undefined创建上下文

export const FeatureFlagsContext = createContext<UseFeatureFlagsValue>(undefined!);