缺少接口属性错误，但实际上并没有丢失

Question

我目前正在将一个大项目切换到 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>
)

Sign 定义如下：

import { Router, Link, Redirect, RouteComponentProps } from '@reach/router'

interface DefaultProps extends RouteComponentProps {
  '*': string
}

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

我收到以下错误：

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

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

有什么问题？

Answer 1

您将path 传递给Sign 组件，它应该包含在您的界面中。接口应该包含所有传递给你的组件的道具，所以如果你没有将* 传递给它，TS 会抛出一个错误。

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

以下是关于该主题的解释： https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html https://levelup.gitconnected.com/usetypescript-a-complete-guide-to-react-hooks-and-typescript-db1858d1fb9c

Answer 2

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

{ *: mode } 是干什么用的？到目前为止，它唯一假定的用法是：

<Sign path='sign/*'/>

如果我们要满足您的道具定义，它应该是：

Sign path='sign/*' *='somethingelse' />

在这种情况下， * 不是有效的道具，因为它不是有效的变量名。

Sign 需要的唯一道具是path，RouteComponentProps 只是为您提供了它。

在您的代码中，您似乎也在使用mode 作为变量，而不是*，如果您的意思是mode 是Sign 组件中的可选道具，那么它应该写成如下：

interface DefaultProps extends RouteComponentProps {
  mode?: string
}

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

看起来 mode 是一个可能很详尽的字符串文字，因此您也可以通过以下方式进行优化：

type mode = 'up' | 'down'