Typescript 给我报错：期望 0 个参数，但实际传入了 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)
   ....
   })
>

现在，我像这样将上下文导入到其他文件中：

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 方法需要一个参数，但是传入的是一个空对象 () => loginWithRedirect({})。可以通过在接口中使用 any 类型来解决该问题，但如果我想明确定义参数类型应该填什么呢？

我尝试过 loginWithRedirect: ({}) => void，但现在 loginWithRedirect: (...p: string[]) => auth0Client.loginWithRedirect(...p) 报错：Type '{}' is not assignable to type 'string'.ts(2322)。

源代码不包含 TypeScript，请访问以下链接：https://github.com/auth0-samples/auth0-react-samples/tree/master/01-Login/src。

请帮忙解决。

- bradrar

---

你的问题标题和描述有些矛盾。标题表明它期望0个参数，这意味着根本不需要任何参数。而描述却表明它期望1个参数。 - Zain Ul Abideen

loginWithRedirect 可以使用什么类型的参数进行调用？ - Ali Faris

抱歉如果不太清楚。我的需求是更改接口 loginWithRedirect: () => void;，以便我可以使用 <button onClick={() => loginWithRedirect({})}>。这意味着我需要在接口中提供一个参数，但我不知道该如何实现。 - bradrar

@Ali 我在接口中使用了 loginWithRedirect: any; 并且它可以正常工作。问题是，我需要明确地定义它。我面临的问题是，如果参数为空，如何在接口中定义一个参数？ <button onClick={() => loginWithRedirect({})} - bradrar

Answer 1

问题首先是：

在接口中，您提供了一个函数的签名，如下所示：

loginWithRedirect: () => void;

这意味着没有参数，而且每当您定义该函数时，必须遵循这个签名，但相反的是，在给出定义时，您却向该函数传递了参数。

解决方案

为什么不像这样做呢？

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

- Zain Ul Abideen

---

是的，我提供了这样的代码loginWithRedirect: () => void;，但我需要做的是更改接口，让它能够接受onClick={() => loginWithRedirect({})}。这样，我将有一个参数来满足 TypeScript的要求。 - bradrar

@bradrar 但是该参数的类型必须与函数签名中的参数类型匹配。 - Zain Ul Abideen

是的，但我不知道如何操作。我已经阅读了有关函数的文档https://www.typescriptlang.org/docs/handbook/functions.html，但这里的示例都带有参数，而在我的情况下，函数为空。 - bradrar

谢谢您的回答，我尝试了一下，现在 onClick={() => loginWithRedirect({})} 的错误是 类型“{}”的参数不能赋值给类型“string[]”的参数。 类型“{}”缺少类型“string[]”的以下属性：length、pop、push、concat，以及 28 个更多。ts(2345) - bradrar

@bradrar 我已经更新了答案，你可以试一下。 - Zain Ul Abideen

谢谢！你之前的回答给了我一个线索！所以我做的是 loginWithRedirect: ({}:object) => void;，现在它正常工作了。你的回答也很有效。非常感谢！ - bradrar

Answer 2

我犯的错误是没有注明参数类型，就像下面这样

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
}

- Ericgit