关于javascript:如何编写类型安全的CSS模块

本文首发于微信公众号：大迁世界, 我的微信：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.tsx
import 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.ts
declare const styles: {
  readonly green: string;
  readonly blue: string;
  readonly red: string; 
 we forgot to update the types! 

};
export default styles;


// Component.tsx
import 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。