Question

在带有反应的打字稿中，我想制作一个组件，该组件依赖于名为tagName的属性而仅允许适当的其他属性。

例如：<SafeHTML tagName="div" href="https://www.google.com" />应该给出错误，因为href不是标签div的属性。但是<SafeHTML tagName="a" href="https://www.google.com" />应该可以工作。

使用下面的代码，我可以使它工作，但前提是必须指定type参数。（<SafeHTML<'div'> tagName="div" href="https://www.google.com" />）

我的测试代码：

import React from 'react'

type PropsArg<T> = T extends React.DetailedHTMLFactory<infer U, infer T2> ? U : never

interface SafeHTMLProps<TAGNAME>{
  childHtml: string
  tagName: TAGNAME
}

function checkHTML(h: string ) {
    return h
}

export class SafeHTML<TAGNAME extends keyof React.ReactHTML> extends React.PureComponent<SafeHTMLProps<TAGNAME> & PropsArg<React.ReactHTML[TAGNAME]>> {

    render() {

        return React.createElement(this.props.tagName, {
            ...this.props,
            dangerouslySetInnerHTML: { __html: checkHTML(this.props.childHtml) },
        })
    }
}


function testRenderSyntax() {
    return <SafeHTML tagName='a' childHtml="test" href='2'/>
}


function testRenderSyntax2() {
    // should give an error because href is not allowed for div
    return <SafeHTML childHtml="test" tagName='div' href='s'/>
}


function testRenderSyntax3() {
    // here it gives the error correctly
    return <SafeHTML<'div'> childHtml="test" tagName='div' href='s'/>
}

因此，它似乎不能与参数推论一起正常工作，但可以与显式类型参数一起工作。有没有办法使它与自动类型推断一起使用，或者有其他想法如何实现SafeHTML类型安全？

类型参数推断未正确约束类型

0 个答案: