1

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

有什么问题？

4

2 回答 2

0

您正在传递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-和-typescript-db1858d1fb9c

于 2019-12-21T01:11:49.570 回答
0 
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'

于 2019-12-21T06:35:26.203 回答