本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验ChatGpt plus版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找bug.

在这篇文章中，作者探讨了如何在 CSS 模块中应用类型平安。因为 CSS 模块在运行时生成类名并在构建之间更改，因而很难以类型平安的形式应用它们。一种解决方案是应用 TypeScript 定义文件为每个 CSS 模块手动创立类型，但更新这些文件十分繁琐。文章提出了一个问题，即假如在 CSS 模块中增加或删除了一个类名。

上面是注释~

应用TypeScript的益处之一是它显著缩小了特定谬误的产生，例如拼写错误；它甚至使拜访原型办法和执行重构更加容易。在编译时捕捉的谬误能够进步失常运行工夫，让客户更加称心，并缩小开发人员的紧急呼叫压力。

应用TypeScript，很容易为咱们的应用程序的业务逻辑和管制流程进行类型标注，但如果咱们也能使CSS类平安，那该多好呢？确保正确的CSS类名曾经就位能够确保所需的款式利用于给定的组件，从而避免因为排版谬误而导致款式错位。

在本文中，咱们将探讨CSS模块是什么，探讨它们的开发者体验缺点，并学习如何通过应用TypeScript自动化来解决这些问题。让咱们开始吧！

什么是CSS模块？

CSS模块提供了一种在古代Web应用程序中编写模块化和作用域CSS款式的办法。这些款式特定于你的应用程序的特定组件或模块。你能够应用惯例CSS编写CSS模块。

在构建时，应用 Vite 或其余相似的工具，CSS 模块为 CSS 文件中定义的每个类生成惟一的类名。而后在 JavaScript 中应用生成的类名来援用 CSS，从而使 CSS 模块化和可重用，防止类名抵触或不必要的反复。

在撰写本文时，CSS类名不再是全局的，解决了许多像BEM这样的方法论旨在解决的问题，但无需手动致力。然而，在CSS模块中遵循BEM依然取决于用例而无益。

将 CSS 模块增加到你的我的项目中

如果你想在下一个 TypeScript 应用程序中应用 CSS 模块，则有几个选项。

古代构建工具如 Vite 和 Snowpack 反对 CSS 模块化，但如果你应用的是 webpack，可能须要蕴含一些小的配置。

一旦构建设置实现，能够依照CSS模块约定增加带有 module.css 扩展名的CSS文件：

// button.module.css.green {    background-color: 'green';}.blue {    background-color: 'blue';}.red {    background-color: 'red';}

为了利用这些款式并利用上述益处，咱们应该从 TypeScript 文件中导入 CSS 模块并绑定 HTML。请记住，上面的示例是用 React 编写的，但语法与其余 UI 库十分类似：

// Component.tsximport styles from './button.module.css'const Component = () => (    <>        <button className={styles.green}>I am green!</button>        <button className={styles.blue}>I am blue!</button>        <button className={styles.red}>I am red!</button>    </>)

如果你在本地运行下面的代码，您会留神到返回的 styles 没有被严格限度类型。相同，它们被视为任何类型。此外，TypeScript 编译器不会在类名不存在时告诉你。

开发者体验的改良

CSS模块是一个很好的工具，但因为类名是在运行时生成的并且在构建之间产生更改，因而很难以类型平安的形式应用它们。

你能够应用TypeScript定义文件手动为每个CSS模块创立类型，但更新它们很繁琐。假如从CSS模块中增加或删除了一个类名。在这种状况下，必须手动更新类型，否则类型安全性将无奈按预期工作。

对于下面的例子，输出应该如下：

declare const styles: {  readonly green: string;  readonly blue: string;  readonly red: string;};export default styles;

这些类型在咱们批改相干的CSS模块之前都能很好地工作。一旦咱们批改了它，咱们就必须更新类型。如果咱们遗记手动更新类型，可能会呈现一些厌恶的UI谬误。

咱们遗记批改相干的类型文件：

// button.module.css.d.tsdeclare const styles: {  readonly green: string;  readonly blue: string;  readonly red: string;  we forgot to update the types! };export default styles;// Component.tsximport styles from './button.module.css'const Component = () => (    <>        <button className={styles.green}>I am green!</button>        <button className={styles.blue}>I am blue!</button>        <button className={styles.red}>I am red!</button>    </>)

在这个例子中展现的状况可能看起来不相干，但随着代码库和贡献者数量的增长，这种反复和容易出错的过程将会妨碍对类型零碎的信赖。援用不存在或打错字的 CSS 类将无奈按预期款式化 HTML，这可能很快演变成开发人员失去对工具的信赖。让咱们学习如何自动化它！

自动化

在这种状况下，自动化解决方案很简略。咱们将主动生成类型，而不是手动创立，并提供一个脚本来验证生成的类型是否最新，以防止不正确的 CSS 模块类型透露到编译步骤中。

有多种办法能够实现这一点。例如，咱们能够构建一个将 CSS 转换为 TypeScript 定义的提取器。然而，为了防止反复造轮子，咱们将利用开源包 typed-css-modules。

应用 npm i typed-css-modules 在你的我的项目中安装包，而后将类型生成增加到你的主开发脚本中的 package.json 脚本中：

"watch": "vite & tcm --watch .",

增加查看最新类型的性能。如果生成的类型在 package.json 脚本中不正确，则会失败：

"check:up-to-date-types": "tcm --listDifferent .",

有了这两个脚本，当初能够主动放弃 CSS 模块类型定义的同步，并查看类型是否放弃最新。

依据我的项目的不同，你可能更喜爱在本地或服务器上运行这些脚本，可能作为你的 CI 流水线的一部分。为了欠缺示例，咱们将形容如何应用 husky 将它们作为 Git Hook 运行。

应用 npx husky-init && npm install 装置并设置 Git Hook runner。要设置在每次提交之前运行 CSS 模块类型查看的 pre-commit Hook，请将 .husky/pre-commit 文件批改为以下内容：

#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"npm run check:up-to-date-types

在每次提交之前，钩子将运行并验证类型是否最新。

总结

在TypeScript生态系统中工作具备微小的后劲，然而，当适度依赖手动流程时，很容易毁坏类型零碎的信赖或产生不必要的摩擦。

CSS模块十分棒，通过一些额定的配置，很容易为生成的类增加类型安全性。您应该自动化繁琐的工作，以便你的团队能够专一于构建杰出的产品。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。