时间戳

首页 > 解决方案 > 将 React / Relay 项目转换为 TypeScript — 类型导入时解析错误

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

问题描述

我是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));
}

标签： reactjstypescriptrelay

解决方案

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

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

推荐阅读