Streamlining the imports and exports using Typescript

Question

Streamlining the imports and exports using Typescript

As a newcomer to the world of JavaScript and TypeScript, I have been exporting my components like this. However, as my component list grows day by day, I feel the need to optimize the structure.

import Notification from "./Notification";
import Confirmation from "./Confirmation";
import Button from './Button';
import Input from './Input';
import Dropdown from "./Dropdown";
import Add from "./Add";

export {
    Notification,
    Confirmation,
    Button,
    Input,
    Dropdown,
    Add,
}

I am seeking advice on how to better organize and structure these exports using vanilla JavaScript or TypeScript techniques.

typescript

Answer 1

Answer №1

If you are working in your index.ts/index.js file, consider using the syntax export .. from "..." (where ... represents either a default import or named imports, with ... being a filepath).

export * as Notification from "./Notification";
export * as Confirmation from "./Confirmation";
export * as Button from './Button';
export * as Input from './Input';
export * as Dropdown from "./Dropdown";
export * as Add from "./Add";

However, this approach may not be ideal as you have to access the default value by adding .default after the component name like Notification.default.

A better alternative would be to use named exports if all your other files follow that pattern (export Notification;):

export { Notification } from "./Notification";
export { Confirmation } from "./Confirmation";
export { Button } from './Button';
export { Input } from './Input';
export { Dropdown } from "./Dropdown";
export { Add } from "./Add";

Answer 2

If you are working in your index.ts/index.js file, consider using the syntax export .. from "..." (where ... represents either a default import or named imports, with ... being a filepath).

export * as Notification from "./Notification";
export * as Confirmation from "./Confirmation";
export * as Button from './Button';
export * as Input from './Input';
export * as Dropdown from "./Dropdown";
export * as Add from "./Add";

However, this approach may not be ideal as you have to access the default value by adding .default after the component name like Notification.default.

A better alternative would be to use named exports if all your other files follow that pattern (export Notification;):

export { Notification } from "./Notification";
export { Confirmation } from "./Confirmation";
export { Button } from './Button';
export { Input } from './Input';
export { Dropdown } from "./Dropdown";
export { Add } from "./Add";

Streamlining the imports and exports using Typescript

Answer №1

Similar questions

Can the ngx-chips library be used to alter the language of chips?

Trouble loading Styled Components in React Typescript with Webpack configuration

What is the importance of typescript requiring the use of generics?

What is the reason for receiving an error with one loop style while the other does not encounter any issues?

The AngularJS $resource is taking the entire object and embedding it into the URL

What is the method to select and activate the second item in the list within the second unordered list?

Achieving CommonJS imports compilation with Typescript

TSLint warning: Duplicate identifier detected - 'err'

How do React Native proxies differ from vanilla React proxies in their functionality?

Next.js API is throwing a TypeError because req.formData is not a recognized function

Leverage the child interface as a property interface containing a generic interface

Guide to personalizing the ngxDaterangepickerMd calendaring component

Effortlessly bring in Typescript namespace from specific namespace/type NPM package within a mono-repository

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

Is there a way to refresh a JSON file in an Angular app without needing to recompile the entire application?

Retrieving information from a JSON object in Angular using a specific key

Exporting the extended express request in a TypeScript library for seamless integration

Alert in Typescript when spreading keys that are not required

In React + TypeScript, learn how to effectively pass down a function from a container component to a

Is there a way to assign DTO to an entity within typescript?