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

Question

我是 TypeScript 的新手，正在尝试转换 React/Relay 项目，我对 [= =21=]类型导入时出现解析错误。

这是一个 Environment.ts 文件，它是直接从 Relay Todo 示例.

复制而来的

中继示例 使用 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));
}

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

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

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

Converting React / Relay project to TypeScript — Parsing error on type import

relay

typescript

reactjs