使用自定义jsxFactory时出现jsx错误vscode

时间:2020-06-24 11:56:30

标签: javascript typescript dom jsx transpiler

我正在尝试使用tsx而不使用像React这样的库。我只想要jsx的语法糖。
因此,我遵循以下article实现了这一目标。归结为以下内容(如果我理解正确的话):

将此添加到您的打字稿项目:

function DOMparseChildren(children: any) {
   return children.map((child: any) => {
        if(typeof child === 'string') {
            return document.createTextNode(child);
        }
        return child;
    })
}

function nonNull(val: any, fallback: any) { return Boolean(val) ? val : fallback };

function DOMparseNode(element: any, properties: any, children: any) {
    const el = document.createElement(element);
    Object.keys(nonNull(properties, {})).forEach(key => {
        el[key] = properties[key];
    })
    DOMparseChildren(children).forEach((child: any) => {
        el.appendChild(child);
    });
    return el;
}

function DOMcreateElement(element: any, properties: any, ...children: any) {
    if(typeof element === 'function') {
        return element( { ...nonNull( properties, {} ), children } );
    }
    return DOMparseNode(element, properties, children);
}

此代码隐藏了由打字稿生成的jsx,以进行函数调用以添加Dom元素。 但是现在在我的.tsx文件中,出现以下错误:

JSX元素隐式地具有“ any”类型,因为不存在接口“ JSX.IntrinsicElements”。

我的.tsx文件如下所示:

/// <reference path="./Helper-Functions/jsx-to-dom.ts" />

<div><strong>wow</strong></div>

为清楚起见,在问题图片下面: enter image description here

我的tscofig文件如下所示:

{ 
    "compilerOptions": { 
        "target": "es5",
        "module": "None",
        "jsx": "react",
        "jsxFactory": "DOMcreateElement",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "pretty": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noImplicitAny": true,
        "noImplicitReturns": false,
        "noImplicitUseStrict": false,
        "outFile": "../Js/app.js",
        "baseUrl": "./",
    },
    "include":[ 
       "*.ts",  
       "*.tsx"
    ],
    "compileOnSave": true
}

我认为此错误是由tsconfig中的"noImplicitAny": true标志生成的。但我想将此保留用于其他开发目的。那么如何在不禁用此标志的情况下摆脱此错误呢?

请让我知道是否需要更多信息!我很乐意提供。

PS:它确实可以毫无问题地编译到浏览器中所需的输出。

0 个答案:

没有答案