43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
---
|
|
title: "re export"
|
|
seo_description: "Code snippet explaining re-exporting enums in TypeScript"
|
|
date: 2022-01-05T09:13:55+01:00
|
|
draft: false
|
|
snippet_types:
|
|
- typescript
|
|
---
|
|
|
|
Today when writing a React hook I imported an enum type from another section of
|
|
code. This enum was used as an argument to the hook. Any components that used
|
|
this hook would also need to import that type enum. So just to use the hook at a
|
|
minimum the component would need to import two things, the hook itself, and the type
|
|
enum. To many imports cluttering stuff us!
|
|
|
|
|
|
```ts
|
|
import useCoolHook from 'Client/hooks/CoolHoook';
|
|
import HatStyleEnum from 'Client/hats/styles';
|
|
|
|
...
|
|
cool = useCoolHook(HatStyleEnum.cowboy);
|
|
```
|
|
|
|
What I found is the ability to re-export the type from the hook to keep the enum
|
|
bundled with the hook and more easily accessible.
|
|
|
|
```ts
|
|
export {HatStyleEnum} from 'Client/hats/styles';
|
|
|
|
export const useCoolHook = (hatId: HatStyleEnum) => {
|
|
...
|
|
```
|
|
|
|
This way the components only have to have one import, saving space.
|
|
```ts
|
|
import useCoolHook, {HatStyleEnum} from 'Client/hooks/CoolHoook';
|
|
```
|
|
|
|
Also see [similar snippet for js](/snippets/re-export-js-fn/)
|
|
|
|
source: [stackoverflow](https://stackoverflow.com/questions/36790911/reexport-class-in-typescript)
|
|
|