Vue 2.6集成TypeScript：组合式API props隐式any类型问题

针对Vue 2.6 + TypeScript + 组合式API插件下的props类型错误问题，以下是两种正确的处理方式，避免使用any类型：

方法一：显式定义Props接口 + PropType类型标注 #

通过定义TypeScript接口描述props结构，并使用PropType将Vue的prop配置与TS类型关联，让setup函数的props参数获得准确类型：

<script lang="ts">
import { computed, PropType } from "@vue/composition-api";

// 定义props对应的类型接口，可选属性对应Vue prop的default值
interface AvatarProps {
  title?: string;
  alt?: boolean;
  size?: "small" | "regular";
}

export default {
  name: "Avatar",

  props: {
    title: {
      type: String as PropType<AvatarProps['title']>,
      default: "my title",
    },
    alt: {
      type: Boolean as PropType<AvatarProps['alt']>,
      default: false,
    },
    size: {
      type: String as PropType<AvatarProps['size']>,
      default: "regular",
      // 可选：添加验证确保传入值符合预期
      validator: (value: string) => {
        return ['small', 'regular'].includes(value);
      }
    },
  },

  // 给setup的props参数标注对应接口类型
  setup(props: AvatarProps) {
    // 注意：props本身已是响应式对象，无需用reactive包裹，更不能直接赋值覆盖
    // 错误写法：props = reactive(props);

    return {
      classes: computed(() => ({
        avatar: props.title,
        "avatar--alt": props.alt,
        "avatar--small": props.size === "small",
      })),
    };
  },
};
</script>

方法二：利用ExtractPropTypes自动推断类型 #

通过提取已定义的prop配置的类型，减少重复代码：

<script lang="ts">
import { computed, PropType, ExtractPropTypes } from "@vue/composition-api";

// 单独定义prop配置，使用as const让TS保留字面量类型
const avatarProps = {
  title: {
    type: String,
    default: "my title",
  },
  alt: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String as PropType<"small" | "regular">,
    default: "regular",
    validator: (value: string) => ['small', 'regular'].includes(value)
  },
} as const;

// 从prop配置中自动提取props类型
type AvatarProps = ExtractPropTypes<typeof avatarProps>;

export default {
  name: "Avatar",
  props: avatarProps,

  // 标注props参数类型
  setup(props: AvatarProps) {
    return {
      classes: computed(() => ({
        avatar: props.title,
        "avatar--alt": props.alt,
        "avatar--small": props.size === "small",
      })),
    };
  },
};
</script>

关键注意点 #

1. 禁止修改props引用：原代码中props = reactive(props);是错误的，props是Vue维护的只读响应式对象，直接赋值会破坏响应式绑定和只读特性。若需解构props的响应式属性，可使用toRefs(props)：

   import { toRefs } from "@vue/composition-api";
   // 在setup中
   const { title, alt, size } = toRefs(props);
   

2. 类型关联的必要性：TypeScript无法自动从Vue的props选项推断setup参数类型，必须通过PropType或ExtractPropTypes显式关联，才能获得类型检查和智能提示。

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