React组件的TS类型

发布于:

平时常用的类型在@types/react这个包里，cra已经引入了。

JSX类型

如果你想描述一个jsx类型，使用React.ReactElement。

比如

interface AaaProps {
  name: string;
  content: React.Reactelement;
}

这样就只能传入jsx类型

如果有时需要传入number,null呢？

换成ReactNode就好了

interface AaaProps {
  name: string;
  content: React.ReactNode;
}

ReactNode 包含 ReactElement、或者 number、string、null、boolean 等可以写在 JSX 里的类型。

这三个类型的关系 ReactNode > ReactElement > JSX.Element。

所以，一般情况下，如果你想描述一个参数接收 JSX 类型，就用 ReactNode 就行。

函数组件类型

FC 和 FunctionComponent 等价，参数是 Props，返回值是 ReactNode

const Aaa:React.FunctionComponent<AaaProps> = (props) =>{
    return <div>aaa,{props.name}{props.content}</div>
}

function Aaa2(props:AaaProps) {
    return <div>aaa,{props.name}{props.content}</div>
}

类型定义

type FC<p = {}> = FunctionComponent<p>;

interface FuctionComponent<p = {}> {
  (props: P, context?: any): ReactNode;
  propsTypes?: WeakValidationMap<p> | undefined;
  contextTypes?: ValidationMap<p> | undefined;
  defultProps?: Partial<p> | undefined;
  displayNmae?: string | undefined;
}

Hook的类型

useState

一般用推导的类型，或者手动声明。

useEffect 和 useLayoutEffect 没有类型参数。

useRef

作为可以保存dom引用或者其他内容的钩子，它的类型有两种。

保存dom引用时，参数需要传个null，不然会报错

const ref = useRef<HTMLDivElement>(null);

而保存别的内容的时候，不能传 null，不然也会报错，说是 current 只读,原因是当你传入 null 的时候，返回的是 RefObject，它的 current 是只读的。而不传 null 的时候，返回的 MutableRefObject，它的 current 就可以改了。因为 ref 既可以保存 dom 引用，又可以保存其他数据，而保存 dom 引用又要加上 readonly，所以才用 null 做了个区分。

**传 null 就是 dom 引用，返回 RefObject，不传就是其他数据，返回 MutableRefObject。**所以，这就是一种约定，知道传 null 和不传 null 的区别就行了。

参数类型

propsWithChildren

就是给 Props 加了一个 children 属性。

CSSProperties

有时候组件可以通过 props 传入一些 css 的值，这时候怎么写类型呢？

用 CSSProperties。

HTMLAttributes

如果你写的组件希望可以当成普通 html 标签一样用，也就是可以传很多 html 的属性作为参数呢？

那可以继承 HTMLAttributes。

ComponentProps

效果与HTMLAttributes一样。

EventHandler

很多时候，组件需要传入一些事件处理函数，这种参数就要用 xxxEventHandler 的类型，比如 MouseEventHandler、ChangeEventHandler 等，它的类型参数是元素的类型。

总结