时间戳

首页 > 解决方案 > 没有重载匹配此调用。Overload 1 of 2 -- 昨天同一个项目工作

css - 没有重载匹配此调用。Overload 1 of 2 -- 昨天同一个项目工作

问题描述

我打开了我从昨天开始就没有接触过的项目。

现在，我收到一个 tsx 组件中的对象的打字稿错误。

<Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive} id='Drop zone'>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p>
          :
          !userHasntDropped ?
            <DropHere />
            :
            <FileCard file={dropped} isDragActive={isDragActive} selected={selected} />
      }
</Shadowed>

Dropped 是我从 redux 状态获取的文件：

const dropped: any = useSelector(state => left ? state.files.fileLeft : state.files.fileRight);

Shadowed 是一个样式组件：

const Shadowed = styled.div`

  height:${props => props.dropped && props.dropped.length > 0 ? '100px' : 'calc(50% - 50px)'};
  width:${props => props.dropped && props.dropped.length > 0 ? '240px' : '25%'};
  align-items:center;
  display:flex;
  justify-content:center;
  pointer-events: auto;
  align-self:${props => props.dropped && props.dropped.length > 0 ? 'flex-end' : 'center'};
  margin-bottom:25px;
  margin-top:25px;

  border:${props => props.dropped && props.dropped.length > 0 ? '1px solid rgba(0,0,0,0.20)' : 'null'};
  cursor:pointer;

  border-radius:8px;
    box-shadow:${props => props.dropped && props.dropped.length > 0 ? null : props.isDragActive ? '0px 0px 25px 5px rgba(0,0,0,0.15)' : '4px 4px 8px 0px rgba(0,0,0,0.06), -4px -4px 16px 10px #fff'};
    background:${props => props.isDragActive ? 'white' : 'rgb(252, 253, 254)'};

  &:hover{
    box-shadow:0px 0px 25px 5px rgba(0,0,0,0.15);
    background:white;
  }
`

我得到的错误：

C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx
TypeScript error in C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx(62,46):
No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'dropped' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'dropped' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 255 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 255 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.  TS2769

    60 | 
    61 |   return (
  > 62 |     <Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive}>
       |                                              ^
    63 |       <input {...getInputProps()} />
    64 |       {
    65 |         isDragActive ?
  1. 我尝试切换回以前的打字稿版本，但遇到了同样的错误。
  2. 我尝试将类型添加到 redux 的初始状态
  3. 我已经通过此解决方案尝试过是否是样式组件错误：https ://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384

这里会发生什么？

先感谢您

标签： cssreactjstypescript

解决方案

我已将接口定义添加到样式组件中，如下所示：

interface ShadowedProps {
  readonly isDragActive: boolean;
  readonly dropped: any;
};



const Shadowed = styled.div<ShadowedProps>`
  {*** CSS here ***}
`

现在它起作用了。这清楚地记录在样式组件上，这里：https ://styled-components.com/docs/api#typescript

我不知道我们必须明确地这样做。到目前为止它仍然有效，这真的很奇怪，我不知道是什么让它意识到我使用它很糟糕。

推荐阅读