Solid与TypeScript #

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "strict": true
  },
  "include": ["src"]
}

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
  children: JSX.Element;
}

function Button(props: ButtonProps): JSX.Element {
  return (
    <button
      class={`btn btn-${props.variant || 'primary'}`}
      disabled={props.disabled}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => JSX.Element;
}

function List<T>(props: ListProps<T>): JSX.Element {
  return (
    <ul>
      <For each={props.items}>
        {(item, index) => props.renderItem(item, index())}
      </For>
    </ul>
  );
}

// 使用
<List
  items={users}
  renderItem={(user) => <li>{user.name}</li>}
/>

const [count, setCount] = createSignal<number>(0);
const [name, setName] = createSignal<string>('');
const [isActive, setIsActive] = createSignal<boolean>(false);

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

const [user, setUser] = createSignal<User | null>(null);

type Setter<T> = (value: T | ((prev: T) => T)) => T;

const [value, setValue]: [() => number, Setter<number>] = createSignal(0);

function Form() {
  const handleSubmit = (e: Event & { currentTarget: HTMLFormElement }) => {
    e.preventDefault();
  };

  const handleInput = (e: InputEvent & { currentTarget: HTMLInputElement }) => {
    console.log(e.currentTarget.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onInput={handleInput} />
    </form>
  );
}