6

I'm starting out with feathers 4.3 and Typescript 3.6 and have a question how to properly define the right Typescript type for the feathers client (browser side).

I have taken the react chat code from https://github.com/feathersjs-ecosystem/feathers-chat-react and translated it to Typescript (which was mostly straight forward).

There's the definition of a client in feathers.js:

const client = feathers()

The type of client is inferenced as Application<any>.

The problem comes when I try to call authenticate on the client (application.js):

client.authenticate().catch(() => this.setState({ login: null }))

Typescript tells me that TS2339: Property 'authenticate' does not exist on type 'Application<any>'

It works if I cast the type to any, but I'd rather avoid that.

I would guess the solution is to instantiate it as const client = feathers<MyApplicationType>() instead of not passing a type argument at all?

Is there documentation somewhere how that Typescript type should look like or should be constructed? Is it a union of different service types available on the client?

Thanks for your help!

RobC
  • 22,977
  • 20
  • 73
  • 80
Torsten Uhlmann
  • 645
  • 5
  • 13
  • Possible duplicate of [Feathers client (@feathers/client) is unable to authenticate a username/password in an ReactJs app](https://stackoverflow.com/questions/57762855/feathers-client-feathers-client-is-unable-to-authenticate-a-username-password) – Joe Sep 09 '19 at 21:35
  • 1
    @Joe The referenced question asks how to make authentication work in Javascript. My question concerns the construction of the Typescript type for the feathers client in order to make use of type safety, I got authentication and all other parts working, just not with type safety. – Torsten Uhlmann Sep 10 '19 at 06:58
  • The repo you're referencing seems to be out of date. The package it's referencing in the package.json has been archived and moved into the main, app, which works differently – CGundlach Sep 10 '19 at 07:48
  • @CGundlach I only took the code from there and ported it to TS. The code works fine, just the types give me head aches. Is there maybe another frontend TS example that I can look at, which I haven't found yet? – Torsten Uhlmann Sep 11 '19 at 07:55
  • @TorstenUhlmann FYI the v4 of the authentication code in Feathers is now all native to Typescript, so using the latest & greatest vs. that repo might help you. But there are migrations steps from v3->v4 so it's not just plug-and-play. – Joe Sep 16 '19 at 12:47
  • Hi @Joe, the whole demo app is already written in Typescript and with feathers 4. And the app including authentication does work, no problem here. The problem was merely figuring out the correct type for the call 'const client = feathers()'. – Torsten Uhlmann Sep 17 '19 at 15:03

1 Answers1

1

Try npm install --save @feathersjs/authentication-client. I was getting this same TS error, but fortunately once I spun up feathers inside a docker container i got some additional type errors complaining about not finding the modules @feathersjs/authentication-client, @feathersjs/rest-client, and @feathersjs/primus-client. After I installed those 3 packages, authenticate and reAuthenticate were included on the Application type.

Not sure exactly why that fixed it, but I assume there's some mis-configuration in the @feathersjs/client package.

Mason Bourgeois
  • 171
  • 6