How to "share" ts types from "app to plugin"

[ahgentil]

What are you trying to achieve or the steps to reproduce?

This is kinda of a Fastify doubt disguised as a TS+npm doubt.

I have an app that decorates the fastify instance with stuff and also defines a bunch of interfaces and classes. Other "local" plugins use these decorators and types "work" within the app because I extended the FastifyInstance type in my app's index.d.ts with the decorators and their types.

Then I have external plugins (in their own repos) that have their own options and some also decorate the FastifyInstance.
Both decorators and options have their types, and they are available to whomever uses the plugins because plugins also have their own index.d.ts declaring the options types and the decorators types in FastifyInstance (like in this example from the docs).

So, the app has these plugins as a dependencies, registers them, and all the types work fine - the app can "see" the plugins types.

Now, how can I do the "inverse"?
On the plugin's side, I know the the app decorated the instance with "decoratorA", but how can I pull the type from the app's types?
Also, if some of the plugins options are of "TypeABC", that is declared/defined in the app, how can I pass that type from the app to the plugins.

Anyone has a good idea of how to achieve this?

I initially declared a .d.ts file in the app, exporting all these types (types defined in the app but also used in plugin options, the "extended" FastifyInstance, ...), and added the app as a devDependency in the plugins. This creates a circular dependency on npm: plugin depends on app > app depends on plugin > ..., and npm just downloads dependencies in an infinite loop.

I can't think of other options to achieve this. Create the app's own @types/...?
Thank you in advance.

• ts: 4.x
• node version: 14
• fastify version: 3.8.0
• os: Mac
• any other relevant information:

[mcollina]

cc @fastify/typescript

[fox1t]

You can find an example here: https://github.com/fastify/fastify-swagger/blob/master/index.d.ts#L4

On the "app" side of things, it is the same: you need to declare module 'fastify' {... somewhere and add your decorators explicitly. The common way to achieve this is by using https://www.typescriptlang.org/tsconfig#typeRoots and adding a file that decorates Fastify module. The other way is just to put the declaration inside a .ts file that is picked by the compiler.

Can you please provide a minimum repro repository so we can understand better your use case? Type declaration and merging are done automatically by TS, if properly configured.

[ahgentil]

I'll put up 2 repos with a similar setup and come back to you. Thanks.

[ahgentil]

@fox1t Here they are:
https://github.com/ahgentil/tsapp#master
https://github.com/ahgentil/tsplugin#master

master branch has a working setup. normal usage/import of a plugin by the app: app sees plugin's options types

kabum branch has the scenario I'm trying to achieve: exposing types defined by the app to the plugin.

on both repos you can compare master and kabum to see the differences.

in tsapp#kabum, "npm i" goes loopy ... literally ... which I understand.
My question is, how can I then achieve type sharing with dependencies like these.

Thanks in advance

[garretteklof]

I'm trying out Fastify and I'm trying to get it to work with Typescript -- I'm new to both. For whatever reason I can't seem to get the 'declaration merging' to work. In my app, I copied this trivial plugin -> https://github.com/fastify/fastify-cli/blob/master/templates/app-ts/src/plugins/support.ts and I keep getting error TS2428: All declarations of 'FastifyInstance' must have identical type parameters.

I've tried many tsconfig combinations to no avail. I've changed the interface name, which will obviously bypass that error, but properties won't be available. Admittedly, I'm about ready to say 'screw it' and head back to Express but any insight / nudge in the right direction will be earnestly appreciated.

Thanks for all that you've done bringing this library together.

[ahgentil]

@garretteklof Are you trying to achieve something like what I described? With app and plugin in different repos?
If not you just need one declare module 'fastify' {} in some .ts file in your app, with all the changes/"decorations" your code is adding to Fastify types (FastifyInstance, FastifyRequest, ...).

[garretteklof]

@ahgentil thanks so much for your help. I was just trying to have multiple custom plugins in one app, and declaring it once worked. I definitely think there's room for improvement in the documentation for newbies like me - with the caveat that it does not help that I'm brand new to Typescript, and Fastify is just another layer on top of that.

In that same vein, do you know of any more official way to structure a Typescript x Fastify API? I see that I can declare that declare module 'fastify' {} in any file, but I've spent a great deal of poking around the documentation / other repos trying to get a coherent structure. I've boiled it down to that app-ts template in the fastify-cli repo, but it doesn't include any .d.ts files - and I'm not sure if it's common in a Typescript app to have something like a @types folder? I understand this is more a matter of opinion, but it does seem to have some implications. While the fix worked and the application compiled with tsc - I wasn't actually able to get it to compile with ts-node. After some trial and error I added a --files flag which works, but I've been reading that you're supposed to declare your typing paths in tsconfig - idk - living in plain JS land so long, this all seems like a lot of overhead 😅

Thanks again!

[Ethan-Arrowood]

@ahgentil @garretteklof Here is an example I've been slowly working on: https://github.com/fastify/fastify-typescript-extended-sample

if you have any ideas to add to it feel free to send a PR

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.