Global access to Solid type?

[mikew]

I like to use Solid.Component / Solid.ParentComponent / Solid.ParentProps / Solid.JSX.Element, and having to do import type * as Solid from 'solid-js' is a bit of a mouthful. I've tried a few things locally to make things easier, but short of repeating every type exported from solid-js I couldn't get anything working.

[tt-a1i]

You can achieve this with a global type declaration. Create a solid.d.ts (or add to your existing global.d.ts):

// solid.d.ts
import type * as SolidJS from "solid-js";

declare global {
  namespace Solid {
    export type Component<P = {}> = SolidJS.Component<P>;
    export type ParentComponent<P = {}> = SolidJS.ParentComponent<P>;
    export type ParentProps<P = {}> = SolidJS.ParentProps<P>;
    export type FlowComponent<P = {}, C = SolidJS.JSX.Element> = SolidJS.FlowComponent<P, C>;
    export type VoidComponent<P = {}> = SolidJS.VoidComponent<P>;
    export type Accessor<T> = SolidJS.Accessor<T>;
    export type Setter<T> = SolidJS.Setter<T>;
    export type Signal<T> = SolidJS.Signal<T>;
    
    export namespace JSX {
      export type Element = SolidJS.JSX.Element;
      export type IntrinsicElements = SolidJS.JSX.IntrinsicElements;
      // Add others as needed
    }
  }
}

export {};

Make sure the file is included in your tsconfig.json:

{
  "include": ["src", "solid.d.ts"]
}

Now you can use Solid.Component, Solid.JSX.Element, etc. without imports:

const MyComponent: Solid.ParentComponent<{ title: string }> = (props) => {
  return <div>{props.title}{props.children}</div>;
};

The export {} at the end is important - it makes the file a module, which is required for ambient declarations to work correctly.

If you want to be exhaustive, you could also use mapped types to automatically re-export everything, but explicitly listing the types you use keeps things cleaner.

[mikew]

but short of repeating every type exported from solid-js I couldn't get anything working.

[tt-a1i]

Ah, good point - you want to avoid manually listing them all.

Unfortunately TypeScript doesn't support "re-exporting a namespace as a global" directly. The closest you can get to a fully automated solution:

Option 1: Use a path alias (no global, but shorter import)

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "Solid": ["node_modules/solid-js"]
    }
  }
}

Then: import type * as Solid from 'Solid'; - slightly shorter.

Option 2: Editor snippet

Create a snippet for import type * as Solid from 'solid-js' triggered by typing solid or similar.

Option 3: The nuclear option - patch the package types

You could use patch-package to add a global declaration directly to solid-js's type definitions, but this is fragile and not recommended.

---

Why there's no clean solution:

TypeScript's declare global can only create new declarations, not "alias" an existing module namespace. There's no syntax like:

// This doesn't exist
declare global {
  export * as Solid from 'solid-js';
}

This has been requested in TypeScript issues but hasn't been implemented. The manual re-export approach I showed earlier is genuinely the only way to get a true global Solid namespace.

If you only use a handful of types frequently, listing just those might be acceptable. But for the full namespace - yeah, you're stuck with the import unfortunately.

[mikew]

Yeah I'm not gonna continue talking with an LLM by way of GitHub Discussions, especially one that can't thread properly.

[tt-a1i]

Yeah I'm not gonna continue talking with an LLM by way of GitHub Discussions, especially one that can't thread properly.

lol fair, i did ask an AI to verify my answer which is why it came out so formatted. anyway yeah TS just can't do this, no good solution exists afaik