Using @cloudflare/worker-types for the app.d.ts

[jokull]

Is it possible to jack something from @cloudflare/worker-types to have the platform variable be typed in SvelteKit hooks?

There's a comment here:

It's possible to tell SvelteKit how to type objects inside your app by declaring the App namespace. By default, a new project will have a file called src/app.d.ts containing the following:

By populating these interfaces, you will gain type safety when using event.locals, event.platform, session and stuff:

I'm looking for an example of this somewhere. The env is always a generic in @cloudflare/worker-types, so maybe you have to declare the type for each expected variable, like ASSETS in the case of Pages?

Any pointers appreciated.

[colinhowells]

Edited to reflect current best practices

Hopefully this gives you a pointer to solving your case, this is what I'm doing at the moment:

// /src/app.d.ts
declare global {
	interface Window {
		someObnoxiousGlobalObjectFromAdVendor: any;
	}
	namespace App {
		interface Error {
			code?: string; // we always have 'message', but adding code
		}
		interface Locals {
			user?: import('$lib/types').User; // in case you have users
		}
		interface PageData {
			someDataYouLike?: import('$lib/types').LikedData; // $page.data.someDataYouLike
		}
		interface Platform {
			cf?: IncomingRequestCfProperties;
			env?: {
				CF_PAGES_COMMIT_SHA: string; // I use this for Kit version
				SOME_KV_BINDING: KVNamespace;
			};
		}
	}
}

export {};

[jokull]

Mate, thank you! Makes sense!

[xpat]

@jokull @colinhowells Mind if I ask why .src/global.d.ts and not app.d.ts?

I'm trying out Cloudflare's D1 database. There's an example app that I've only managed to get working by creating the Sveltekit project with TypeScript. It didn't work if I created it with JsDoc. If I create a new SK project with just javascript, there is no app.d.ts so I'm wondering if it's only possible to run that Cloudflare app with a SK TypeScript. That's the bigger question for me, but I'm also curious as to why global.d.ts and not app.d.ts.

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
        namespace App {
                // interface Error {}
                // interface Locals {}
                // interface PageData {}
                   interface Platform {
      env: {
        DB: D1Database;
      };
      context: {
        waitUntil(promise: Promise<any>): void;
      };
      caches: Cache
        }
}

export {};

[colinhowells]

Ha yeah you are absolutely right, my post is pretty old now and app.d.ts is definitely the one you want to use (I've edited the original post).

If you have random npm packages, you can use src/ambient.d.ts for those

// src/ambient.d.ts, just an example of things I put in there
declare module '@beyonk/svelte-google-analytics';
declare module '@rollup/plugin-graphql';
declare module '@sentry/vite-plugin';
declare module 'toucan-js';
declare module '*.gql';

and if you have types of your own then types.d.ts in /lib allows you to do /** @type {import('$lib/types').Thing} */

// /src/lib/types.d.ts
type SomeType = {
	id: string;
	text: string;
	excellent: boolean;
};
type SomeTypes = SomeType[];
export type Thing = 'hamsters' | 'kumquats' | 'cabbage'; // this type is importable cos 'export'
``

[axel-rock]

I'm jumping in this pretty old thread already, I'm facing an issue in SvelteKit.

I've been doing the following:

import type { Session, SupabaseClient, User as AuthUser } from '@supabase/supabase-js'
import type { Database } from '$lib/db/types'
declare global {
	namespace App {
		interface Locals {
			supabase: SupabaseClient<Database>
			safeGetSession: () => Promise<{ session: Session | null; user: AuthUser | null }>
		}
		interface PageData {
			session: Session | null
		}
	}

	type Message = Database['public']['Tables']['messages']['Row']
}

export {}

Using the Message type from Database, to make it available without import, similar to what an ambient.d.ts file would do.

My life has been great, until today: I installed Sentry, and Sentry depends on @cloudlare/worker-types, which seems to export a global type called Message, and takes priority over this, instantly making my entire codebase's types wrong.

I tried moving my Message type into an ambient file, or within my lib folder as .d.ts file, none of these option work.

Am I missing a way to avoid this type contamination?

[jokull]

Didn't work for me. If a 3rd party package depended on @cloudflare-workers-types (which many still do) then it would be pulled into the globals, and I couldn't give generated types precedence.

[teemingc]

@lukaszpolowczyk is there a way to prevent the CF types from polluting the global namespace when users install Sentry?

I noticed I get the global types too when I install the Drizzle D1 adapter.

However, the recommended way to get CF types for users is to generate the types with Wrangler https://developers.cloudflare.com/workers/languages/typescript/#generate-types

[lukaszpolowczyk]

@eltigerchino I don't know. Should I know?

[teemingc]

Oh I'm so sorry. I tagged the wrong Lukas 😭 @Lms24 this is the correct one

[Lms24]

Hi, not that I'm aware of on first glance but I agree that this is far from ideal. I'll convert this thread to an issue for us to track. If anyone has ideas in the meantime, feel free to share them!

UPDATE: This is already tracked in getsentry/sentry-javascript#16099. Let's continue the discussion over there!