一、TypeScript与React 19

1.1 JSX Transform变化

React 17+引入了新的JSX Transform，不再需要导入React：

// 新写法（React 17+）
const Component = () =>Hello;

1.2 React.FC的问题

// 问题：children类型不明确
const BadComponent: React.FC = () =>Content;

// 推荐：使用函数声明
const GoodComponent = ({ name, children }: { name: string; children: React.ReactNode }) => {
  return{name}: {children};
};

二、泛型组件设计

2.1 基础泛型组件

interface ListProps{
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List({ items, renderItem, keyExtractor }: ListProps) {
  return ({items.map((item) => ({renderItem(item)}))});
}

2.2 泛型Hooks

function useLocalStorage(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}

三、可辨识联合类型

3.1 基础用法

type LoadingState = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: User[] }
  | { status: 'error'; error: string };

function UserList({ state }: { state: LoadingState }) {
  switch (state.status) {
    case 'success':
      return{state.data.map(user =>{user.name})};
    case 'error':
      return错误: {state.error};
  }
}