Reactjs 缺少接口属性错误，但它为'；事实上，它并没有丢失_Reactjs_Typescript_Reach Router

Reactjs 缺少接口属性错误，但它为'；事实上，它并没有丢失

reactjs typescript

Reactjs 缺少接口属性错误，但它为'；事实上，它并没有丢失,reactjs,typescript,reach-router,Reactjs,Typescript,Reach Router,我目前正在将一个大项目转换为TypeScript。我是个新手，不习惯因此，使用@reach/router，我有以下路由： import { Router } from '@reach/router' export default () => ( <main id='container'> <div> <Error> <Router> <Sign path='sign/*'/

我目前正在将一个大项目转换为TypeScript。我是个新手，不习惯

因此，使用

@reach/router

，我有以下路由：

import { Router } from '@reach/router'

export default () => (
  <main id='container'>
    <div>
      <Error>
        <Router>
          <Sign path='sign/*'/>
          <Dashboard path='/'/>
        </Router>
      </Error>
    </div>
  </main>
)

我得到以下错误：

Property ''*'' is missing in type '{ path: string; }' but required in type 'DefaultProps'.  TS2741

    29 |       <Error>
    30 |         <Router>
  > 31 |           <Sign path='sign/*'/>
       |            ^

属性“*”在类型“{path:string；}”中丢失，但在类型“DefaultProps”中是必需的。TS2741
29 |       
30 |         
> 31 |           
|            ^

有什么问题吗？

您正在将

路径

传递到

符号

组件，它应该包含在您的界面中。接口应该包括传递给组件的所有道具，所以如果您没有传递

，TS将抛出一个错误

此外，最好将命名导出和React.FC组件与TypeScript一起使用

以下是关于该主题的解释：

您正在将

路径

传递给

符号

组件，它应该包含在您的界面中。接口应该包括传递给组件的所有道具，所以如果您没有传递

，TS将抛出一个错误

此外，最好将命名导出和React.FC组件与TypeScript一起使用

以下是关于该主题的解释：

{*：mode}

的作用是什么？到目前为止，它的唯一假定用途是：

<Sign path='sign/*'/>

在本例中，*不是有效的属性，因为它不是有效的变量名

Sign

所需的唯一道具是

path

，该道具仅为您提供

在您的代码中，您似乎也在使用

模式

作为变量，而不是

，如果您的意思是

模式

是

符号

组件中的可选道具，则应按以下方式编写：

interface DefaultProps extends RouteComponentProps {
  mode?: string
}

export default ({ mode }: DefaultProps) => {
  return (
    <div id='sign'>
      <Router className={cn({ signup: mode === 'up' })}>
        // ...other routes
      </Router>
    </div>
  )
}

interface DefaultProps扩展了RouteComponentProps{
模式？：字符串
}
导出默认值（{mode}:DefaultProps）=>{
返回(
//…其他路线
)
}

它看起来也是一个字符串文字，可能是详尽的，因此您也可以通过执行以下操作进行优化：

type mode='up'|'down'

{*：mode}