前端 - ts类型体操，字符串类型怎么检测空格？

Question

我申明了三个类型

/** 百分比字符串 */
declare type VCSSPercentString = `${number}%`
/** 像素字符串 */
declare type VCSSPixelsString = `${number}px`

declare type VCSSString = VCSSPixelsString | VCSSPercentString

使得我可以如下写

let a :VCSSString = '50%'
let b :VCSSString = '99px'
let c :VCSSString = `${ 20 }%`

如何修改上面的类型申明，使得他允许中间有空格

let d :VCSSString = '50 %'
let e :VCSSString = '99  px'
let f :VCSSString = `${ 20 } %`

Answer 1

可以用正则表达式啊

Answer 2

为了在 TypeScript 中允许字符串类型中包含空格，你可以使用模板字符串类型结合正则表达式类型守卫（虽然类型守卫主要用于运行时检查，但在这里我们主要关注类型定义）。然而，直接在类型定义中处理空格的复杂性较高，因为 TypeScript 的类型系统主要是静态的，不直接支持正则表达式匹配。

不过，你可以通过定义一个更通用的字符串类型，然后可能通过运行时检查来确保字符串符合你的要求。但如果你只想在类型层面处理，你可以使用模板字符串来允许空格的存在，但这样也会允许其他任何字符，因为 TypeScript 的模板字符串类型非常灵活。

下面是一个修改后的类型定义，它允许在数字和单位之间有空格：

/** 百分比字符串，允许空格 */
declare type VCSSPercentStringWithSpaces = `${number} ${'%'}` | `${number}%`

/** 像素字符串，允许空格 */
declare type VCSSPixelsStringWithSpaces = `${number} ${'px'}` | `${number}px`

/** 允许空格的 VCSS 字符串 */
declare type VCSSStringWithSpaces = VCSSPixelsStringWithSpaces | VCSSPercentStringWithSpaces

// 使用
let a: VCSSStringWithSpaces = '50%'
let b: VCSSStringWithSpaces = '99px'
let c: VCSSStringWithSpaces = `${20} %`
let d: VCSSStringWithSpaces = '50 %'
let e: VCSSStringWithSpaces = '99  px'
let f: VCSSStringWithSpaces = `${20} %`

注意，这个定义允许在数字和单位之间有一个或多个空格，但它也允许没有空格的情况。如果你想要严格限制必须有空格，你可以去掉没有空格的选项，但这样做可能会限制灵活性。

如果你需要更复杂的验证（比如确保只有一个空格），你可能需要在运行时使用正则表达式来验证字符串，因为 TypeScript 的类型系统本身不支持这种级别的验证。

对于大多数用途，上面的定义应该足够灵活，同时保持类型安全。如果你确实需要在运行时验证字符串格式，你可以编写一个函数来执行这种验证。