Javascript React createContext和useContext的类型脚本

我有一个带有状态提供程序的React上下文文件来管理cookie首选项。这一切都像预期的那样工作，但我对Typescript有一个问题。我的文件如下所示：

import Cookies from 'js-cookie';
import React, { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode | ReactNode[];
  functionalCookiesOn: boolean;
  performanceCookiesOn: boolean;
};

interface State {
  functionalCookiesOn: boolean;
  performanceCookiesOn: boolean;
};

// Initialise context storage
const CookiesContext = React.createContext({});
const { Consumer: CookiesConsumer } = CookiesContext;

class CookiesProvider extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.props;

    this.state = {
      functionalCookiesOn,
      performanceCookiesOn,
    };
  }

  componentDidUpdate(_prevProps: Props, prevState: State) {
    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.state;

    // Set cookie to store functional cookies setting
    if (functionalCookiesOn !== prevState.functionalCookiesOn) {
      Cookies.set('functionalCookiesOn', functionalCookiesOn.toString());
    }

    // Set cookie to store performance cookies setting
    if (performanceCookiesOn !== prevState.performanceCookiesOn) {
      Cookies.set('performanceCookiesOn', performanceCookiesOn.toString());
    }
  }

  toggleAllCookies = () => {
    // Store reversed state for functional and performance cookies
    this.setState((prevState: State) => ({
      functionalCookiesOn: !prevState.functionalCookiesOn,
      performanceCookiesOn: !prevState.performanceCookiesOn,
    }));
  }

  render() {
    const { children } = this.props;

    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.state;

    const value = {
      functionalCookiesOn,
      performanceCookiesOn,
      toggleAllCookies: this.toggleAllCookies,
    };

    return (
      <CookiesContext.Provider value={value}>
        {children}
      </CookiesContext.Provider>
    );
  }
}

export default CookiesContext;
export { CookiesConsumer, CookiesProvider };

const AnotherComponent = () => {
  const {
    functionalCookiesOn,
    performanceCookiesOn,
    toggleAllCookies,
  } = useContext(CookiesContext);

  return (
    ...
  );
}

这会引发以下错误：

Property 'functionalCookiesOn' does not exist on type '{}'.

在我看来，这与原始文件中的以下行有关：

const CookiesContext = React.createContext({});

因为我用一个空对象初始化上下文（因为在那个阶段它没有值）

---

初始化或应用类型以避免此错误的正确方法是什么？

我认为您可以为调用

createContext

const CookiesContext = React.createContext<Partial<Props>>({});

constCookiesContext=React.createContext（{}）；

允许您创建没有默认值的上下文

试试这个-

import Cookies from 'js-cookie';
import React, { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode | ReactNode[];
  functionalCookiesOn: boolean;
  performanceCookiesOn: boolean;
};

interface State {
  functionalCookiesOn: boolean;
  performanceCookiesOn: boolean;
};

// Initialise context storage
const CookiesContext = React.createContext({
    functionalCookiesOn: false,
    performanceCookiesOn: false,
    toggleAllCookies: () => null
});
const { Consumer: CookiesConsumer } = CookiesContext;

class CookiesProvider extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.props;

    this.state = {
      functionalCookiesOn,
      performanceCookiesOn,
    };
  }

  componentDidUpdate(_prevProps: Props, prevState: State) {
    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.state;

    // Set cookie to store functional cookies setting
    if (functionalCookiesOn !== prevState.functionalCookiesOn) {
      Cookies.set('functionalCookiesOn', functionalCookiesOn.toString());
    }

    // Set cookie to store performance cookies setting
    if (performanceCookiesOn !== prevState.performanceCookiesOn) {
      Cookies.set('performanceCookiesOn', performanceCookiesOn.toString());
    }
  }

  toggleAllCookies = () => {
    // Store reversed state for functional and performance cookies
    this.setState((prevState: State) => ({
      functionalCookiesOn: !prevState.functionalCookiesOn,
      performanceCookiesOn: !prevState.performanceCookiesOn,
    }));
  }

  render() {
    const { children } = this.props;

    const {
      functionalCookiesOn,
      performanceCookiesOn,
    } = this.state;

    const value = {
      functionalCookiesOn,
      performanceCookiesOn,
      toggleAllCookies: this.toggleAllCookies,
    };

    return (
      <CookiesContext.Provider value={value}>
        {children}
      </CookiesContext.Provider>
    );
  }
}

export default CookiesContext;
export { CookiesConsumer, CookiesProvider };

从“js cookie”导入cookie；
从“React”导入React，{Component，ReactNode}；
界面道具{
子项：ReactNode | ReactNode[]；
布尔函数；
performanceCookiesOn：布尔值；
};
界面状态{
布尔函数；
performanceCookiesOn：布尔值；
};
//初始化上下文存储
const CookiesContext=React.createContext({
功能检查：错误，
考克森：错，
toggleAllCookies:（）=>null
});
const{Consumer:CookiesConsumer}=CookiesContext；
类提供程序扩展组件{
建造师（道具：道具）{
超级（道具）；
常数{
功能性Okieson，
性能考克森，
}=这是道具；
此.state={
功能性Okieson，
性能考克森，
};
}
componentDidUpdate（_-prevProps:Props，prevState:State）{
常数{
功能性Okieson，
性能考克森，
}=本州；
//设置cookie以存储功能cookie设置
if（functionalCookiesOn！==prevState.functionalCookiesOn）{
set（'functionalCookiesOn'，functionalCookiesOn.toString（））；
}
//设置cookie以存储性能cookie设置
if（performanceCookiesOn！==prevState.performanceCookiesOn）{
set（'performancecokieson'，performancecokieson.toString（））；
}
}
toggleAllCookies=（）=>{
//存储功能和性能cookie的反向状态
this.setState（（prevState:State）=>({
functionalCookiesOn:！prevState.functionalCookiesOn，
performanceCookiesOn:！prevState.performanceCookiesOn，
}));
}
render（）{
const{children}=this.props；
常数{
功能性Okieson，
性能考克森，
}=本州；
常量值={
功能性Okieson，
性能考克森，
toggleAllCookies:this.toggleAllCookies，
};
返回(
{儿童}
);
}
}
导出默认上下文；
出口{CookiesConsumer，CookiesProvider}；

---

这应该可以做到，typescript将启动intellisense。

是的，您需要提供初始值。否则，typescript将正确抛出错误。我认为这就差不多了，尽管我不认为道具或状态接口是正确的，因为我还将

toggleAllCookies

方法传递给了提供者。我应该为此创建一个新的界面吗？这个页面是一个很好的指南：啊，是的，很完美，他们的例子为它创建了一个新的界面。太好了，谢谢！