TypeScript中能否从字面量联合类型移除宽泛类型？React组件场景

核心问题分析 #

HTMLInputTypeAttribute是TypeScript内置的联合类型，既包含所有标准input类型的字面量，又通过string & {}兼容任意字符串。直接用Exclude<HTMLInputTypeAttribute, 'button' | 'hidden'>会保留string类型，导致仍能传入任意字符串，达不到限制目的。

可行解决方案 #

1. 提取并过滤允许的字面量类型 #

先从HTMLInputTypeAttribute中分离出所有标准字面量类型，再排除不需要的'button'和'hidden'：

// 提取所有标准input类型的字面量（排除string兼容类型）
type LiteralInputTypes = Exclude<HTMLInputTypeAttribute, string>;
// 过滤掉禁止使用的类型
type AllowedInputTypes = Exclude<LiteralInputTypes, 'button' | 'hidden'>;

2. 重定义组件Props #

通过Omit移除原生InputHTMLAttributes中的type属性，再重新定义为我们过滤后的AllowedInputTypes：

import { InputHTMLAttributes } from 'react';

type CustomInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
  type?: AllowedInputTypes;
};

const CustomInput = ({ type = 'text', ...props }: CustomInputProps) => {
  return <input type={type} {...props} />;
};

3. 验证效果 #

使用组件时，传入禁止的类型或任意字符串都会触发TypeScript报错：

// 合法使用
<CustomInput type="text" />
<CustomInput type="email" />
<CustomInput type="password" />

// 触发报错
<CustomInput type="button" />       // 类型'"button"'不匹配AllowedInputTypes
<CustomInput type="hidden" />      // 类型'"hidden"'不匹配AllowedInputTypes
<CustomInput type="custom-type" /> // 类型'"custom-type"'不匹配AllowedInputTypes

补充说明 #

如果后续需要新增允许的自定义类型，直接扩展AllowedInputTypes即可：

type AllowedInputTypes = Exclude<LiteralInputTypes, 'button' | 'hidden'> | 'my-custom-type';

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