Как передать тип React Context Consumer в Typescript - PullRequest
Новая
       7

Как передать тип React Context Consumer в Typescript

0 голосов
/ 30 марта 2020

Я хочу создать контекст реагирования и передать свойства state и setState useState Подключиться к потребителю.

У меня есть типы Step и Context: 

type Step = {
  step: string;
};

type Context = {
  step: Step;
  setStep: Dispatch<SetStateAction<Step>>;
};

Я создаю контекст: 

export const StepContext = createContext<Context | undefined>(undefined);

Я создаю StepProvider и ловушку: 

const StepProvider = ({ children }: { children: ReactNode }) => {
  const [step, setStep] = useState<Step>({ step: 'one' });
  return <StepContext.Provider value={{ step, setStep }}>{children}</StepContext.Provider>;
};

Я создаю StepConsumer: 

const StepConsumer = () => {
  const { step, setStep } = useContext(StepContext);
  return <div>{...}</div>;
};

Но в: 

const { step } = useContext(StepContext)

step и setStep возвращают следующую ошибку TS2339: Property 'step' does not exist on type 'Context | undefined'

enter image description here

Не правильно ли я передаю типы?

Спасибо

1 Ответ

0 голосов
/ 30 марта 2020

Ваш синтаксис правильный, но использование контекста недостаточно тщательно, чтобы гарантировать, что при деконструкции значение не равно undefined.

Сама ошибка проверяется параметром компилятора strictNullChecks, ваш код будет работать в своем текущем состоянии, если в вашем tsconfig установлено strictNullChecks: false.

Однако, чтобы сохранить эту опцию включенной, вам нужно будет убедиться, что значение контекста не равно undefined, прежде чем деконструировать или использовать StepContext значений, Typescript не позволит вам получить к нему доступ без предварительной проверки.

Если вы измените деконструкцию на простое присвоение, а затем убедитесь, что контекст не undefined, ошибка исчезнет go. 

const stepContext = React.useContext(StepContext);

if (typeof stepContext !== "undefined") {
  stepContext.setStep("foo")
}

// simplified
if (stepContext) {
  stepContext.setStep("foo")
}

// simplified further
stepContext?.setStep("foo");

Кроме того, с помощью strictNullChecks: false вы также можете определять тип контекста без значения типа undefined. 

export const StepContext = createContext<Context>(undefined);
...