使用yarn start启动项目遇TypeScript类型不兼容错误求助

问题描述 #

克隆GitHub项目后执行yarn start编译失败，出现以下TypeScript错误：

TypeScript error in /Users/myname/Documents/Projects/BC/pancakeswap_fork/pancake_clone/pancake-swap-exchange-testnet-master/src/components/Popups/PopupItem.tsx(69,28):
Argument of type 'import("/Users/myname/Documents/Projects/BC/pancakeswap_fork/pancake_clone/pancake-swap-exchange-testnet-master/node_modules/@types/react-redux/node_modules/@types/react/index").Context<import("/Users/myname/Documents/Projects/BC/pancakeswap_fork/pancake_clone/pancake-swap-exchange-testnet-master/node_module...' is not assignable to parameter of type 'React.Context<import("/Users/myname/Documents/Projects/BC/pancakeswap_fork/pancake_clone/pancake-swap-exchange-testnet-master/node_modules/@types/styled-components/index").DefaultTheme>'.  TS2345

    67 |   }, [removeAfterMs, removeThisPopup])
    68 | 
  > 69 |   const theme = useContext(ThemeContext)
       |                            ^
    70 | 
    71 |   let popupContent
    72 |   if ('txn' in content) {

项目中theme的使用示例：

return (
  <Popup>
    <StyledClose color={theme.colors.textSubtle} onClick={removeThisPopup} />
    {popupContent}
    {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
  </Popup>

作为TypeScript新手，已了解ThemeContext相关方案但不知道如何落地，以下是具体解决步骤：

解决步骤 #

1. 正确定义ThemeContext与主题类型 #

首先找到项目中ThemeContext的定义文件（通常是theme.ts、ThemeContext.tsx），确保它的类型和styled-components的DefaultTheme完全匹配。如果项目没有正确定义，按以下方式创建：

// src/theme.ts
import { DefaultTheme } from 'styled-components';
import { createContext, useContext } from 'react';

// 定义主题结构，要和项目中用到的theme属性对应（比如colors.textSubtle）
export const appTheme: DefaultTheme = {
  colors: {
    textSubtle: '#888888', // 替换成项目实际的颜色值
    // 补充其他项目用到的颜色属性
  },
  // 可添加其他主题配置，比如字体、间距等
};

// 创建Context，指定类型为DefaultTheme
export const ThemeContext = createContext<DefaultTheme>(appTheme);

// 封装自定义Hook，简化调用
export const useTheme = () => useContext(ThemeContext);

2. 在根组件中注入ThemeContext #

找到项目根组件（比如App.tsx或index.tsx），用ThemeContext.Provider包裹整个应用，让子组件能获取到主题：

// src/App.tsx
import { ThemeContext, appTheme } from './theme';

function App() {
  return (
    <ThemeContext.Provider value={appTheme}>
      {/* 这里放你的应用所有子组件 */}
    </ThemeContext.Provider>
  );
}

export default App;

3. 在PopupItem.tsx中正确引入并使用 #

修改PopupItem.tsx中的代码，导入我们定义的ThemeContext（或自定义Hook）：

// src/components/Popups/PopupItem.tsx
// 导入正确的ThemeContext，路径根据实际文件位置调整
import { ThemeContext } from '../../theme';
// 或者用自定义Hook：import { useTheme } from '../../theme';

// ...其他代码

// 使用useContext获取主题
const theme = useContext(ThemeContext);
// 或者用自定义Hook：const theme = useTheme();

// 后续使用theme的代码保持不变

4. 修复依赖版本冲突（若有） #

如果错误是因为@types/react版本不一致导致（错误提示中提到了@types/react-redux/node_modules/@types/react），执行以下操作：

• 运行yarn add @types/react@latest --dev更新@types/react到最新版本
• 删除node_modules文件夹和yarn.lock文件
• 重新执行yarn install

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