React.Context 将 JS 重写为 TS 会导致奇怪的错误

Question

我有完美的工作和简单的 React JS 上下文，如下所示。真的，再简单不过了。

import * as React from 'react';

export const SelectedCurrenciesContext = React.createContext();

const SelectedCurrenciesContextProvider = ({ children }) => {
    const [currencyBase, setCurrencyBase] = React.useState(null);
    const [currencyCrypto, setCurrencyCrypto] = React.useState(null);

    return (
        <SelectedCurrenciesContext.Provider
            value={{
                currencyBase: currencyBase,
                currencyCrypto: currencyCrypto,
                setCurrencyBase: data => setCurrencyBase(data),
                setCurrencyCrypto: data => setCurrencyCrypto(data),
            }}
        >
            {children}
        </SelectedCurrenciesContext.Provider>
    );
};

export default SelectedCurrenciesContextProvider;

现在尝试在 Typescript 中使用相同的内容，问题开始了。

import * as React from 'react';
import { baseCurrencyType } from '../types';

type ContextType = {
    currencyBase?: baseCurrencyType | null;
    currencyCrypto?: string | null;
    setCurrencyBase?: (currencyBase: baseCurrencyType) => void;
    updateTodo?: (currencyCrypto: string) => void;
};

interface ContextTypeInterface {
    currencyBase?: baseCurrencyType | null;
    currencyCrypto?: string | null;
    setCurrencyBase?: (currencyBase: baseCurrencyType) => void;
    updateTodo?: (currencyCrypto: string) => void;
}

const InitialState = {
    currencyBase: null,
    currencyCrypto: null,
};
export const SelectedCurrenciesContext = React.createContext<ContextType | null>(null);

const SelectedCurrenciesContextProvider:React.FC = ({ children }) => {
    const [currencyBase, setCurrencyBase] = React.useState<baseCurrencyType | null>(null);
    const [currencyCrypto, setCurrencyCrypto] = React.useState<string | null>(null);

    return (
        <SelectedCurrenciesContext.Provider
            value={{
                currencyBase: InitialState.currencyBase,
                currencyCrypto: InitialState.currencyCrypto,
                setCurrencyBase: data => setCurrencyBase(data),
                setCurrencyCrypto: data => setCurrencyCrypto(data),
            }}
        >
            {children}
        </SelectedCurrenciesContext.Provider>
    );
};

export default SelectedCurrenciesContextProvider;

它基本上抛出两个错误（技术上更多，但猜测其余的是这两个错误。第一个错误在

    <SelectedCurrenciesContext.Provider

行，上面写着

Cannot find namespace 'SelectedCurrenciesContext'

第二个在

const SelectedCurrenciesContextProvider = ({ children }) => {

它说（第一个的可能结果是什么）

children is declared but its value is never read

我尝试过使用或不使用 defaultState（没有成功，似乎这是必须的），defaultState 为 null，并且传递状态项与上面不同，但仅作为

const [currencyBase, setCurrencyBase] = React.useState<baseCurrencyType | null>(null);

然而，无论我怎么做，错误都不会消失。有人可以帮助我吗？

Answer 1

为您的提供商添加显式类型：

const SelectedCurrenciesContextProvider: React.FC = ({ children }) => {}

Answer 2


import React, { createContext, useState } from "react";

interface SelectedCurrenciesContextProps {
    currencyBase?: baseCurrencyType;
    currencyCrypto?: string;
    setCurrencyBase: (currencyBase: baseCurrencyType) => void;
    setCurrencyCrypto: (currencyCrypto: string) => void;
}
const SelectedCurrenciesContext =  createContext<SelectedCurrenciesContextProps>({} as SelectedCurrenciesContextProps);

function SelectedCurrenciesContextProvider ({ children }: { children: React.ReactNode }) {
    const [currencyBase, setCurrencyBase] = useState<baseCurrencyType | undefined>(undefined);
    const [currencyCrypto, setCurrencyCrypto] = useState<string | undefined>(undefined);

// Same names will be recognized, no need to do currencyBase:currencyBase

    return (
        <SelectedCurrenciesContext.Provider
            value={{
                currencyBase,
                currencyCrypto,
                setCurrencyBase,
                setCurrencyCrypto,
            }}
        >
            {children}
        </SelectedCurrenciesContext.Provider>
    );
}

export {
 SelectedCurrenciesContextProps,
 SelectedCurrenciesContext,
 SelectedCurrenciesContextProvider
};

React.Context 将 JS 重写为 TS 会导致奇怪的错误

Rewriting JS to TS leads to weird errors when it comes to React.Context

reactjs

react-context