导入时道具类型出错，Ts(2322)

Question

有人能帮我吗？ 我正在使用 TypeScript、StyledComponent 和 React 与 Create React App。 此错误发生在构建期间，无法消除。

// browser and terminal error

TypeScript error in ./src/index.tsx(4,1):
Type '{ alt: string; src: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'alt' does not exist on type 'IntrinsicAttributes'.  TS2322

// ./src/components/Image/index.tsx

import React from 'react'
import Styled from 'styled-components/macro'

interface ImageInterface {
  alt?: string | undefined
  src: string
}

const Image = Styled.img`
  max-width: 100%;
`

export default () => ({ alt, src }: ImageInterface) => (
  <Image alt={alt || 'My alternative text'} src={src} />
)

// ./src/index.tsx

import React from 'react'
import Image from './components/Image'

<Image src="https://cjpatoilo.com/initify/artwork.png" />

// ./package.json

  "dependencies": {
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^4.3.5",
    "@types/styled-components": "^4.1.19",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "styled-components": "^4.3.2",
    "typescript": "^3.6.3"
  },
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
  },

我希望正常的图像编译组件没有错误

Answer 1

问题可能在您的./src/components/Image/index.tsx文件中。 默认导出是返回组件的 function。 但它在./src/index.tsx中被使用，就好像它是一个 function 组件一样。

第一个选项是删除这个包装 function：

// ./src/components/Image/index.tsx

export default ({ alt, src }: ImageInterface) => (
  <Image alt={alt || 'My alternative text'} src={src} />
)

或者，调用此方法，然后将返回值用作组件。

// ./src/index.tsx

import Fn from './components/Image'

const Image = Fn();

<Image src="https://cjpatoilo.com/initify/artwork.png" />