如何在 React 中 寫 TypeScript 類型

在 React 當中，不要使用讓 TypeScript 變成 AnyScript。好處是咱們要在第二次閱讀，寫重構，維護的時候，會更加的方便。

實際項目中的類型

• 最好將類型抽象出，單獨的放在 types.ts 中，每個組件都有本身的 type 文件，用於保存各類數據的類型。

hooks

useState

• 定義試圖值類型
• 定義試圖引用類型
• 試圖異步更新 使用 async/await
• 避免較多的數據
• 範型約束

useRef

• 引用 dom
• 引用 值
• 引用 卸載防止內存泄漏

# 引用 dom

const Page: React.FC<any> = () => {
    const domRef = useRef<HTMLDivElement>(); # 引用 dom
    const valueRef = useRef<boolean>(false); # 引用基礎類型值
    const refRef = useRef<boolean>({}); # 引用引用類型值
    
    React.useEffect(() => {
        return() {
            domRef.current = undefined; # 卸載 dom 引用，防止內存泄漏
            value.current = false； # 卸載普通值
            refRef.current = {} # 卸載引用類型的值
        }
    }, [])
}
複製代碼

useEffect

專門處理反作用，類型上能講的很少。

Props

props 的類型能說的就比較多了，那麼如何定義 props 的類型？

dva 中的類型

antd 中的類型