How to reference the "transformed" type?

[aradalvand]

Say you have the following in your app.d.ts file:

declare namespace svelteHTML {
   interface SVGAttributes {
        class?: string | { toString(): string };
    }
}

This works. The resulting "transformed" type will have its class overridden such that it accepts either a string or any object with a toString method. And this will be reflected in all <svg> elements throughout the codebase.

But then consider something like this:

import type { ComponentType, SvelteComponent } from 'svelte';
import type { SVGAttributes } from 'svelte/elements';

type SVGComponent = ComponentType<SvelteComponent<SVGAttributes<SVGSVGElement>>>;

The type of SVGComponent's props will not have taken into account the transformation, clearly because SVGAttributes here is imported directly from svelte/elements, which contains the default types.

You could also reference the svelteHTML namespace here like so:

type SVGComponent = ComponentType<SvelteComponent<svelteHTML.SVGAttributes<SVGSVGElement>>>;

But now this will only include the properties defined in our SVGAttributes interface (that is, class), and not any of the others declared in the default SVGAttributes.

How are you supposed to do this sort of thing?

[jasonlyu123]

You can use ComponentType<SvelteComponent<svelteHTML.IntrinsicElements['svg']>>. But once #2109 is fixed, you can use declare module 'svelte/elements' to define custom typing.

[aradalvand]

@jasonlyu123 Thank you