在前端开发中，CSS 是不可或缺的一部分。尽管 CSS 充满了灵活性和创造力，但是编写 CSS 时管理大型代码库也容易出现问题，尤其是在团队协作的时候。为了解决这个问题，有一些工具被开发出来，其中 typed-css-modules 就是其中之一。
typed-css-modules 是一种将 CSS 模块化的工具，它能够让你在运行时检查 CSS 类、ID 和属性名的有效性，避免了在 CSS 文件中写错字符串的风险。它还提供了 TypeScript 定义文件，可以将 CSS 文件转换为一个对象，从而帮助我们正确导出 CSS 类型。
安装
要使用 typed-css-modules，需要先安装它：
npm install --save-dev typed-css-modules
安装后，需要配置 TypeScript 来识别 .module.css 文件。要配置 .module.css 文件，需要修改 tsconfig.json 文件：
-- -------------------- ---- -------
-
------------------ -
--------- -----------
------------------ -----
------------------------------- -----
--------- ------
------------------- -------
------ ---------- -------
--------- -------
------------ ----
--
---------- ---------------- -------------- -------------------
---------- ---------------- -------- -------
-在上述 tsconfig.json 配置中，我们已经将 .module.css 文件包含在了 TypeScript 的编译过程中。
使用
在安装和配置完成后，我们可以使用 typd-css-modules。
1. 导出 CSS 类型
在使用 typed-css-modules 时，我们首先需要将 CSS 类型导出。假设我们拥有一个 button.module.css 文件，我们需要在文件开头添加以下代码：
declare const styles: {
[key: string]: string
}
export default styles;这里我们将类型命名为 styles 并将其导出为默认类型。
2. 使用 CSS 类型文件
使用 CSS 类型文件时，我们需要将它们导入到我们的项目中。通常，在 React 项目中你会像下面这样导入类型：
import * as styles from './button.module.css';
然后，我们便可以使用这个类型文件来代替原本的 CSS。
3. 为 TypeScript 提供类型定义
修改 tsconfig.json，使其使用 typed-css-modules 为我们的 CSS 文件生成类型定义。在 options 中添加以下配置：
-- -------------------- ---- -------
-
------------------ -
---------- -
-
------- --------------------------------
---------- -
--------------------- ----------------
---------- -----
------------- ----
-
-
-
--
---------- ---------------- -------------- -------------------
---------- ---------------- -------- -------
-4. 自动生成 TypeScript 类型
运行 TypeScript 编译器时，typed-css-modules 会自动为我们生成相应的类型定义文件。如果你更改了一个文件，你需要重新编译代码以获取新的类型定义。
"scripts": {
"start": "npm run build:dev",
"build:dev": "webpack-dev-server --hot --config webpack.config.js",
"build": "rimraf ./dist && NODE_ENV=production webpack --config webpack.config.js",
"tsc": "tsc"
}这就是 typed-css-modules 的基础使用方法。使用 typed-css-modules 可以消除大多数人出现的由于键入错误而导致的样式错误问题，从而在团队合作中得到加强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69359