Преобразование проекта 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.info('ERR', err));
}

Typescript компилирует ваш код в javascript в конце и удаляет все типы, просто импортирует все типы и интерфейсы, такие как еще одна константа и функция.

b3hr4d 19.12.2020 09:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
138
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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';

Импорт только типов полезен для устранения мертвого кода, когда вам нужны только типы из какого-то модуля. В этом случае нет большой выгоды от использования импорта только типа.

Другие вопросы по теме