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

Question

I'm new to TypeScript and trying to convert a React/Relay project and I'm puzzled by a parsing error on a type import.

This is in an Environment.ts file and it's pretty copied directly from the Relay Todo example.

The Relay example uses Flow and .js extension.

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

For reference, here's the fetchQuery that uses the two type imports:

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 compiles your code to javascript at the end and removes all types, just import all types and interfaces like another constant and function. — b3hr4d
– b3hr4d, Commented Dec 19, 2020 at 8:37

lorefnon · Accepted Answer · 2020-12-19 08:43:10Z

1

Typescript has a different syntax for type-only imports:

You can either remove the type:

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

Or use import type in a separate import statement:

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

Type only imports are useful for dead code elimination when you need only the types from some module. In this case there isn't much benefit of using type only imports.

edited Dec 19, 2020 at 8:43

answered Dec 19, 2020 at 8:33

lorefnon

13.1k8 gold badges66 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related