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是{{1} }组件，则应编写如下：

Sign

看起来mode是一个字符串文字，可能会很详尽，因此您还可以通过以下操作进行优化：

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

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

2 个答案: