打字稿和钩子

Question

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

useToggle.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]
}

问题是它 returns 一个包含组件、状态和 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

useToggle.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

Answer 1

TypeScript 实际上可以自动找出其中的大部分类型！

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

如果你想要明确，你可以做 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

打字稿和钩子

Typescript and hooks

typescript

reactjs

react-hooks