1. 首页
  2. 博客
  3. 使用 Typescript 提高 CSS 模块的价值

使用 Typescript 提高 CSS 模块的价值

有许多方法可以管理 Web 应用程序中的样式，所有这些方法都试图防止样式级联到不需要它们的元素。CSS 模块 是将应用程序样式隔离到使用它们的组件的绝佳工具。借助 Typescript的强大功能，我们可以让它们变得更好。

Typescript 对 CSS 模块的支持

我已经整理了一个 示例存储库，但下面是您自己设置的步骤。

1. 创建新项目

在实际应用程序上试用 CSS 模块的最简单方法是创建一个新的。Create React App 有一个 Typescript 模板，这就是我在示例存储库中使用它的原因。如果您已经为此设置了一个项目，则可以跳过此步骤。

要使用 Typescript 创建新的 React 项目，请运行以下命令：

create-react-app project-name --template typescript

2.重命名CSS文件

CSS 模块通常由文件名 表示 *.module.css，但也可以是 *.module.less 或 *.module.scss，具体取决于您使用的 CSS 预处理器。Create React App 项目已默认支持与这些文件扩展名匹配的任何文件的 CSS 模块，因此请将您的 *.css 文件重命名为 *.module.css。

如果您不使用 Create React App，您可能需要弄乱 webpack 配置或类似的构建系统配置才能使其工作。

3. 导入 CSS 模块

现在是时候在 React 组件中使用 CSS 模块了。在使用 CSS 模块之前，React 组件可能如下所示：

REACT JSX

import "./styles.css";

const HelloWorld = () => {
    return <h1 className="helloStyle">Hello World!</h1>;
}

export default HelloWorld;

样式被导入到组件中，确保"helloStyle"在渲染此组件时类名可用。需要注意的是，./styles.css一旦此组件导入了这些类，每个组件都可以使用这些类。

样式并不局限于这个特定的组件，这意味着类名冲突的可能性仍然存在。而且，对于类名的拼写错误，也没有任何帮助。我甚至数不清有多少次将样式问题归咎于拼写错误的类名。

使用 CSS 模块，代码大致相同，但现在我们可以将样式作为可以交互的模块导入：

REACT JSX

import styles from "./styles.module.css";

const HelloWorld = () => {
    return <h1 className={styles.helloStyle}>Hello World!</h1>;
}

export default HelloWorld;

在此示例中，styles导入是一个 Javascript 对象，我们可以使用它在需要的地方应用样式。"helloStyle"类名现在是对象的一个属性styles，可以像 Javascript 对象上的任何其他属性一样访问。

CSS 模块还可以通过为样式对象上的每个属性自动生成唯一的类名来帮助解决类名冲突问题。如果您在浏览器中检查此组件，您很可能会看到类似 的类名，"styles_helloStyle_7a4w"而不是"helloStyle"。

不幸的是，我们在拼写错误方面仍然没有帮助。由于该styles对象只是一个普通的 Javascript 对象，因此我们无法在运行时检查对象上是否存在所需的属性。这就是 Typescript 可以帮助我们的地方！

4.添加 Typescript 插件

由于项目已经使用了 Typescript，我们可以利用它来声明styles对象的类型。您可以自己为每个*.module.css文件创建一个声明文件，但仅仅为了检查拼写错误，就需要做很多额外的工作。

不要这样做，你应该将typescript-plugin-css-modulesTypescript 插件安装为devDependency，如下所示：

npm install typescript-plugin-css-modules --save-dev

或者如果你使用Yarn，请运行：

yarn add -D typescript-plugin-css-modules

您仍然需要为 CSS 模块定义一个声明文件。（Create React App 项目应该已经支持此功能。）在项目根目录下创建一个名为styles.d.ts（或类似名称）的新文件，并向其中添加以下代码：

TYPESCRIPT

// For CSS
declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

// For LESS
declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

// For SCSS
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

如果你现在拼错了styles对象的属性名称，就会出现编译时错误。这太棒了！

5. 使用 Typescript 的工作区版本

VS Code包含自己的 Typescript 版本，这在某些情况下会很有帮助。遗憾的是，该typescript-plugin-css-modules插件不适用于 VS Code 版本的 Typescript。您的项目应该已经依赖于 Typescript devDependency，因此我们需要配置 VS Code 以使用该工作区版本。

在项目根目录下创建一个名为的目录.vscode（如果它尚不存在），并添加一个名为的新文件，settings.json其设置如下：

JSON 格式

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

这将确保 VS Code 使用项目的 Typescript 版本而不是 VS Code 版本，如果您还没有这样做，它将提示您这样做。

原文链接：codingdict.net

热门标签