如何为Vue Props添加带自动补全的HTML属性Type类型？

你可以直接使用TypeScript内置的HTMLInputTypeAttribute类型，它已经预定义了所有合法的HTML输入框type属性值，能提供完整的类型提示和校验，无需手动枚举：

import Input from "./input/Input.vue";

interface SearchInputProps {
  search: string;
  placeholder?: string;
  type?: HTMLInputTypeAttribute; // 自动提示所有合法输入类型
}

withDefaults(defineProps<SearchInputProps>(), {
  placeholder: "Search",
  type: "text",
});

const emit = defineEmits<{
  (event: "search-input", input: string): void;
}>();
</script>

这个类型是TypeScript专门为input元素的type属性设计的，涵盖了所有标准值（比如text、password、email、number等），同时也兼容部分浏览器支持的非标准值，完全满足需求。

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