2026了，你还在用 React.FC 写组件？这些 TypeScript 模式该更新了

const UserCard: React.FC<{ name: string }> = ({ name, children }) => {
  return <div>{name}{children}</div>
}

// 你写的
const el = <div>hello</div>

// 编译器翻译成
const el = React.createElement('div', null, 'hello')

// ✅ 2026 写法：不需要 import React
interface ButtonProps {
  label: string;
  onClick: () =>void;
  variant?: 'primary' | 'secondary' | 'danger';
}

exportconst Button = ({ 
  label, 
  onClick, 
  variant = 'primary'
}: ButtonProps) => {
return (
    <button 
      onClick={onClick}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
};

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

// ❌ 旧写法：React.FC 在 React 17 及更早版本中隐式包含 children
const Card: React.FC<{ title: string }> = ({ title, children }) => {
  // children 哪来的？React.FC 帮你偷偷加上了
  return <div>{title}{children}</div>
}

// ✅ 2026 推荐写法：完全显式
interface CardProps {
  title: string;
  subtitle?: string;
  children?: React.ReactNode;  // 你自己决定要不要接收 children
  onClose?: () =>void;
}

const Card = ({ title, subtitle, children, onClose }: CardProps) => {
return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
        {subtitle && <p>{subtitle}</p>}
        {onClose && <button onClick={onClose}>×</button>}
      </div>
      {children && <div className="card-body">{children}</div>}
    </div>
  );
};

用户需求
   |
   v
┌─────────────────────────────────────┐
│         <List<T>> 泛型组件           │
│                                     │
│  items: T[]  ──→  遍历每一项         │
│  renderItem: (item: T) => JSX       │
│  keyExtractor: (item: T) => string  │
└─────────────────────────────────────┘
   |            |              |
   v            v              v
商品列表      订单列表       用户列表
Product[]   Order[]        User[]

// 定义泛型列表组件
interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) =>string;
  emptyText?: string;
  loading?: boolean;
}

const List = <T,>({ 
  items, 
  renderItem, 
  keyExtractor,
  emptyText = '暂无数据',
  loading = false
}: ListProps<T>) => {
if (loading) return <div className="loading">加载中...</div>;
  if (items.length === 0) return <div className="empty">{emptyText}</div>;

return (
    <ul className="list">
      {items.map((item, index) => (
        <li key={keyExtractor(item)}>
          {renderItem(item, index)}
        </li>
      ))}
    </ul>
  );
};

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

// TypeScript 知道 product 是 Product 类型，直接有完整提示
<List
  items={products}
  renderItem={(product) => (
    <span>{product.name} - ¥{product.price}</span>
  )}
  keyExtractor={(product) => product.id}
  emptyText="暂无商品"
/>

// ❌ 容易出问题的写法
interface State {
  loading: boolean;
  data?: User[];
  error?: string;
}

            ┌── { status: 'idle' }
            │
状态只能是 ──┼── { status: 'loading' }
            │
            ├── { status: 'success'; data: User[] }
            │
            └── { status: 'error'; error: string }

每种状态下 TypeScript 精确知道有哪些字段
非法状态在类型层面根本无法构造

// ✅ 可辨识联合类型
type RequestState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string; retryable: boolean };

const UserList = () => {
const [state, setState] = useState<RequestState<User[]>>({ 
    status: 'idle'
  });

// TypeScript 的"侦探推理"：知道了 status 就知道有哪些字段
switch (state.status) {
    case'idle':
      return <button onClick={fetchUsers}>加载用户</button>;
    
    case 'loading':
      return <Skeleton count={5} />;
    
    case'success':
      // TypeScript 100% 确定 state.data 存在且是 User[]
      return <ul>{state.data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
    
    case'error':
      return (
        <div>
          <p>出错了：{state.error}</p>
          {state.retryable && <button onClick={fetchUsers}>重试</button>}
        </div>
      );
  }
};

// 返回元组，用 as const 锁定类型
const useLocalStorage = <T,>(key: string, initialValue: T) => {
const [value, setValue] = useState<T>(() => {
    try {
      const stored = localStorage.getItem(key);
      return stored ? (JSON.parse(stored) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setStoredValue = (newValue: T | ((prev: T) => T)) => {
    try {
      const valueToStore = newValue instanceofFunction
        ? newValue(value) 
        : newValue;
      setValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('写入 localStorage 失败:', error);
    }
  };

const removeValue = () => {
    localStorage.removeItem(key);
    setValue(initialValue);
  };

// as const 关键！让 TypeScript 把返回值推断为元组而不是数组
return [value, setStoredValue, removeValue] asconst;
};

// 不加 as const：TypeScript 认为返回的是数组
// 推断类型：(T | ((prev: T) => T) | (() => void))[]
// 调用时：setValue 可能被推断成 (() => void) 类型，报错

// 加了 as const：TypeScript 精确推断为元组
// 推断类型：readonly [T, (newValue: T | ...) => void, () => void]
// 调用时：每个位置的类型都精确，IDE 提示完美

const [theme, setTheme, removeTheme] = useLocalStorage('theme', 'light');
// theme: string ✅
// setTheme: (newValue: string | ((prev: string) => string)) => void ✅
// removeTheme: () => void ✅

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true
  }
}

strict: true
= 开启安全驾驶模式（强制系安全带）
  ↓
  启用 strictNullChecks, strictFunctionTypes 等全套检查

noUncheckedIndexedAccess: true
= 给数组访问装上安全气囊
  ↓
  const arr = [1, 2, 3];
  const item = arr[10];  // 类型变为 number | undefined，必须判断
  item.toFixed();        // ❌ 报错！可能是 undefined

exactOptionalPropertyTypes: true
= 区分"属性不存在"和"属性值为 undefined"
  ↓
  interface Config { timeout?: number }
  const c: Config = { timeout: undefined }; // ❌ 报错！
  const c: Config = {};                     // ✅ 正确

┌─────────────────────────────────────────────────────────────┐
│                 2026 TypeScript + React 架构图               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  tsconfig.json                                             │
│  ┌──────────────────────────────────────┐                  │
│  │ "jsx": "react-jsx"  ← 新 JSX 转换    │                  │
│  │ "strict": true      ← 严格模式        │                  │
│  │ "noUncheckedIndexedAccess": true     │                  │
│  └──────────────────────────────────────┘                  │
│                          ↓                                  │
│  组件层                                                     │
│  ┌─────────────────────────────────────┐                   │
│  │  interface Props { ... }  ← 显式声明 │                   │
│  │  const Comp = (props: Props) => {}  │                   │
│  │  ❌ 不用 React.FC                   │                   │
│  │  ✅ 需要 children 显式写 ReactNode   │                   │
│  └─────────────────────────────────────┘                   │
│                          ↓                                  │
│  状态管理层                                                  │
│  ┌─────────────────────────────────────┐                   │
│  │  可辨识联合类型管理异步状态          │                   │
│  │  type State =                       │                   │
│  │    | { status: 'idle' }             │                   │
│  │    | { status: 'loading' }          │                   │
│  │    | { status: 'success'; data: T } │                   │
│  │    | { status: 'error'; msg: str }  │                   │
│  └─────────────────────────────────────┘                   │
│                          ↓                                  │
│  复用层                                                     │
│  ┌─────────────────────────────────────┐                   │
│  │  泛型组件 <List<T>>                  │                   │
│  │  自定义 Hook + as const 元组         │                   │
│  │  Zod 做运行时校验                    │                   │
│  └─────────────────────────────────────┘                   │
└─────────────────────────────────────────────────────────────┘