css变量无法直接获得类型提示，因getpropertyvalue返回string且ts不解析css；需通过声明模块、工具提取或手写常量对象配合类型守卫实现类型安全。
不能直接获取 CSS 变量的类型提示——CSSStyleDeclaration 和 getComputedStyle 返回的值始终是 string，TypeScript 不会校验变量名是否存在、是否拼错，也不会推导其语义（比如 --primary-color 应该是颜色值）。真正确保类型安全，得靠声明 + 工具 + 约束三者配合。
为什么 getComputedStyle(el).getPropertyValue('--foo') 没有类型提示
因为 getPropertyValue 的返回类型就是 string，无论传入什么字符串参数。TypeScript 不解析 CSS 文件内容，也不读取 :root 或组件内 style 属性定义。常见现象包括：
-
getPropertyValue('--priamry-color')（拼错）不报错，运行时返回空字符串 -
setProperty('--bg', 123)也不报错，但浏览器静默忽略非字符串值 - IDE 对
--开头的变量名无补全、无法跳转到定义
用 declare module 声明全局 CSS 变量类型
适用于固定、集中管理的变量（如 :root 中定义的主题色、间距等），需手动维护一份类型映射。在 src/types/css-vars.d.ts 中写：
declare namespace CSSVars {
export interface Theme {
'--primary-color': string;
'--spacing-xs': string;
'--z-index-modal': number; // 允许 number 类型，但 runtime 仍是 string，仅用于约束
}
}
declare module 'csstype' {
interface Properties {
[key in keyof CSSVars.Theme]?: CSSVars.Theme[key];
}
}
注意点：
- 必须确保
tsconfig.json的include包含该文件，例如"include": ["src/**/*", "src/types/**/*"] - 这个声明只影响
element.style.setProperty()和styled-components等支持csstype的场景，对getPropertyValue无效 - 类型写
number是为了开发期提醒，实际设值仍要转成字符串，比如el.style.setProperty('--z-index-modal', String(999))
用 typed-css-modules 提取 :root 变量生成 .d.ts
如果你把变量定义在 variables.css（非 module）中，并希望自动提取类名和 --xxx 变量，typed-css-modules 默认不处理 :root 块。得换方案：
- 改用
postcss-custom-properties+postcss-discard-comments配合自定义插件，把:root转成 JS 对象再生成.d.ts - 更轻量的做法：手写一个
css-vars.ts导出常量对象，再用tsc --declaration生成对应.d.ts - 示例
src/lib/css-vars.ts：
export const cssVars = {
'--primary-color': '#007bff',
'--spacing-xs': '4px',
'--z-index-modal': 999,
} as const;
export type CssVarKey = keyof typeof cssVars;
export type CssVarValue<t extends cssvarkey> = typeof cssVars[T];
</t>
这样你就能写 cssVars['--primary-color'] 获得字面量类型，且拼错会立即报错。
在 React / styled-components 中安全使用 CSS 变量
避免直接拼接字符串，改用类型守卫或泛型约束：
- 用
in操作符做运行时检查：if ('--primary-color' in cssVars) { ... } - 封装
setCssVar函数，参数限制为CssVarKey：
function setCssVar(el: HTMLElement, key: CssVarKey, value: CssVarValue<key>) {
el.style.setProperty(key, String(value));
}
</key>
调用时 setCssVar(el, '--spacing-xs', '8px') 会校验值是否匹配键的类型；传 '--spacing-xs' 和 123 就会报错。
真正容易被忽略的是：CSS 变量名大小写敏感，且连字符 - 在 TypeScript 中不能作为属性名直接访问（cssVars.--primary-color 语法错误），所有访问都必须走方括号或字符串字面量联合类型——漏掉这一层约束，类型就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
