快捷導(dǎo)航

TypeScript在React項目中的實戰(zhàn)應(yīng)用指南及技巧

更新時間：2026年03月23日 09:25:04 作者：是你的小橘呀

在React項目中集成TypeScript可以顯著提升開發(fā)體驗,通過類型檢查減少運行時錯誤,提高代碼可維護性,這篇文章主要介紹了TypeScript在React項目中實戰(zhàn)應(yīng)用指南及技巧的相關(guān)資料,需要的朋友可以參考下

前言

在前端工程化日益成熟的今天，TypeScript（以下簡稱TS）憑借靜態(tài)類型檢查的優(yōu)勢，已成為React項目開發(fā)的標(biāo)配。本文結(jié)合實際項目討論經(jīng)驗，從組件類型約束、React鉤子應(yīng)用等維度，拆解TS在React項目中的落地技巧，幫助開發(fā)者寫出更嚴(yán)謹(jǐn)、易維護的代碼。

TSX文件與組件類型約束：讓傳參更可控

React項目中.js文件可無縫轉(zhuǎn)為.tsx文件，核心差異在于類型聲明——通過類型約束解決組件傳參混亂、類型不明確的問題。

基礎(chǔ)類型聲明

TS的類型聲明可覆蓋變量、函數(shù)、類等場景，核心目的是「讓類型可追溯」。比如組件傳參時，若子組件未聲明接收的屬性類型，TS會直接報錯，避免運行時因參數(shù)類型錯誤導(dǎo)致的bug。

組件Props類型約束示例

以React函數(shù)組件為例，通過interface聲明Props類型，明確組件可接收的屬性：

import React from 'react';

// 聲明組件接收的屬性類型
interface AaaProps {
  name: string; // 必傳字符串
  age?: number; // 可選數(shù)字
  content: React.ReactNode; // 接收J(rèn)SX/文本等內(nèi)容
}

// 函數(shù)組件約束Props類型
const Aaa: React.FC<AaaProps> = (props) => {
  return <div>姓名：{props.name}，內(nèi)容：{props.content}</div>;
};

// 父組件使用：類型不匹配會直接報錯
export default function App() {
  return <Aaa name="張三" content={<div>Hello TS</div>} />;
}

這種方式可靈活擴展/修改Props類型，減少團隊協(xié)作中「傳參格式不一致」的溝通成本。

React類型層級關(guān)系

聲明JSX相關(guān)類型時，需理清三個核心類型的包含關(guān)系：

React.Node > React.Element > JSX.Element

JSX.Element：最窄的類型，僅包含JSX節(jié)點；
React.Element：包含所有React元素（如原生DOM元素、自定義組件）；
React.ReactNode：最寬泛，包含Element、字符串、數(shù)字、null、undefined等。

日常開發(fā)中，描述接收J(rèn)SX的參數(shù)時，使用React.ReactNode或React.ReactElement即可滿足大部分場景，無需過度細化。

React核心鉤子的TS應(yīng)用：精準(zhǔn)約束類型

React的內(nèi)置鉤子（Hooks）結(jié)合TS后，能讓狀態(tài)、DOM操作、性能優(yōu)化更可控，以下是高頻鉤子的類型用法。

useState：自動推導(dǎo)+手動聲明

useState會根據(jù)初始值自動推導(dǎo)類型，也可手動聲明類型適配復(fù)雜場景：

import React, { useState } from 'react';

export default function App() {
  // 自動推導(dǎo)：num為number類型，setNum為Dispatch<SetStateAction<number>>
  const [num, setNum] = useState(0);
  
  // 手動聲明：初始值為undefined，指定num為number類型
  const [count, setCount] = useState<number>();
  
  return <div>num: {num}</div>;
}

useRef：DOM操作與變量緩存雙場景

useRef有兩大用途，TS需針對性聲明類型：

場景1：操作DOM元素

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} />;
}

場景2：緩存變量

import React, { useRef } from 'react';

export default function App() {
  // 聲明ref緩存對象類型
  const dataRef = useRef<{ num: number }>(null);
  dataRef.current = { num: 100 }; // 類型匹配才允許賦值
  
  return <div>App</div>;
}

useReducer：復(fù)雜狀態(tài)的類型約束

useReducer用于管理復(fù)雜狀態(tài)，需通過interface聲明state和action類型，確保reducer函數(shù)的入?yún)?返回值類型一致：

import React, { useReducer } from 'react';

// 聲明state類型
interface Data {
  result: number;
}

// 聲明action類型
interface Action {
  type: string;
  num: number;
}

// reducer函數(shù)：約束入?yún)⒑头祷刂殿愋?
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類型自動推導(dǎo)：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>結(jié)果：{res.result}</div>
    </div>
  );
}

useCallback & useMemo：性能優(yōu)化+類型緩存

這兩個鉤子用于性能優(yōu)化，核心是「緩存函數(shù)/值」，TS無需額外聲明類型（自動推導(dǎo)），重點關(guān)注依賴項：

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：緩存函數(shù)，避免組件更新時函數(shù)重創(chuàng)建
  const handleClick = useCallback(() => {
    console.log('緩存的函數(shù)');
  }, []); // 空依賴：組件更新時函數(shù)不重新創(chuàng)建
  
  // 結(jié)合memo優(yōu)化子組件：只有props變化時重新渲染
  const Child = memo((props: { cb: () => void }) => {
    return <button onClick={props.cb}>點擊</button>;
  });
  
  return <Child cb={handleClick} />;
}

useEffect/useLayoutEffect：無需額外類型標(biāo)注

這兩個鉤子的回調(diào)函數(shù)返回值（清理函數(shù)）或入?yún)⒕鶡o需手動聲明類型，TS會根據(jù)回調(diào)函數(shù)自動推導(dǎo)。

子組件與父組件的ref傳遞：解決DOM穿透問題

若父組件想獲取子組件內(nèi)部的DOM元素（如input），直接傳遞ref會報錯，需通過React.forwardRef實現(xiàn)ref轉(zhuǎn)發(fā)，并聲明正確的類型：

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

// 聲明子組件：ForwardRefRenderFunction<HTMLInputElement> 約束ref類型
const Child: React.ForwardRefRenderFunction<HTMLInputElement> = (props, ref) => {
  // 將ref轉(zhuǎn)發(fā)給內(nèi)部input
  return <input type="text" ref={ref} />;
};

// 包裝子組件，實現(xiàn)ref轉(zhuǎn)發(fā)
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} />;
}