Javascript 将泛型React组件转换为TypeScript会引发错误

我正在尝试移植到TypeScript。然而，我面临着一些问题

以下是VSCode中出现错误的屏幕截图：

为了简洁起见，这里有相同的代码：

import React from 'react'
import { type, type as loopedType } from '@camwiegert/typical'
import styles from './styles.module.css'

type Props = {
    steps: Array<any>
    loop: number
    className: string
    wrapper: React.Component
}

const Typical: React.FC<Props> = ({ steps, loop, className, wrapper = 'p' }) => {
    const typicalRef = React.useRef<HTMLElement>(null)
    const Component: string = wrapper
    const classNames: string[] = [styles.typicalWrapper]

    if (className) {
        classNames.unshift(className)
    }

    React.useEffect(() => {
        if (loop === Infinity) {
            type(typicalRef.current, ...steps, loopedType)
        } else if (typeof loop === 'number') {
            type(typicalRef.current, ...Array(loop).fill(steps).flat())
        } else {
            type(typicalRef.current, ...steps)
        }
    }, [typicalRef])

    return <Component ref={typicalRef} className={classNames.join(' ')} />
}

export default React.memo(Typical)

但是它说，

“Component”指的是一个值，但在这里被用作一个类型。您的意思是“组件类型”吗？

靠近

返回

，在

组件

上方加下划线

我也无法将

typicalRef

转换为

typicalRef。当前

总是通过在其下方显示红色的曲线来抛出错误。与

flat（）

以及

classNames.join（“”）

一样

---

我正在为此失去理智。我好像想不出来。想要任何指针吗？

对于组成部分，在props中设置它，而不是一个新变量：

const-Typical:React.FC=（{wrapper:Component='p'}）=>{
返回
}

我认为您必须将

包装器设置为
React.ComponentType
，这是准确的React类型，并直接重命名包装器（不要在正文中重新分配
tsc
可能与混合类型作为字符串混淆），因此您的代码可能会更改如下：

type Props = {
 steps: Array<any>
 loop: number
 className: string
 wrapper: React.ComponentType<React.PropsWithRef<any>>
}

const Typical: React.FC<Props> = ({ steps, loop, className, wrapper: Component = 'p' }) => {
  const typicalRef = React.useRef<HTMLElement>()
  const classNames: string[] = [styles.typicalWrapper]

  if (className) {
    classNames.unshift(className)
  }

  React.useEffect(() => {
    if (loop === Infinity) {
        type(typicalRef.current, ...steps, loopedType)
    } else if (typeof loop === 'number') {
        type(typicalRef.current, ...Array(loop).fill(steps).flat())
    } else {
        type(typicalRef.current, ...steps)
    }
  }, [typicalRef]) 

  return <Component ref={typicalRef} className={classNames.join(' ')} />
}

"compilerOptions": {
  "lib": ["ES2019"]
},

我不能直接用TypeScript解决它，因为我认为TypeScript本身不支持它

但我确实使用
React.createElement
语法解决了这个问题。我的整个代码现在看起来像这样：

import React from 'react'
import { type, type as loopedType } from '@camwiegert/typical'
import styles from './styles.module.css'

type Props = {
    steps: Array<any>
    loop: number
    className?: string
    wrapper: keyof JSX.IntrinsicElements
} & React.HTMLAttributes<HTMLOrSVGElement>

const Typical = ({ steps, loop, className, wrapper: Wrapper = 'p' }: Props) => {
    const typicalRef: React.RefObject<HTMLElement> = React.useRef<HTMLElement>(null)
    const classNames: string[] = [styles.typicalWrapper]

    if (className) {
        classNames.unshift(className)
    }

    const typicalStyles: string = classNames.join(' ')

    React.useEffect(() => {
        if (loop === Infinity) {
            type(typicalRef.current as HTMLElement, ...steps, loopedType)
        } else if (typeof loop === 'number') {
            type(typicalRef.current as HTMLElement, ...Array(loop).fill(steps).flat())
        } else {
            type(typicalRef.current as HTMLElement, ...steps)
        }
    }, [typicalRef])

    return React.createElement(Wrapper, {
        ref: typicalRef,
        className: typicalStyles,
    })
}

export default React.memo(Typical)

从“React”导入React
从“@camwiegert/typical”导入{type，类型为loopedType}
从“./styles.module.css”导入样式
类型道具={
步骤：数组
循环：数字
类名？：字符串
包装器：keyof JSX.intrinsiceelements
}&React.HTMLAttributes
const-Typical=（{steps，loop，className，wrapper:wrapper='p'}:Props）=>{
const typicalRef:React.reobject=React.useRef（null）
常量类名：字符串[]=[styles.typicalWrapper]
if（类名）{
classNames.unshift（className）
}
const-typicalStyles:string=classNames.join（“”）
React.useffect（（）=>{
if（循环===无穷大）{
类型（typicalRef.current作为HtmleElement，…步骤，loopedType）
}else if（循环类型==='number'）{
类型（typicalRef.current作为HTMLElement，…数组（循环）.fill（步骤）.flat（））
}否则{
类型（typicalRef.current作为HtmleElement，…步骤）
}
}，[typicalRef]）
返回React.createElement（包装器{
ref:typicalRef，
类名：typicalStyles，
})
}
导出默认反应备忘录（典型）
VSCode显示的错误有哪些？另外，如果您只是想忽略它们而不实际修复它们，请在行上方添加一个
/@ts ignore
（当然，您应该尝试修复它们）。您是否尝试将变量组件重命名为其他组件？@EmreKoc组件上的第一个错误写在帖子中。阅读
const Component=React.Component | string
下方的行。我很想解决它，而不是忽略它。@FaisalRashid没有必要将它重命名为其他名称，因为
组件
都不是保留关键字，或者我正在从
react
本身解构
组件
，所以我认为即使我重命名它也可以：）我已经在
Props
中这样做了。请参阅
类型道具
定义。我不明白我的代码和你的代码有什么区别？你的代码是设置道具的类型，我的代码是将道具从包装器重命名为组件，所以你可以将它用作标记。基本上你想用常数做什么，没有常数。哦，明白了。但是它仍然在
返回时给我错误，说
'Component'引用了一个值，但在这里被用作一个类型。你的意思是“组件类型”吗？ts（2749）
这个答案可能会有帮助：所以
flat（）
这件事起作用了，但我还是很遗憾地发现了其他3个错误。我完全按照u所说的做了。其他3个是什么？第一个是
组件上的一个，然后
typicalRef。当前
表示
类型为“HTMLElement”的参数| null”不能分配给类型为“HTMLElement”的参数。类型“null”不可分配给类型“HTMLElement”。ts（2345）
&最后在
className={classNames.join（“”）}
上它说
类型“boolean”不可分配给类型“string”。ts（2322）
在
className
上它说
算术运算的左侧必须是“any”类型，“number”、“bigint”或枚举类型。ts（2362）
在您根据我的建议进行更改后，它是否会出现？如果是这样的话，我可以再次看到您完全编辑的代码吗？我刚刚编辑以显示我的完整建议。如果错误消失，您可以复制并再次检查吗？
import React from 'react'
import { type, type as loopedType } from '@camwiegert/typical'
import styles from './styles.module.css'

type Props = {
    steps: Array<any>
    loop: number
    className?: string
    wrapper: keyof JSX.IntrinsicElements
} & React.HTMLAttributes<HTMLOrSVGElement>

const Typical = ({ steps, loop, className, wrapper: Wrapper = 'p' }: Props) => {
    const typicalRef: React.RefObject<HTMLElement> = React.useRef<HTMLElement>(null)
    const classNames: string[] = [styles.typicalWrapper]

    if (className) {
        classNames.unshift(className)
    }

    const typicalStyles: string = classNames.join(' ')

    React.useEffect(() => {
        if (loop === Infinity) {
            type(typicalRef.current as HTMLElement, ...steps, loopedType)
        } else if (typeof loop === 'number') {
            type(typicalRef.current as HTMLElement, ...Array(loop).fill(steps).flat())
        } else {
            type(typicalRef.current as HTMLElement, ...steps)
        }
    }, [typicalRef])

    return React.createElement(Wrapper, {
        ref: typicalRef,
        className: typicalStyles,
    })
}

export default React.memo(Typical)