Reactjs 将React/Relay项目转换为TypeScript—；类型导入时分析错误

我不熟悉TypeScript，正在尝试转换React/Relay项目，我对导入类型时出现的解析错误感到困惑

这是一个

Environment.ts

文件，它是直接从中继Todo示例中复制的

中继示例使用流和.js扩展

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

以下是使用两种类型导入的fetchQuery，仅供参考：

async function fetchQuery(
  operation: RequestNode, // here
  variables: Variables, // and here
): 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) => {
      return response.json();
    })
    .catch((err) => console.log('ERR', err));
}

异步函数fetchQuery( 操作：RequestNode，//此处 变量：变量，//和这里 )：承诺{ 让标题； 让token=localStorage.getItem（'WUDDIT_JWT'）； 如果（令牌）{ 标题={ “内容类型”：“应用程序/json”， 授权：令牌？`Bearer${token}`:'Bearer'， }; }否则{ 标题={ “内容类型”：“应用程序/json”， }; } 返回fetch（“/graphql”{ 方法：“POST”， 标题：标题， 正文：JSON.stringify({ 查询：operation.text， 变量， }), }) 。然后（（响应）=>{ 返回response.json（）； }) .catch（（err）=>console.log（'err'，err））； }

---

Typescript对于仅类型导入具有不同的语法：

您可以删除该类型：

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

或在单独的导入语句中使用导入类型：

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

---

当您只需要某些模块中的类型时，仅类型导入对于消除死代码非常有用。在这种情况下，仅使用类型导入没有多大好处。

Typescript最终将代码编译为javascript并删除所有类型，只需像另一个常量和函数一样导入所有类型和接口。非常感谢善良的编码器。