React Context API的TypeScript配置：解决app.tsx中Context值的类型错误

别用any凑活啦，这确实不够规范，咱们用TypeScript的类型系统好好解决这个问题。核心思路是先明确Context的类型结构，再给createContext指定对应类型并提供符合要求的初始值，既能保证类型安全，又能彻底解决类型报错。

步骤1：定义Context的类型接口 #

首先，咱们把Context里的value结构用TypeScript接口明确下来，让TypeScript清楚知道这个Context包含哪些属性、每个属性的类型是什么：

// 定义GlobalContext的类型接口
interface GlobalContextType {
  checkCrypto: any[]; // 如果你知道checkCrypto存的具体类型（比如加密货币名称数组string[]），替换成更具体的类型会更严谨
  setCheckCrypto: React.Dispatch<React.SetStateAction<any[]>>;
  start: boolean;
  setStart: React.Dispatch<React.SetStateAction<boolean>>;
}

这里简单解释下：

• checkCrypto是你的状态数组，当前用any[]是因为不清楚你存的具体内容，要是存的是字符串就改成string[]，存对象就定义对应的对象类型；
• setCheckCrypto和setStart是useState返回的状态更新函数，它们的类型是React内置的React.Dispatch<React.SetStateAction<对应状态类型>>，用来描述状态更新函数的标准类型。

步骤2：创建符合类型要求的Context #

接下来创建Context时，指定刚才定义的GlobalContextType作为泛型参数，并且提供一个符合这个类型的初始值（而不是原来的null）：

import React, { createContext, useState } from "react";
import SelectPage from "./pages/select/select";
import ResultPage from "./pages/result/result";
import { Route, Routes } from "react-router-dom";

// 第一步：定义类型接口
interface GlobalContextType {
  checkCrypto: any[];
  setCheckCrypto: React.Dispatch<React.SetStateAction<any[]>>;
  start: boolean;
  setStart: React.Dispatch<React.SetStateAction<boolean>>;
}

// 第二步：创建Context并指定类型，提供符合类型的初始值
export const GlobalContext = createContext<GlobalContextType>({
  checkCrypto: [],
  setCheckCrypto: () => {}, // 初始空函数，实际会被App组件里的真实setter覆盖
  start: false,
  setStart: () => {},
});

function App() {
  const [checkCrypto, setCheckCrypto] = useState([]);
  const [start, setStart] = useState(false);
  
  const value = {
    checkCrypto,
    setCheckCrypto,
    start,
    setStart,
  };
  
  return (
    <>
      <GlobalContext.Provider value={value}>
        <Routes>
          <Route path="/" element={<SelectPage />} />
          <Route path="/result" element={<ResultPage />} />
        </Routes>
      </GlobalContext.Provider>
    </>
  );
}

export default App;

额外方案：允许Context为null（需加非空判断） #

如果你不想用空函数当初始setter，也可以把Context类型设为GlobalContextType | null，但消费Context时必须加非空判断，避免类型报错：

// 创建允许为null的Context
export const GlobalContext = createContext<GlobalContextType | null>(null);

// 在组件里消费Context时
const context = useContext(GlobalContext);
if (!context) {
  throw new Error("必须在GlobalContext.Provider内部使用该Context");
}
// 之后就能安全使用context.checkCrypto等属性了

这种方式也能解决问题，但需要额外的非空校验，不如直接提供符合类型的初始值来得省心。

内容的提问来源于stack exchange，提问作者sangki