React项目中使用TS, jsx语法与ts语法冲突解决方法

React项目中使用TS, jsx语法与ts语法冲突

报错示例

    const childrenDom = <T>(params:T):JSX.Element => {  // JSX 元素“T”没有相应的结束标记。 ts(17008)找不到名称“T”。 ts(2304)
        return (
            <div className="title">
                {params}
            </div>
        )
    }

修正只需要在<T>中的T后边增加一个逗号就能避免语法冲突

const childrenDom = <T,>(params:T):JSX.Element => {
        return (
            <div className="title">
                {params}
            </div>
        )
    }

或者 以:方式定义

const childrenDom: <T>(params: T) => JSX.Element = (params) => {
        return (
            <div className="title">
                {params}
            </div>
        )
     }