Typescript 如何使动态类型可调用（react custom hook）

假设我有一个自定义钩子，在一个数组中返回3个东西

export const useInput = (store: string) => {
  const [value, setValue] = React.useState(store);

  const bind = {
    value,
    onChange: (e: InputChangeEvent) => {
      setValue(e.target.value)
    }
  } 

  const reset = () => {
    setValue(store)
  }

  return [value, bind, reset]
}

并在组件中使用它

const SomeComponent = () => {
  const [name, bindName, resetName] = useInput('')
  const [email, bindEmail, resetEmail] = useInput('')
  const [confirmEmail, bindConfirmEmail, resetConfirmEmail] = useInput('')

  const onSubmitHandler = (e: FormSubmitEvent) => {
    e.preventDefault()
    console.log(`${name} ${email} ${confirmEmail}`)
    resetName();
  }
  return (
    <React.Fragment>
      <form onSubmit={onSubmitHandler}>
        <div className={styles.modalTitle}>
          {homeText.action}
        </div>
        <div className={styles.textInputContainer}>
          <input type="text" placeholder={homeText.plName} {...bindName}/>
          <ErrorMessage message={'sad'}/>
        </div>
        <div className={styles.textInputContainer}>
          <input type="email" placeholder={homeText.plEmail} {...bindEmail}/>
        </div>
        <div className={styles.textInputContainer}>
          <input type="email" placeholder={homeText.plConfirm} {...bindConfirmEmail}/>
        </div>
        <button>Submit</button>
      </form>
    </React.Fragment>
  )
}

---

这里的主要问题是

useInput

的返回类型是一个项目数组，其类型是您在

return[value，bind，reset]

中返回的3个值的交集，而不是您需要的元组

您可以使用

as const

要求typescript将数组值改为不可变元组，这将

useInput

的返回类型更改为元组：

return [value, bind, reset] as const

---

这里的主要问题是

useInput

的返回类型是一个项目数组，其类型是您在

return[value，bind，reset]

中返回的3个值的交集，而不是您需要的元组

您可以使用

as const

要求typescript将数组值改为不可变元组，这将

useInput

的返回类型更改为元组：

return [value, bind, reset] as const