第10章：TypeScript 与现代前端开发

TypeScript 与 React（Props、State 类型）

1. 为什么在 React 中使用 TypeScript？

TypeScript 为 React 开发提供了以下核心优势：

  • 类型安全的组件：通过类型检查避免 props 和 state 的错误使用
  • 更好的代码提示：IDE 能基于类型定义提供准确的自动补全
  • 可维护性：明确的接口定义使组件契约更清晰

2. 定义组件 Props 类型

函数组件示例

interface UserCardProps {
  name: string;
  age: number;
  isActive?: boolean;  // 可选属性
  onClick: () => void;
}

const UserCard: React.FC<UserCardProps> = ({ name, age, isActive = true, onClick }) => {
  return (
    <div onClick={onClick}>
      <h2>{name}</h2>
      <p>Age: {age} | Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
};

类组件示例

interface CounterProps {
  initialValue?: number;
}

interface CounterState {
  count: number;
}

class Counter extends React.Component<CounterProps, CounterState> {
  state = {
    count: this.props.initialValue || 0
  };

  increment = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };
}

3. 处理复杂 State 类型

联合类型场景

type LoadingState = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success', data: ApiResponse }
  | { status: 'error', error: Error };

function DataLoader() {
  const [state, setState] = React.useState<LoadingState>({ status: 'idle' });
  
  // 类型保护确保安全访问
  if (state.status === 'success') {
    console.log(state.data); // 安全访问
  }
}

4. 事件处理类型

React 提供了完整的类型定义：

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

5. 高级模式

泛型组件

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

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

// 使用
<List<{ id: number, name: string }> 
  items={users} 
  renderItem={(user) => <li key={user.id}>{user.name}</li>} 
/>

6. 最佳实践

  1. 避免过度使用 any：即使是复杂类型也应明确定义
  2. 合理使用类型断言：仅在确信类型时使用 as 语法
  3. 利用 Utility Types：
    type PartialProps = Partial<UserCardProps>; // 所有属性变为可选
type ReadonlyProps = Readonly<UserCardProps>; // 只读属性

7. 常见问题解决方案

问题：第三方库缺少类型定义

npm install --save-dev @types/library-name

问题：动态属性传递

const dynamicProps = {
  [key: string]: string | number
} as const;

通过结合 TypeScript 的类型系统与 React 的组件模型，可以构建出既灵活又可靠的应用程序。

Last Updated::