props与TypeScript

props与TypeScript基础使用

为组件prop添加类型，本质是给函数的参数做类型注解，可以使用type对象类型或者interface接口来做注解

具体演示代码如下：

import { useState } from 'react';

// 方法一：
// type Props = {
//   className: string
// }

// 方法二：
interface Props {
  className: string,
  title?: string // 可选项
}

type User = {
  name: string,
  age: number
}

function Button(props: Props) {
  const { className } = props;

  return <button className={className}>按钮</button>
}

function App() {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      apo:
      {user?.age}
      {user?.name}

      <Button className="test" />
    </div>
  )
}

export default App;

props与TypeScript - 为children添加类型

children是一个比较特殊的prop，支持多种不同类型数据的传入，需要通过一个内置的ReactNode类型来做注解


具体演示代码如下：

type Props = {
  children?: React.ReactNode // ?:代表可选
}

function Button(props: Props) {
  const { children } = props;

  return (
    <button>{children}</button>
  )
}

function App() {
  return (
    <Button>
      <div style={{ color: 'red' }}>
        按钮
      </div>
    </Button>
  )
}

export default App;

props与TypeScript - 为事件prop添加类型

组件经常执行类型为函数的prop实现子传父，这类prop重点在于函数参数类型的注解

说明：
1. 在组件内部调用时需要遵守类型的约束，参数传递需要满足要求
2. 绑定prop时如果绑定内联函数直接可以推断出参数类型，否则需要单独注解匹配的参数类型

演示代码如下：


type Props = {
  onGetMsg?: (msg: string) => void
}

function Son(props: Props) {
  const { onGetMsg } = props;

  const clickHandler = () => {
    // Props内部强制要求传字符串因此需要添加
    onGetMsg?.("this is msg");
  }

  return (
    <button onClick={clickHandler}>sendMsg</button>
  )
}

function App() {
  const getMsgHandler = (msg: string) => {
    // 单独拎出来就必需注解
    console.log(msg)
  }

  return (
    <div>
      {/* 内联绑定可以直接推导出来是string类型，所以可以直接这么写 */}
      <Son onGetMsg={(msg) => console.log(msg)} />

      {/* 单独拎出来就必需注解 */}
      <Son onGetMsg={getMsgHandler} />
    </div>
  )
}

export default App;

props与TypeScript - 获取dom（useRef）

获取dom的场景，可以直接把要获取的dom元素的类型当场泛型参数传递给useRef，可以推导出.current属性的类型


演示代码如下：

import { useEffect, useRef } from "react";

function App() {
  const inputRef = useRef<HTMLInputElement>(null)
  const spanRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    console.log(inputRef, spanRef);
    inputRef.current?.focus();
  }, [])

  return (
    <div>
      <input ref={inputRef} />
      <span ref={spanRef}>111</span>
    </div>
  )
}

export default App;

props与TypeScript - 引用稳定的存储器（useRef）

把useRef当成引用稳定的存储器使用的场景可以通过泛型传入联合类型来做，比如定时器的场景


演示代码如下：

import { useEffect, useRef } from "react";

function App() {
  const timerRef = useRef<number | undefined>(undefined)

  useEffect(() => {
    timerRef.current = setInterval(() => {
      console.log(1);
    }, 1000);

    return () => {
      clearInterval(timerRef.current)
    }
  }, [])

  return (
    <div>
      哈哈
    </div>
  )
}

export default App;