如何从模块化SCSS导出中推断变量的实际类型？

我已经实现了将SCSS变量导入TypeScript/JavaScript的方法，核心步骤如下：

1. 创建存储SCSS变量的文件

// _globalVars.scss
$mobile-breakpoint: 900px;

2. 通过模块化SCSS文件导出变量

// exporterFile.module.scss
@use './globalVars' as globals;

$new-variable: red;

:export {
  mobileBreakpoint: globals.$mobile-breakpoint;
  newVariable: $new-variable;
}

3. 在TS/JS中导入使用

import myScssVars from './exporterFile.module.scss';

console.log(myScssVars); // { mobileBreakpoint: '900px', newVariable: 'red' }

但默认情况下，导入后的变量会被TypeScript推断为只读的字符串键值对，无法识别其实际类型（比如900px对应的数值类型、颜色值的字面量类型）。以下是几种解决方式：

方法一：手动编写类型声明文件 #

为SCSS模块创建对应的.d.ts类型声明文件，精确定义每个导出变量的类型：

// exporterFile.module.scss.d.ts
declare module './exporterFile.module.scss' {
  interface ScssExports {
    readonly mobileBreakpoint: `${number}px`; // 匹配像素格式的字符串
    readonly newVariable: 'red' | string; // 精确到具体颜色字面量，或扩展为通用字符串
  }

  const exports: ScssExports;
  export default exports;
}

如果需要将像素值转换为数值类型，可以在导入后结合类型断言或类型守卫处理：

import myScssVars from './exporterFile.module.scss';

// 直接断言转换
const mobileBreakpoint = parseInt(myScssVars.mobileBreakpoint, 10) as number;

// 或用类型守卫做安全校验
function isPixelValue(value: string): value is `${number}px` {
  return /^\d+px$/.test(value);
}

if (isPixelValue(myScssVars.mobileBreakpoint)) {
  const breakpoint = parseInt(myScssVars.mobileBreakpoint, 10);
  // breakpoint 此时被推断为number类型
}

方法二：使用工具自动生成类型 #

借助typed-scss-modules工具可以自动为SCSS模块生成精确的类型声明文件，无需手动编写：

1. 安装依赖

npm install typed-scss-modules --save-dev

2. 在package.json中添加运行脚本

{
  "scripts": {
    "generate-scss-types": "tsm src --watch"
  }
}

3. 运行脚本生成类型

npm run generate-scss-types

工具会自动扫描指定目录下的SCSS模块，生成对应的.d.ts文件，TypeScript就能自动识别导出变量的实际类型（比如颜色字面量、像素格式字符串等）。

内容的提问来源于stack exchange，提问作者sayandcode