Create-react-app + TypeScript + CSS 模块：自动生成类型定义，无需从 CRA 中弹出

typescript

使用Create-react-app + typescript + CSS模块可以快速搭建一个React项目，并且无需从Create-react-app中弹出来手动配置typescript和CSS模块。这种组合可以帮助开发者更高效地开发React应用，并且还能自动生成类型定义，省去手动编写的麻烦。

在开始之前，我们需要先安装Create-react-app脚手架工具。打开终端，运行以下命令：

npx create-react-app my-app --template typescript

这会创建一个名为my-app的React项目，并且使用typescript作为模板。

安装完成后，我们可以进入my-app目录，并启动开发服务器：

cd my-app
npm start

启动成功后，我们可以在浏览器中访问http://localhost:3000，看到默认的React欢迎页面。

接下来，我们需要在项目中使用CSS模块。CSS模块是一种在React组件中引入CSS样式的方式，可以避免全局污染和样式冲突的问题。

首先，我们需要将CSS文件的后缀名改为.module.CSS，以示区别。然后，在组件中引入CSS模块，可以通过以下方式：

tsx
import styles from './App.module.CSS';

这样，styles对象就包含了CSS类名与唯一生成的类名之间的映射关系。

我们可以在组件中使用这些类名，例如：

tsx
import styles from './App.module.CSS';
function App() {
  return (
    <div className={styles.contAIner}>
      <h1 className={styles.title}>Hello, World!</h1>
      
<img src="https://img.izhida.com/topic/2c56c360580420d293172f42d85dfbed.jpg" alt="CSS"><br>CSS
This is a React app with CSS modules.
    </div>
  );
}
export default App;

在上面的例子中，我们使用了contAIner、title和description这三个CSS类名。

这样，我们就成功地在Create-react-app + typescript项目中启用了CSS模块，并且可以在组件中使用CSS类名了。

自动生成类型定义

使用Create-react-app + typescript + CSS模块的好处之一是可以自动生成类型定义，无需手动从Create-react-app中弹出来。

在使用CSS模块时，Create-react-app会根据CSS文件的内容自动生成类型定义文件，这些文件以.d.ts为后缀名，保存在src目录下的react-app-env.d.ts文件中。

例如，在上面的例子中，Create-react-app会根据App.module.CSS文件的内容生成类型定义，我们可以在编辑器中查看到这些类型定义。

这样，我们就可以在使用CSS类名时获得类型检查的支持，避免拼写错误和未定义的类名。

一下，Create-react-app + typescript + CSS模块可以帮助我们快速搭建React项目，并且无需手动配置typescript和CSS模块。使用这种组合，我们可以更高效地开发React应用，并且还能自动生成类型定义，省去手动编写的麻烦。