React + TypeScript 实战指南:用类型守护你的组件

TypeScript 为 React 开发带来了强大的类型安全保障,这里解析常见的一些TS写法:

一、组件基础类型

1. 函数组件定义

ts 复制代码
// 显式声明 Props 类型并标注返回值
interface WelcomeProps {
  name: string;
  age?: number; // 可选属性
}

const Welcome: React.FC<WelcomeProps> = ({ name, age = 18 }) => (
  <div>
    Hello {name}, 年龄 {age}
  </div>
);

// React 18+ 需要显式声明 children(如果用到)
interface CardProps {
  children: React.ReactNode; 
}

const Card: React.FC<CardProps> = ({ children }) => (
  <div className="card">{children}</div>
)

2. 类组件写法

ts 复制代码
type CounterState = { count: number };

class Counter extends React.Component<{}, CounterState> {
  state: CounterState = { count: 0 };

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

  render() {
    return <button onClick={this.handleClick}>点击次数:{this.state.count}</button>;
  }
}

二、Props 高级用法

1. 联合类型与类型守卫

ts 复制代码
type User = { 
  id: number;
  type: 'admin' | 'user';
  email?: string;
  accessLevel?: number;
};

const UserProfile = ({ user }: { user: User }) => {
  if (user.type === 'admin') {
    return <div>管理员权限:{user.accessLevel}</div>;
  }
  return <div>用户邮箱:{user.email}</div>;
};

2. 默认值与类型推断

ts 复制代码
interface ButtonProps {
  type?: 'primary' | 'dashed'; // 可选类型自动包含 undefined
  size?: 'large' | 'medium';
}

const MyButton = ({   type = 'primary',   size = 'medium' }: ButtonProps) => (
  <button className={`${type} ${size}`}>按钮</button>
);

三、Hooks 类型实战

1. useState 精确控制

ts 复制代码
const [user, setUser] = useState<User | null>(null); // 联合类型处理异步数据

// 明确数组项类型
const [todos, setTodos] = useState<{ id: string; text: string }[]>([]);

2. useRef 双重用法

ts 复制代码
// 操作 DOM
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (inputRef.current) {
    inputRef.current.focus(); // 需要非空校验
  }
});

// 保存可变值
const timerRef = useRef<number>();
timerRef.current = setInterval(() => {});

3. useContext 类型安全

ts 复制代码
type Theme = 'light' | 'dark';
const ThemeContext = createContext<Theme>('light');

const App = () => (
  <ThemeContext.Provider value="dark">
    <Child />
  </ThemeContext.Provider>
);

const Child = () => {
  const theme = useContext(ThemeContext); // 自动推断为 Theme 类型
  return <div className={theme}>当前主题</div>;
}

四、事件处理与泛型组件

1. 表单事件精准捕获

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

<input onChange={handleChange} />

// 鼠标事件
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
  const rect = e.currentTarget.getBoundingClientRect(); // 正确访问 DOM 属性
};

2. 让组件更灵活:泛型组件

ts 复制代码
interface ListProps<T> {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
}

function GenericList<T>({ data, renderItem }: ListProps<T>) {
  return (
    <ul>
      {data.map((item, i) => (        <li key={i}>{renderItem(item)}</li>
      ))}    </ul>
  );
}

// 使用
<GenericList<string> 
  data={['a', 'b', 'c']} 
  renderItem={(str) => <div>{str.toUpperCase()}</div>} 
/>

五、常见类型问题速查

ts 复制代码
// 1. 类型断言:谨慎使用
const element = document.getElementById('root') as HTMLElement;

// 2. 处理可能未初始化的 ref
const videoRef = useRef<HTMLVideoElement>(null!); // 初始化后使用可使用非空断言

// 3. 处理第三方库类型
import { RouteComponentProps } from 'react-router-dom';

interface MatchParams { id: string; }
type Props = RouteComponentProps<MatchParams>;

const ProductPage: React.FC<Props> = ({ match }) => (
  <div>商品ID:{match.params.id}</div>
);
相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说7 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python