时间戳

首页 > 解决方案 > 打字稿和钩子

reactjs - 打字稿和钩子

问题描述

谁能告诉我使用 Typescript 将此钩子转换为类型安全版本的最佳方法。它是一个简单的切换，可以在切换状态下显示不同的“事物”。

使用切换.js

const useToggleButton = ({on,off}) => {
  const [toggle, setToggle] = React.useState(false)

  const ToggleButton = () => (
    <div
      role="button"
      onClick={() => setToggle(!toggle)}
      data-testid="portal-toggle-btn"
    >
      {toggle? on : off}
    </div>
  )
  return [ToggleButton, toggle, setToggle]
}

问题是它返回一个包含组件、状态和 setState 函数的数组。我的尝试在下面，但我得到了错误

TS2605: JSX element type 'IReturnType' is not a constructor function for JSX elements.   Type 'IReturnType' is missing the
following properties from type 'Element': type, props, key

TS2739: Type '(boolean | Dispatch<SetStateAction<boolean>>)[]' is
missing the following properties from type 'IReturnType': component,
state, func

使用切换.tsx

import * as React from 'react'

interface IToggleBntProps {
  on: any
  off: any
}

interface IState {
  bol: boolean
}

interface IReturnType {
  component: React.FunctionComponent
  state: boolean
  func: (bol: boolean) => IState
}

const useToggleButton = ({ on, off }: IToggleBntProps): IReturnType => {
  const [toggle, setToggle] = React.useState(false)

  const ToggleButton = () => (
    <div
      role="button"
      onClick={() => setToggle(!toggle)}
      data-testid="portal-toggle-btn"
    >
      {toggle ? on : off}
    </div>
  )
  return [ToggleButton, toggle, setToggle]
}

export default useToggleButton

标签： reactjstypescriptreact-hooks

解决方案

TypeScript 实际上可以自动找出大多数这些类型！

在下面的代码中，在 return 语句末尾说as const( a const assertion[() => JSX.Element, boolean, React.Dispatch<React.SetStateAction<boolean>>] ) 可以让 TypeScript 正确推断出你想要的返回类型：

如果你想明确一点，你可以这样做type IReturnType = [() => JSX.Element, boolean, React.Dispatch<React.SetStateAction<boolean>>]，但那是冗长且不必要的。

interface IToggleBntProps {
  on: any
  off: any
}

const useToggleButton = ({ on, off }: IToggleBntProps) => {
  const [toggle, setToggle] = React.useState(false)

  const ToggleButton = () => (
    <div
      role="button"
      onClick={() => setToggle(!toggle)}
      data-testid="portal-toggle-btn"
    >
      {toggle ? on : off}
    </div>
  )

  // saying 'as const' here means that TypeScript automatically
  // knows that this should be a tuple type of three elements.
  // Not you need TypeScript 3.4 or newer 
  return [ToggleButton, toggle, setToggle] as const;
}

export default useToggleButton

推荐阅读