TypeScript在React项目中的实战应用指南及技巧

import React from 'react';

// 声明组件接收的属性类型
interface AaaProps {
  name: string; // 必传字符串
  age?: number; // 可选数字
  content: React.ReactNode; // 接收JSX/文本等内容
}

// 函数组件约束Props类型
const Aaa: React.FC<AaaProps> = (props) => {
  return <div>姓名：{props.name}，内容：{props.content}</div>;
};

// 父组件使用：类型不匹配会直接报错
export default function App() {
  return <Aaa name="张三" content={<div>Hello TS</div>} />;
}

React.Node > React.Element > JSX.Element

import React, { useState } from 'react';

export default function App() {
  // 自动推导：num为number类型，setNum为Dispatch<SetStateAction<number>>
  const [num, setNum] = useState(0);
  
  // 手动声明：初始值为undefined，指定num为number类型
  const [count, setCount] = useState<number>();
  
  return <div>num: {num}</div>;
}

import React, { useRef, useEffect } from 'react';

export default function App() {
  // 声明ref为HTMLInputElement类型，初始值null
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // 非空断言+DOM操作：自动提示input的方法（如focus）
    inputRef.current?.focus();
  }, []);
  
  return <input type="text" ref={inputRef} />;
}

import React, { useRef } from 'react';

export default function App() {
  // 声明ref缓存对象类型
  const dataRef = useRef<{ num: number }>(null);
  dataRef.current = { num: 100 }; // 类型匹配才允许赋值
  
  return <div>App</div>;
}

import React, { useReducer } from 'react';

// 声明state类型
interface Data {
  result: number;
}

// 声明action类型
interface Action {
  type: string;
  num: number;
}

// reducer函数：约束入参和返回值类型
function reducer(state: Data, action: Action) {
  switch (action.type) {
    case 'add':
      return { result: state.result + action.num };
    case 'minus':
      return { result: state.result - action.num };
    default:
      return { result: 0 }; // 兜底避免返回值类型不明确
  }
}

export default function App() {
  // useReducer类型自动推导：state为Data类型，dispatch匹配Action类型
  const [res, dispatch] = useReducer(reducer, { result: 0 });
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'add', num: 2 })}>加</button>
      <button onClick={() => dispatch({ type: 'minus', num: 1 })}>减</button>
      <div>结果：{res.result}</div>
    </div>
  );
}

import React, { useMemo, useCallback, memo } from 'react';

export default function App() {
  const [res, dispatch] = useReducer(reducer, { result: 0 });
  
  // useMemo：缓存值，仅依赖项变化时重新计算
  const count = useMemo(() => {
    return res.result * 10;
  }, [res.result]); // 依赖res.result，避免无效计算
  
  // useCallback：缓存函数，避免组件更新时函数重创建
  const handleClick = useCallback(() => {
    console.log('缓存的函数');
  }, []); // 空依赖：组件更新时函数不重新创建
  
  // 结合memo优化子组件：只有props变化时重新渲染
  const Child = memo((props: { cb: () => void }) => {
    return <button onClick={props.cb}>点击</button>;
  });
  
  return <Child cb={handleClick} />;
}

import React, { useRef, useEffect, forwardRef } from 'react';

// 声明子组件：ForwardRefRenderFunction<HTMLInputElement> 约束ref类型
const Child: React.ForwardRefRenderFunction<HTMLInputElement> = (props, ref) => {
  // 将ref转发给内部input
  return <input type="text" ref={ref} />;
};

// 包装子组件，实现ref转发
const WrapChild = forwardRef(Child);

export default function App() {
  // 声明ref为input元素类型
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // 父组件可直接操作子组件的input DOM
    inputRef.current?.focus();
  }, []);
  
  return <WrapChild ref={inputRef} />;
}