如何在 React 中 写 TypeScript 类型

372 阅读1分钟

在 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 中的类型