Preact与TypeScript #

npm install -D typescript @types/node

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

import { FunctionalComponent } from 'preact';

interface ButtonProps {
  text: string;
  onClick?: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'danger';
}

const Button: FunctionalComponent<ButtonProps> = ({
  text,
  onClick,
  disabled = false,
  variant = 'primary'
}) => {
  return (
    <button
      class={`btn btn-${variant}`}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

interface CardProps {
  title: string;
  children: preact.ComponentChildren;
}

function Card({ title, children }: CardProps) {
  return (
    <div class="card">
      <h2>{title}</h2>
      <div class="card-body">{children}</div>
    </div>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => preact.VNode;
  keyExtractor: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={keyExtractor(item)}>
          {renderItem(item, index)}
        </li>
      ))}
    </ul>
  );
}

// 使用
interface User {
  id: number;
  name: string;
}

<List<User>
  items={users}
  renderItem={(user) => <span>{user.name}</span>}
  keyExtractor={(user) => user.id}
/>

import { useState } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState<number>(0);
  const [user, setUser] = useState<User | null>(null);
  const [items, setItems] = useState<string[]>([]);

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

import { useRef } from 'preact/hooks';

function Input() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focus = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focus}>Focus</button>
    </div>
  );
}

import { useEffect } from 'preact/hooks';

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      const response = await fetch(`/api/users/${userId}`);
      const data: User = await response.json();
      
      if (!cancelled) {
        setUser(data);
      }
    }

    fetchUser();

    return () => {
      cancelled = true;
    };
  }, [userId]);

  return <div>{user?.name}</div>;
}

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        const json: T = await response.json();
        
        if (!cancelled) {
          setData(json);
          setError(null);
        }
      } catch (e) {
        if (!cancelled) {
          setError((e as Error).message);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    fetchData();

    return () => {
      cancelled = true;
    };
  }, [url]);

  return { data, loading, error };
}

// 使用
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const { data: user, loading, error } = useFetch<User>(`/api/users/${userId}`);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  
  return <div>{user?.name}</div>;
}

function Form() {
  const handleSubmit = (e: Event) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  const handleInput = (e: Event) => {
    const target = e.target as HTMLInputElement;
    console.log(target.value);
  };

  const handleChange = (e: Event) => {
    const target = e.target as HTMLSelectElement;
    console.log(target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onInput={handleInput} />
      <select onChange={handleChange}>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </form>
  );
}

function Button() {
  const handleClick = (e: MouseEvent) => {
    console.log('Clicked at', e.clientX, e.clientY);
  };

  const handleMouseEnter = (e: MouseEvent) => {
    console.log('Mouse entered');
  };

  return (
    <button 
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
    >
      Click me
    </button>
  );
}

function Input() {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
      console.log('Enter pressed');
    }
    if (e.key === 'Escape') {
      console.log('Escape pressed');
    }
  };

  return <input onKeyDown={handleKeyDown} />;
}

import { createContext } from 'preact';
import { useContext } from 'preact/hooks';

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

const ThemeContext = createContext<ThemeContextType | null>(null);

function ThemeProvider({ children }: { children: preact.ComponentChildren }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme(t => t === 'light' ? 'dark' : 'light');
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme
  };

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

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

// src/types/global.d.ts

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

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  image: string;
}

interface ApiResponse<T> {
  data: T;
  success: boolean;
  message?: string;
}

// src/types/api.ts

export interface LoginRequest {
  email: string;
  password: string;
}

export interface LoginResponse {
  token: string;
  user: User;
}

export interface PaginatedResponse<T> {
  items: T[];
  total: number;
  page: number;
  pageSize: number;
}

// 基础 Props
type BaseProps = {
  className?: string;
  style?: preact.JSX.CSSProperties;
  children?: preact.ComponentChildren;
};

// 扩展 Props
type ButtonProps = BaseProps & {
  variant: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: (e: MouseEvent) => void;
};

// 可选 Props
type OptionalProps<T> = {
  [K in keyof T]?: T[K];
};

// 必选 Props
type RequiredProps<T> = {
  [K in keyof T]-?: T[K];
};

// 只读 Props
type ReadonlyProps<T> = {
  readonly [K in keyof T]: T[K];
};

// types/index.ts
export type { User, Product, Order } from './models';
export type { ApiResponse, PaginatedResponse } from './api';

// components/Button/index.ts
export { Button } from './Button';
export type { ButtonProps } from './Button';

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}