在使用带有Javascript的TSS(无TS)时,JSX内部元素上不存在获取属性

问题描述 投票:0回答:1

我正在一个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(?)

我怎样才能解决这个问题?

javascript reactjs typescript
1个回答
0
投票

您需要为提供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项目中不起作用。)

© www.soinside.com 2019 - 2024. All rights reserved.