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

[kanashimia]

@mikew I'm late to the party, but contrary to what the above bullshit generator said something like this kind of seems to work at least for me on a small test project:

import type {} from 'solid-js';

declare global {
  export type * as Solid from 'solid-js';
}

export {};

Tested on the following tsc / tsgo versions:

› tsc --version
Version 5.9.3
› tsgo --version
Version 7.0.0-dev.20260316.1

Top-level import seems to be needed for some reason in my case, I have no idea why, but TS can't resolve imports otherwise.

This messes with types slightly though as language server will now display "globalThis.Solid.JSX.Element" and etc on hover.

Does this work for you?

For component exports like For, Show, etc, which are imported by the compiler, I couldn't find a way to do it without repetition though, but there aren't a lot of them, so it isn't a problem.