TypeScript中如何为组件属性隐式绑定自定义泛型约束

Great question! You absolutely can eliminate the need for manual calls to asTextSize by tying your CheckTextSize constraint directly to the TextComponent's size prop. This approach is not only feasible—it aligns perfectly with TypeScript's generics design philosophy of enforcing type safety while keeping your code flexible.

Step-by-Step Solution #

Here's how to refactor your component to automatically validate the size prop at compile time without explicit function calls:

1. Make TextComponent a Generic Class #

We’ll parameterize the component with the specific string literal type passed to size, then use your CheckTextSize constraint to validate it:

type TextSize = 'small' | 'medium' | 'large';
type Breakpoint = '@small' | '@medium' | '@large';
type CheckTextSize<T extends string, S extends string = TextSize, B extends string = Breakpoint> =
  | (T extends `${infer F} ${infer R}`
      ? F extends `${S}${infer BB}`
        ? `${F} ${BB extends B ? CheckTextSize<R, S, Exclude<B, BB>> : B}`
        : `${S}${B}`
      : T extends `${S}${infer BB}`
      ? BB extends B
        ? T
        : `${S}${B}`
      : `${S}${B}`)
  | TextSize;

// You can keep this helper for standalone validation, but it won't be required for the component
const asTextSize = <T extends string>(x: CheckTextSize<T>): CheckTextSize<T> => x;

// Refactored generic component
export class TextComponent<T extends string = 'medium'> {
  @Prop() 
  public size?: CheckTextSize<T> = asTextSize('medium') as CheckTextSize<T>;
  
  public render() {
    return <span>Some text...</span>;
  }
}

2. Use the Component Without Manual Validation #

Now you can use your component exactly as you wanted—TypeScript will automatically validate the size prop:

// ✅ Valid: TypeScript infers T as 'small@medium medium@large' and validates it against CheckTextSize
<TextComponent size='small@medium medium@large' />;

// ✅ Valid: Uses the default 'medium' size
<TextComponent />;

// ❌ Invalid: TypeScript throws an error ( 'tiny' isn't a valid TextSize )
<TextComponent size='tiny' />;

// ❌ Invalid: Duplicate breakpoint '@medium' violates the constraint
<TextComponent size='small@medium large@medium' />;

Why This Works (And Doesn’t Conflict with Generics Principles) #

Your goal to define size as CheckTextSize<T> is completely aligned with TypeScript’s generics design:

• Generics are for parameterized types: By making TextComponent generic over the size string literal, we’re letting TypeScript capture the exact value passed in, then apply your CheckTextSize constraint to it at compile time.
• Type safety without runtime overhead: All validation happens during compilation—no need for runtime checks (unless you want them), which keeps your code efficient.
• Preserves type information: Unlike using CheckTextSize<string> (which would still validate but lose the exact literal type), the generic version retains the specific size value as a type, which is useful if you need to branch logic based on the size later.

Optional: Non-Generic Alternative #

If you don’t need to retain the exact literal type of size, you can simplify the component by directly using CheckTextSize<string> as the prop type:

export class TextComponent {
  @Prop() 
  public size?: CheckTextSize<string> = asTextSize('medium');
  
  public render() {
    return <span>Some text...</span>;
  }
}

This still enforces the validation rules, but won’t give you the specific literal type for size in other parts of your code. The generic approach is more flexible, but both work perfectly for implicit validation.

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