有很多几乎相似的问题,但我仍然找不到任何工作。
对于上下文:我使用CRA应用程序与js模板和迁移到ts后。SVG工作正常,所以它可能是一个类型的问题。
这是我的tsconfig.json
:
{
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react-jsx",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"paths": { "#*": ["./*"] }
},
}
字符串
我的custom.d.ts
(放置在src
):
import React from "react";
declare module "*.svg" {
export const ReactComponent: React.FunctionComponent<
React.SVGAttributes<SVGElement>
>;
const src: string;
export default src;
}
型
我的SVG用法:
import { ReactComponent as AddLineIcon } from "../../../assets/images/icons/add-line.svg";
型
我已经检查了路径,intellisense也确认了svg文件在那里。我已经尝试在“包含”和“文件”处将custom.d.ts
添加到tsconfig.json
。我已经尝试重新加载我的编辑器/TS服务器,但没有运气。感谢任何帮助或建议。
1条答案
按热度按时间y3bcpkx11#
对于需要类似功能的人,经过长时间的搜索,我发现
import React from "react";
行是问题所在,因为我使用的是React >17,并且它具有JSX转换。看起来很奇怪,但我最好的选择是在custom.d.ts
上禁用/* eslint-disable no-undef */
的eslint。可能需要向React提出一个问题(或Eslint/Typescript)但我不确定我应该要求哪一个,所以我不得不暂时接受这个丑陋的解决方案。不过,如果有人有其他建议或更新,我会很乐意尝试。