我正在一个Javascript项目(create-react-app 2.0
),使用tsserver而不是Typescript(yes, it is possible),我得到了这个linting错误:
Property 'svg-icon' does not exist on type 'JSX.intrinsictElements'.
在做类似的事情时:
<div>
<svg-icons icon="student" />
</div>
我从其他资源知道它与declaring a namespace有关,但是由于我的项目纯粹是带有jsconfig.json
文件的Javascript,我不知道这个解决方案是否仍然适用,我将把包含这个命名空间的文件放在哪里。
对于额外的上下文,svg-icon
Web组件由我们的一个内部库安装,我不处理它,但我想我不需要它的细节来修复linting(?)
我怎样才能解决这个问题?
您需要为提供svg-icon
的项目编写类型声明文件(.d.ts)。 (.d.ts文件是您放置命名空间的位置。)
如果你可以修改提供svg-icon
的项目
理想情况下,.d.ts应该进入提供svg-icon
的项目。在项目的根目录创建一个文件index.d.ts
,其中包含(至少):
declare global {
namespace JSX {
interface IntrinsicElements {
'svg-icon': any; // you could potentially make this type more specific
}
}
}
然后通过在项目的typings
中添加package.json
字段来引用该文件:
{
"typings": "./index.d.ts"
...
}
当您导入项目中的其他项目时,应该(希望)自动选择类型。
如果无法修改其他项目
我无法找到一种直接的方法来做到这一点...请参阅this question,了解一些您可能能够适应您需求的想法。
(您在TS项目中使用的典型方法是将自定义类型放在typings
文件夹中并引用tsconfig.json
typeRoots
中的文件夹,但显然这在JS项目中不起作用。)