javascript - 在类型脚本中添加 SVG 内容时出现错误

Question

我正在将 java 脚本文件迁移到类型脚本并收到类似 Cannot find name 'svg'.ts(2304) 的错误

下面是我尝试迁移的 Java 脚本文件

import React from 'react';
import styles from 'example.css';

export default () => (
    <svg viewBox="0,0,48,44" focusable="false">
        <path className={styles.Fill} d="M0,0h480z" />
        <path
            className={styles.Grey}
            d="M31.9,1.5,4.5-4.5
        s.3z"
        />
    </svg>
);

寻求帮助来解决这个问题。下面是类型脚本文件。

Answer 1

这里有两个问题。

1. 将文件修改为 file.tsx 将解决“找不到名称 'svg'.ts(2304)”问题。 TypeScript docs on JSX
2. 在 ts 中使用 css 模块需要一些额外的配置。 How to use CSS Modules with TypeScript and webpack

需要修改tsconfig.json

{
     "compilerOptions": {
         ...
         "jsx": "react",
         ...
     }
}