我正在尝试使用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>
我的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:它确实可以毫无问题地编译到浏览器中所需的输出。