React TypeScript中如何将类型从number转为具体值？

原代码：

const smPx = 375;
export const break = {
  xs: `@media (max-width: ${smPx - 1}px)` as const
}

鼠标悬停时看到的类型：

export declare const break: {
    readonly xs: `@media (max-width: ${number}px)`;
};

解决方案 #

• 给smPx添加const断言，让TypeScript保留其字面量类型而非自动拓宽为number：

  const smPx = 375 as const;
  export const break = {
    xs: `@media (max-width: ${smPx - 1}px)` as const
  }
  

• 或者显式指定smPx为字面量类型：

  type SmPx = 375;
  const smPx: SmPx = 375;
  export const break = {
    xs: `@media (max-width: ${smPx - 1}px)` as const
  }
  

原因说明 #

TypeScript默认会将const声明的数字自动推断为number类型，执行smPx - 1运算后结果类型也会是number，导致模板字符串插值部分的类型显示为number。通过const断言或显式字面量类型，可以让TypeScript保留具体的数值信息，最终模板字符串的类型会显示计算后的实际值（374）。

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