Cloudflare Developers•6mo ago

Service Workers and Typescript

Hello! I'm trying to call worker B from worker A. I've set up everything as described in the docs (https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) and the calls work, but receive Typescript errors:

Property 'add' does not exist on type '{ fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>; connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket; }'.ts(2339)

Property 'add' does not exist on type '{ fetch(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined): Promise<Response>; connect(address: string | SocketAddress, options?: SocketOptions | undefined): Socket; }'.ts(2339)

I found this on the forum: https://community.cloudflare.com/t/binding-service-rpc-using-typescript/652041 Still can't get something working 😦 Found this as well, still can't figure it out: https://developers.cloudflare.com/workers/runtime-apis/rpc/typescript/ Note worker A and worker B are in separate repos, so maybe it's a moot point in this case? I'm not super familar with RPC stuff.

Cloudflare Docs

Service bindings - Runtime APIs · Cloudflare Workers docs

Facilitate Worker-to-Worker communication.

Cloudflare Docs

Workers RPC — TypeScript · Cloudflare Workers docs

How TypeScript types for your Worker or Durable Object's RPC methods are generated and exposed to clients

11 Replies

fforres•6mo ago

Hey @Web Bae! did you find a solution? 🤔

alors•5mo ago

The @cloudflare/workers-types package defines the type Service<MyEntrypointType>, which describes the type of a service binding. MyEntrypointType is the type of your server-side interface. Service<MyEntrypointType> applies all the necessary transformations to turn this into a client-side type, such as converting all methods to async, replacing functions and RpcTargets with (properly-typed) stubs, and so on. It is up to you to share the definition of MyEntrypointType between your server app and its clients. You might do this by defining the interface in a separate shared TypeScript file, or by extracting a .d.ts type declaration file from your server code using tsc --declaration.

https://blog.cloudflare.com/javascript-native-rpc#what-about-type-safety seems the approach, combined with the forum post you ref.d @Web Bae as for sharing types between your repos, that's a whole new rabbit hole. monorepos are fun lol

The Cloudflare Blog

We've added JavaScript-native RPC to Cloudflare Workers

Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system for use in Worker-to-Worker and Worker-to-Durable Object communication, with absolutely minimal boilerplate. We've designed an RPC system so expressive that calling a remote service can feel like using a library.

alors•5mo ago

ok so. i got something working. jeez. // WORKER A

export default class extends WorkerEntrypoint {
    async parse(input: ReadableStream) {
// logic
}

export default class extends WorkerEntrypoint {
    async parse(input: ReadableStream) {
// logic
}

// WORKER B

interface Env {
// OTHER BINDINGS
  EPUB: Service<import("../epub-rpc-parser-worker/src/index.ts").default>;
}

interface Env {
// OTHER BINDINGS
  EPUB: Service<import("../epub-rpc-parser-worker/src/index.ts").default>;
}

bun link (was) working pretty well for me for using as a package across repos wangler types command overwrites as Fetcher, so that's the next fun choice to make

Bun

bun link – Package manager | Bun Docs

Install local packages as dependencies in your project.

alors•5mo ago

helpful rabbit hole https://discord.com/channels/595317990191398933/779390076219686943/1254019149223563355 good impl. reference https://github.com/cloudflare/js-rpc-and-entrypoints-demo/tree/0b482ea46e2f69f0b8bf933ec4a65e6f0b1a767f

GitHub

GitHub - cloudflare/js-rpc-and-entrypoints-demo at 0b482ea46e2f69f0...

Contribute to cloudflare/js-rpc-and-entrypoints-demo development by creating an account on GitHub.

alors•5mo ago

more! so got an image generator working with workers-og initially by bundling within the default class. that worked fine broke when moved outside to its own class

alors•5mo ago

fix: have to define entrypoint in wrangler.toml. again: wrangler types will reset to Fetcher, so be aware

[[services]]
binding = "OG"
service = "epub-rpc-parser-worker"
entrypoint = "OGWorker"

[[services]]
binding = "OG"
service = "epub-rpc-parser-worker"
entrypoint = "OGWorker"

all working deployed 😭 bun link working a dream now. semver.

Radoš•3mo ago

@alors thanks for the links

alex (he/him)•2mo ago

Did anyone found a way for wrangler types to actually write the correct types and not reset to Fetcher.. I would like wrangler types to set the following ORM: Service<import('../orm/src/index').ORM>;

alors•5w ago

@alex (he/him) no, yet to find a way to avoid the Fetcher overwrite & am now running into your issue with consumer worker types on a fresh project lol

alex (he/him)•4w ago

@alors thanks for the updated.. looks like right now only interface merging or manual codemod works Did you ever get it working so you can CTRL+CLICK or "Go to definition" on the actual function, and not just the binding?

alex (he/him)•4w ago

Looks like that rpc defined methods are typed as (property) instead of (method) 🤔

Gaming

Programming

Service Workers and Typescript