Preact to TypeScript Converter

Component with hooks

import { useState } from 'preact/hooks';
import type { FunctionComponent } from 'preact';

interface Props { initial?: number; }

export const Counter: FunctionComponent<Props> = ({ initial = 0 }) => {
  const [count, setCount] = useState<number>(initial);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
};

Preact Signals

import { signal, computed, type Signal } from '@preact/signals';

const count: Signal<number> = signal(0);
const doubled = computed(() => count.value * 2);

function increment(): void {
  count.value++;
}

tsconfig for Preact

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

jsxImportSource: "preact" tells TypeScript that JSX maps to Preact's runtime instead of React's. If you use preact/compat for React-compatible imports, the paths aliases keep ambient @types/react usage working.

Related framework migrations