SolidJS to TypeScript Converter

Signal-based component

import { createSignal } from 'solid-js';

export function Counter(props) {
  const [count, setCount] = createSignal(props.initial ?? 0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count()}
    </button>
  );
}

import { createSignal, Component } from 'solid-js';

interface Props { initial?: number; }

export const Counter: Component<Props> = (props) => {
  const [count, setCount] = createSignal<number>(props.initial ?? 0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count()}
    </button>
  );
};

Typed createStore

import { createStore } from 'solid-js/store';

interface User { id: number; name: string; }
interface State { user: User | null; loaded: boolean; }

const [state, setState] = createStore<State>({
  user: null,
  loaded: false,
});

setState('user', { id: 1, name: 'Ada' });
setState('loaded', true);

Async resources

import { createResource, Component } from 'solid-js';

interface Post { id: number; title: string; }

async function fetchPost(id: number): Promise<Post> {
  const res = await fetch(`/api/posts/${id}`);
  return res.json();
}

export const PostView: Component<{ id: number }> = (props) => {
  const [post] = createResource(() => props.id, fetchPost);
  return <div>{post()?.title}</div>;
};

tsconfig for SolidJS

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "esModuleInterop": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Related framework migrations