How does SolidJS work with TypeScript? What are the best practices for type definitions?

SolidJS provides comprehensive TypeScript support and type system:

Basic Type Definitions:

typescript
import { createSignal, createEffect } from 'solid-js';

// Define signal type
const [count, setCount] = createSignal<number>(0);
const [user, setUser] = createSignal<User | null>(null);

// Define effect
createEffect(() => {
  const value = count(); // value automatically inferred as number
  console.log(value);
});

Component Type Definitions:

typescript
// Function component
interface Props {
  title: string;
  count: number;
  onIncrement?: () => void;
}

function Counter(props: Props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>Count: {props.count}</p>
      <button onClick={props.onIncrement}>+</button>
    </div>
  );
}

// Extend native element types with JSX.IntrinsicElements
declare module 'solid-js' {
  namespace JSX {
    interface IntrinsicElements {
      'my-custom-element': {
        value: string;
        onChange: (value: string) => void;
      };
    }
  }
}

Store Type Definitions:

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

interface AppState {
  user: {
    name: string;
    age: number;
    email: string;
  };
  items: Array<{
    id: number;
    name: string;
  }>;
}

const [state, setState] = createStore<AppState>({
  user: { name: '', age: 0, email: '' },
  items: []
});

// Type-safe updates
setState('user', 'name', 'John'); // ✅ Correct
setState('user', 'invalid', 'value'); // ❌ Type error

Resource Type Definitions:

typescript
import { createResource } from 'solid-js';

interface User {
  id: number;
  name: string;
  email: string;
}

const [user] = createResource<User>(fetchUser);
const userValue = user(); // User | undefined

// Use generics to define return type
const [data] = createResource<User[], Error>(fetchUsers, {
  initialValue: []
});

Context Type Definitions:

typescript
import { createContext, useContext } from 'solid-js';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>();

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

Type Utilities:

typescript
// Use utility types
type PartialState = Partial<AppState>;
type RequiredState = Required<AppState>;
type ReadonlyState = Readonly<AppState>;

// Conditional types
type SignalType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;

Best Practices:

• Define Props interface for all components
• Use generics to define signal and store types
• Define explicit types for context
• Use utility types to simplify type definitions
• Enable strict mode checking