SolidJS 如何与 TypeScript 配合使用？有哪些类型定义最佳实践？ - 面试题

SolidJS 提供了完善的 TypeScript 支持和类型系统：

基本类型定义：

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

// 定义 signal 类型
const [count, setCount] = createSignal<number>(0);
const [user, setUser] = createSignal<User | null>(null);

// 定义 effect
createEffect(() => {
  const value = count(); // value 自动推断为 number
  console.log(value);
});

组件类型定义：

typescript
// 函数组件
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>
  );
}

// 使用 JSX.IntrinsicElements 扩展原生元素类型
declare module 'solid-js' {
  namespace JSX {
    interface IntrinsicElements {
      'my-custom-element': {
        value: string;
        onChange: (value: string) => void;
      };
    }
  }
}

Store 类型定义：

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: []
});

// 类型安全的更新
setState('user', 'name', 'John'); // ✅ 正确
setState('user', 'invalid', 'value'); // ❌ 类型错误

Resource 类型定义：

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

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

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

// 使用泛型定义返回类型
const [data] = createResource<User[], Error>(fetchUsers, {
  initialValue: []
});

Context 类型定义：

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;
}

类型工具：

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

// 条件类型
type SignalType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;

最佳实践：

为所有组件定义 Props 接口
使用泛型定义 signal 和 store 类型
为 context 定义明确的类型
使用 utility types 简化类型定义
启用严格模式检查