将React/Relay项目转为TypeScript时遇类型导入解析错误

我刚帮不少开发者解决过Relay转TypeScript的类似问题，你的错误其实是因为把Flow的类型导入语法直接搬到TypeScript里了，两者在类型导入的写法上规则不一样～

错误原因 #

在Flow中，我们用type关键字在导入语句里标记要导入的是类型，但TypeScript不支持这种写法，这就是你看到“预期有','”解析错误的原因。

两种解决方案 #

方案1：使用TypeScript的import type语法（推荐）

从TypeScript 3.8开始，官方推荐用import type来明确导入类型，这样TS可以更好地优化类型导出，也能和值导入清晰区分开：

// Environment.ts
import type { RequestNode, Variables } from 'relay-runtime';
import { Environment, Network, RecordSource, Store, Observable } from 'relay-runtime';

方案2：直接导入类型（无需额外关键字）

如果你用的是较新版本的TypeScript，也可以直接把类型和值放在同一条导入语句里，TS会自动识别哪些是类型：

// Environment.ts
import { Environment, Network, RecordSource, Store, Observable, RequestNode, Variables } from 'relay-runtime';

修改后的完整代码示例 #

// Environment.ts
import type { RequestNode, Variables } from 'relay-runtime';
import { Environment, Network, RecordSource, Store, Observable } from 'relay-runtime';

async function fetchQuery(
  operation: RequestNode,
  variables: Variables,
): Promise<{}> {
  let headers;
  let token = localStorage.getItem('WUDDIT_JWT');
  if (token) {
    headers = {
      'Content-Type': 'application/json',
      Authorization: token ? `Bearer ${token}` : 'bearer',
    };
  } else {
    headers = {
      'Content-Type': 'application/json',
    };
  }
  return fetch('/graphql', {
    method: 'POST',
    headers: headers,
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  })
    .then((response) => response.json())
    .catch((err) => console.log('ERR', err));
}

额外注意事项 #

确保你的tsconfig.json里的相关配置正确，比如：

• moduleResolution设置为Node16、NodeNext或者Classic（这些都支持类型导入语法）
• 开启strict模式（推荐，能帮你提前发现更多类型问题）

这样修改后，类型导入的解析错误应该就消失了，fetchQuery里的类型也能正常使用啦～

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