TypeScript 无法直接为 .module.css 提供类型提示，需用 typed-css-modules 生成 .d.ts 文件并确保其被正确加载；否则 styles.xxx 无补全、无类型检查。

直接给 .module.css 文件加类型提示，TypeScript 本身做不到；必须靠外部工具生成 .d.ts 文件，并确保它被正确加载和匹配。

为什么 import styles from './Button.module.css' 没有补全

根本不是 TypeScript 配置漏了什么，而是它默认把所有 .module.css 当作 { [key: string]: string } 处理——styles.primary 在类型系统里根本不存在。VS Code 看不到字段，自然不提示。

• TS 不解析 CSS 内容，只认声明；没 .d.ts 就等于没定义
• 即使写了 declare module '*.module.css'，也只是告诉 TS “它导出一个对象”，没说“这个对象里有哪些 key”
• 类名拼写错误（比如 styles.primray）在编译期不会报错，除非你有具体字段类型

用 typed-css-modules 生成 .d.ts 文件

这是目前最轻量、构建无侵入、适配 Webpack/Vite 的主流方案。它读 CSS 文件内容，提取顶层类名（自动跳过 :global），输出严格匹配的类型声明。

• 安装：npm install --save-dev typed-css-modules
• 生成命令：npx tcm src/**/*.module.css（会在每个 .module.css 同目录下生成 Button.module.css.d.ts）
• .d.ts 文件名必须是 xxx.module.css.d.ts，不能是 xxx.module.css.ts 或 xxx.css.d.ts
• 确保 tsconfig.json 的 "include" 包含这些文件，例如：["src/**/*"] 或显式写 ["src/**/*.d.ts"]

Webpack 用户必须关掉 css-loader 的 esModule

如果 css-loader 的 options.modules.esModule 是 true（Webpack 5+ 默认），运行时导出的是 default 对象，而 typed-css-modules 生成的类型默认匹配 CommonJS 导出结构，二者不一致会导致类型始终不生效。

Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载

立即学习“前端免费学习笔记（深入）”；

• 正确配置：{ loader: 'css-loader', options: { modules: { ... }, esModule: false } }
• Vite 用户不用调，它默认用 ES 模块语义且与类型生成兼容
• 改完配置后，务必重启 TS Server：VS Code 中按 Ctrl+Shift+P → 输入 TypeScript: Restart TS server

遇到 Property 'xxx' does not exist on type '{ [key: string]: string; }'

这不是代码写错了，是类型链断在某个环节。三个最常见卡点：

• .d.ts 文件确实没生成，或生成了但为空（检查对应 CSS 文件里是否真写了那个类名）
• 生成路径和 tsconfig.json 的 include 不匹配（比如生成到了 dist/，但 include 只写了 src/**/*）
• 编辑器缓存没清——特别是改过 tsconfig.json 或新增了 .d.ts 后，不重启 TS Server 就永远看不到效果

连字符类名（如 btn-primary）会被转成驼峰（btnPrimary）用于补全，但类型本身仍是 'btn-primary' 字面量，这点容易被忽略：你写 styles.btnPrimary 能通过，但类型校验的其实是字符串值，不是字段名本身。