使用TypeScript创建Context Provider时出现Parsing error: Expression expected的原因及所需TypeScript版本解析

首先，咱们直接揪出这个错误的核心根源——你在创建Context默认值的代码里犯了一个明确的语法错误：

在createContext的对象字面量中，你写了getResults?: async () => void，这完全不符合JavaScript/TypeScript的对象语法规则：

• ?:是用来在接口/类型定义里标记属性为可选的，不能在对象字面量里用来定义属性值；
• 这里你需要的是提供一个实际的函数实现（或者因为接口里getResults是可选的，直接省略这个属性），而不是写类型注解。

修复后的代码 #

你可以选择两种方式修复：

方式1：提供一个空的异步函数实现

const StateContext = createContext<ContextParametersType>({
  greenValue: { greenStatus: new Set<EnumType>(), setGreenStatus: () => { } },
  redValue: { redStatus: new Set<EnumType>(), setRedStatus: () => { } },
  searchValue: { searchTerm: '', setSearchTerm: () => { } },
  // 提供符合类型要求的空实现
  getResults: async () => {}
})

方式2：直接省略可选属性

因为你的ContextParametersType接口里getResults是可选的（带?），所以默认值里可以完全不写这个属性：

const StateContext = createContext<ContextParametersType>({
  greenValue: { greenStatus: new Set<EnumType>(), setGreenStatus: () => { } },
  redValue: { redStatus: new Set<EnumType>(), setRedStatus: () => { } },
  searchValue: { searchTerm: '', setSearchTerm: () => { } }
})

关于TypeScript版本的问题 #

这个错误和你使用的TypeScript 4.8.4完全无关，纯粹是语法使用错误。不管你升级到哪个版本的TypeScript，这种不符合语法规则的代码都会报错。

额外的小建议 #

你的getResults函数里动态require('axios')的写法不太规范，建议改成顶部静态导入，这样更符合TypeScript的最佳实践：

import axios from 'axios';

// ...

const getResults = async () => {
  const options = {
    method: 'GET',
    url: 'https://google-search72.p.rapidapi.com/search',
    params: {query: 'rapidapi', gl: 'us', lr: 'en', num: '10', start: '1'},
    headers: {
      'X-RapidAPI-Key': 'SIGN-UP-FOR-KEY',
      'X-RapidAPI-Host': 'google-search72.p.rapidapi.com'
    }
  };
  try {
    const response = await axios.request(options);
    console.log(response.data);
    // 这里可以把获取到的数据设置到results状态里，比如setResults(...)
  } catch (error) {
    console.error(error);
  }
};

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