Custom types across multiple .ts/.tsx files

user_14421894 0
Viewed 101

I'm trying to build up my first project with Typescript (and React/Redux) and struggling to pass my custom types between multiple files: like making my action types available to action creators, reducer, and each component dispatching some of those actions.

So, what's the proper approach here:

  • declare all the custom types in a common file and import that wherever necessary?
  • declare custom types in their related files and make the web of imports/exports?
  • some other option that didn't yet cross my mind?

I understand that this question may be closed as rather opinionated, but I failed to find the answer neither in typescriptlang.org nor in the other resources (including SO topics).

react-redux redux typescript reactjs javascript
2 Answers

I usually split my types depending upon if they are more global or local. For example, if I have some types that are only used within a single module or file, I will tend to store those types in the same place as the implementation:

/components
  /Search
    /Search.tsx
    /search.types.ts <- contains component types like props
    /SearchContainer.tsx

For more global types, I have a separate /types folder, usually at the root level that I split into separate namespaces.

/types
  /search
  /authentication
  /actions
  /routing

What you store in this types directory will be specific to your application, but you get the general idea. You can also use aliasing to import types so that you don't have to deal with relative imports up many levels: ../../../types/something => @types/something

user_25491540

place all of your types into a module and call filename.d.ts

//filename.d.ts

  declare module "my-module"{
    
      export type int = number;
    
    
    {

if you want to use enum place it on .ts file (not d.ts)

user_101435460
Related