如何在TypeScript中定义带.svg后缀的文件名字符串类型？

你之前用{ icon: string & ".svg" }无效是因为string和字面量类型.svg的交叉类型实际是never，两者没有交集，自然起不到约束作用。

正确的做法是使用TypeScript的模板字面量类型，它可以精确匹配特定后缀的字符串：

// 定义所有以.svg结尾的字符串类型
type SvgFileName = `${string}.svg`;

// 应用到对象接口中
interface IconConfig {
  icon: SvgFileName;
}

测试效果：

// 符合要求，不会报错
const validIcon: IconConfig = { icon: "my_icon.svg" };

// 不符合后缀要求，TypeScript会直接报错
const invalidIcon: IconConfig = { icon: "my_icon.png" };

如果需要更严格的约束（比如不允许.svg这种空文件名的情况），可以进一步限制前缀部分不能为空：

// 要求文件名前缀至少有一个字符
type NonEmptySvgFileName = `${string & { length: number }}.svg`;

interface StrictIconConfig {
  icon: NonEmptySvgFileName;
}

// 这种情况会报错，因为前缀为空
const emptyPrefixIcon: StrictIconConfig = { icon: ".svg" };

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