Typescript is giving me an error: Expected 0 arguments, but got 1

Question

我想以正确的方式定义接口，但我遇到了麻烦，因为它需要一个参数，即使参数是空的。

我正在使用 useContext 并且我这样定义接口：

    //react-auth0-spa.tsx
    interface Auth0Context {
        ......
        loginWithRedirect:  () => void; //I know this is the problem but I don't know what to define.
        ......
     }

在提供商中，value 是：

 //react-auth0-spa.tsx
 <Auth0Context.Provider
     value=({
  ....
  loginWithRedirect: (...p: string[]) => auth0Client.loginWithRedirect(...p)
   ....
   })
>

现在，我 import 其他文件的上下文如下： const { isAuthenticated, loginWithRedirect, logout } = useAuth0()

这就是错误发生的地方

///components/NavBar.tsx
const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
<div>
      {!isAuthenticated && (
        <button onClick={() => loginWithRedirect({})}>Log in</button> //Expected 0 arguments, but got 1
      )}
</div>

所以问题是 loginWithRedirect 需要 1 个参数，但 () => loginWithRedirect({}) 是一个空对象。在接口里面使用any可以解决这个问题，但是如果我想显式定义它应该放什么？

我试过 loginWithRedirect: ({}) => void 但现在 loginWithRedirect: (...p: string[]) => auth0Client.loginWithRedirect(...p) 给我这样的错误 Type '{}' is not assignable to type 'string'.ts(2322)

没有打字稿的源代码是 https://github.com/auth0-samples/auth0-react-samples/tree/master/01-Login/src

请帮忙。

Answer 1

问题排在首位的是：

您在界面中提供了这样一个函数的签名：

loginWithRedirect: () => void;

这意味着 没有参数 并且每当你定义该函数时你将服从这个签名但相反你将参数传递给给出函数的定义。

解决方案

为什么不这样做呢？

//react-auth0-spa.tsx
    interface Auth0Context {
        ......
        loginWithRedirect:  (p: object) => void;
        ......
     }

Answer 2

我的错误是没有提到参数类型，比如undernetah

interface Props {
  openSnackbarHandler: () => void
}
export const app:React.FC<Props> = ({ openSnackbarHandler }) => {

   openSnackbarHandler("Password has been changed successfully!")

}

// method passed as props
const openSnackbarHandler: (mesg: string) => {
         console.log(mesg);
}

只需在参数中定义类型：

interface Props {
  openSnackbarHandler: (mesg: string) => void
}

Typescript is giving me an error: Expected 0 arguments, but got 1

Typescript is giving me an error: Expected 0 arguments, but got 1

reactjs

typescript

use-context