After declaring a type on Typescript 3.8+, it is possible to export it for use in

Question

After declaring a type on Typescript 3.8+, it is possible to export it for use in

After defining a type in Typescript 3.8+ and attempting to export it:

type Type = { Prop: string };
export { Type }

An error message appears in VS Code:

When using the --isolatedModules flag, re-exporting a type requires using export type

To address this, I modified the code as per the error message:

type Type = { Prop: string };
export type { Type }

However, this adjustment led to another error flagged by eslint:

Parsing error: Declaration or statement expected.

I have two questions regarding this scenario:

Why is this considered "re-exporting"?
Is this form of export supported in Typescript 3.8+ with the --isolatedModules flag enabled, as mentioned here?

typescript export

Answer 1

Answer №1

I successfully resolved the issue I was facing:

By enabling the --isolatedModuls flag, I encountered a problem where VS Code's TypeScript language service couldn't determine whether the type we were attempting to export originated in the current module or not.

A similar dilemma is discussed in a Babel Github issuehere:
To ascertain if something is a type, information about other modules is required.
```
import { T } from "./other-module";
export { T }; // Is this a type export?
```
Furthermore, a comprehensive explanation can be found on this Reddit thread:
Type space refers to TypeScript's domain containing all types relevant to your application. These types only exist during compile time and disappear once the compilation is complete, leaving no types in the resulting JavaScript. On the other hand, value space encompasses elements that persist and survive into the JS.
```
type Foo = { bar: string };
const a: Foo = { bar: 'hello' };
```
In this context, Foo resides in the type space while everything else falls under the value space.

The issue with isolatedModules arises from the inability to differentiate between type and value spaces since each file is compiled independently. When you execute:
```
export { Foo } from './bar';
```
in a file, TypeScript struggles to identify whether Foo belongs to the type space (resulting in it being discarded as it won't appear in the generated JavaScript) or the value space (thus requiring inclusion in the output).
The solution, as highlighted by the error message, involves the following process:
```
type Type = { Prop: string };
export type { Type }
```
Although this approach initially triggered an eslint error per my inquiry, the error itself turned out to be inaccurate. Despite numerous attempts, I couldn't resolve the error and ended up recreating my Typescript app, which ultimately succeeded.
For readers encountering a similar issue, ensure you adhere to the correct setup instructions:
```
// initializing a typescript app and installing necessary type declarations: @types/node @types/react @types/react-dom @types/jest
npx create-react-app hello-world --template typescript

// if working with react-redux, the installation steps are as follows:
cd hello-world
npm install --save redux @types/redux
npm install --save react-redux @types/react-redux 
```
Regarding eslint, the TypeScript-specific eslint module named @typescript-eslint should be present in the node_modules directory post executing the aforementioned steps. You can verify this by declaring an unused variable:
```
const a = 1;
```
This declaration will prompt @typescript-eslint to issue a warning:

'a' is assigned a value but is never used

P.S.

It's important to note that certain errors are still identified by regular eslint rather than @typescript-eslint. For instance, attempting to improperly export the variable a as shown below will trigger an error:
```
const a = 1;
export a; // results in an error
```
... leading to the Parsing Error originally detected by eslint.

Answer 2

I successfully resolved the issue I was facing:

By enabling the --isolatedModuls flag, I encountered a problem where VS Code's TypeScript language service couldn't determine whether the type we were attempting to export originated in the current module or not.

A similar dilemma is discussed in a Babel Github issuehere:
To ascertain if something is a type, information about other modules is required.
```
import { T } from "./other-module";
export { T }; // Is this a type export?
```
Furthermore, a comprehensive explanation can be found on this Reddit thread:
Type space refers to TypeScript's domain containing all types relevant to your application. These types only exist during compile time and disappear once the compilation is complete, leaving no types in the resulting JavaScript. On the other hand, value space encompasses elements that persist and survive into the JS.
```
type Foo = { bar: string };
const a: Foo = { bar: 'hello' };
```
In this context, Foo resides in the type space while everything else falls under the value space.

The issue with isolatedModules arises from the inability to differentiate between type and value spaces since each file is compiled independently. When you execute:
```
export { Foo } from './bar';
```
in a file, TypeScript struggles to identify whether Foo belongs to the type space (resulting in it being discarded as it won't appear in the generated JavaScript) or the value space (thus requiring inclusion in the output).
The solution, as highlighted by the error message, involves the following process:
```
type Type = { Prop: string };
export type { Type }
```
Although this approach initially triggered an eslint error per my inquiry, the error itself turned out to be inaccurate. Despite numerous attempts, I couldn't resolve the error and ended up recreating my Typescript app, which ultimately succeeded.
For readers encountering a similar issue, ensure you adhere to the correct setup instructions:
```
// initializing a typescript app and installing necessary type declarations: @types/node @types/react @types/react-dom @types/jest
npx create-react-app hello-world --template typescript

// if working with react-redux, the installation steps are as follows:
cd hello-world
npm install --save redux @types/redux
npm install --save react-redux @types/react-redux 
```
Regarding eslint, the TypeScript-specific eslint module named @typescript-eslint should be present in the node_modules directory post executing the aforementioned steps. You can verify this by declaring an unused variable:
```
const a = 1;
```
This declaration will prompt @typescript-eslint to issue a warning:

'a' is assigned a value but is never used

P.S.

It's important to note that certain errors are still identified by regular eslint rather than @typescript-eslint. For instance, attempting to improperly export the variable a as shown below will trigger an error:
```
const a = 1;
export a; // results in an error
```
... leading to the Parsing Error originally detected by eslint.

After declaring a type on Typescript 3.8+, it is possible to export it for use in

Answer №1

Similar questions

Error message: "IAngularStatic type does not have property IScope" caused by Typescript Directives

Issue with retrieving properties in Angular template due to undefined values in HTML

Data that changes dynamically on a chart

Remove any applied sorting from the table within the code

What is the best way to set up Storybook with Vue Cli 3?

Exploring Next.js 13: Enhancing Security with HTTP Cookie Authentication

An error in Typescript is indicating that a semicolon is expected. The identifier 'EventNameString' is currently being used as a value, even though it only refers to a type

Guide for Showing Data from Json Mapper in Angular 5

The value of a checkbox in Ionic 2

Using Inheritance to Create Custom Event/Callback Handlers in TypeScript

Passing properties to a component from Material UI Tab

What is the best way to retrieve TemplateRef from an Angular component?

A simple way to automatically fill an input field with a mask when clicking in Angular 2

Here's a method to extract dates from today to the next 15 days and exclude weekends -Saturday and Sunday

Can a generic type be utilized to instantiate an object?

What is the process of extracting information from a JSON file and how do I convert the Date object for data retrieval?

hiding html elements by using the display property set to none instead of physically removing

Disabling FormArray on-the-fly in Angular

Implementing a Typescript hook using useContext along with an uninitialized context object

Is it advisable to pass useSelector to useState in React?