将 React / Relay 项目转换为 TypeScript — 类型导入时解析错误答案

【问题标题】：Converting React / Relay project to TypeScript — Parsing error on type import将 React / Relay 项目转换为 TypeScript — 类型导入时解析错误
【发布时间】：2021-03-29 18:05:01
【问题描述】：

我是 TypeScript 的新手，正在尝试转换 React/Relay 项目，但我对一个 解析错误 感到困惑输入导入。

这是在一个Environment.ts 文件中，它是直接从Relay Todo 示例复制而来的。

Relay 示例使用 Flow 和 .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));
}

【问题讨论】：

Typescript 在最后将你的代码编译成 javascript 并删除所有类型，只需像另一个常量和函数一样导入所有类型和接口。

标签： reactjs typescript relay

【解决方案1】：

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';

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

【讨论】：