How do I organise my types/interfaces declarations in typescript?

Question

I'm a bit new in typescript and one of the things that makes me a little confused are type/interface declarations. I'm writing a lib that currently has a few classes and a few more types/interfaces declarations. I use these types/interfaces throughout most of the code, initially I would leave them in a single file in a types folder, then I would import them wherever needed, now I have a single models.d.ts inside the types folder that declares a namespace types, inside this namespace I export all my types/interfaces that I'm using throughout the code. Is this approach OK or is there a better way for organising types and interfaces definitions?

Answer 1

Normally you only use the .d.ts files for type definition files for JS libraries that are not strongly typed. Here is another SO about .d.ts files: About "*.d.ts" in TypeScript. Having a directory with your types is the solution we use and seems to work well. Yes, you have to import types in files, but it allows you to be explicit about it and if you use the "TypeScript Hero" plugin VS Code can automatically add the imports for you.

Also, you can put multiple types in a single file, but I would do so only with grouped together functionality, such as if you airplanes, cars and boats and if they are small enough, such as the file vehicles.ts, or you could have four files: vehicles.ts, airplanes.ts, cars.ts and boats.ts, where you have the generic types in vehicles.ts and the specific ones in the other files.

Now if you started with a single file, vehicles.ts that began to grow with a bunch of different types, and decided you wanted to break them out, one way you could do that with no refactoring to anything but your type code is create a directory called vehicles, then put all the files in their that you refactor, and end with an index.ts file that contains imports and exports for all of the types. Here's an example:

Your project file:

import { Boeing737, Boeing747, FordExplorer, BassBoat } from 'src/types/vehicle'

This is currently referencing the vehicles.ts file that is in that directory. Now once we do the refactoring, and now have the directory: 'src/types/vehicle' which has the refactored .ts files under it you create an index.ts file that looks like this:

export { Boeing737, Boeing747 } from './airplanes';
export { FordExplorer, ToyotaCorolla, ToyotaSienna } from './cars';
export { BassBoat, Yacht } from './boats';

Now your import in your project file doesn't change at all but it is now getting its types from the sub files. This then allows for further refactoring without changing your project files, such as if you wanted to separate out cars from SUVs. If you are using the same types in all the files, you just need the one import line that you could copy to new files, or just import them as needed.

If you want to read more about index.ts files and how they work, here is the Typescript documentation: https://www.typescriptlang.org/docs/handbook/module-resolution.html.