已定义带默认值的string，为何仍触发ESLint的any类型不安全赋值警告？

我在Vue组件中定义了必填且带有默认值的string类型props x，代码如下：

export default {
  name: '...',
  props: {
    x: {
      type: String,
      required: true,
      default: ''
    }
  },
  setup(props) {
    onMounted(async () => {
      await MyObject(
        {
          x: props.x, // <-- eslint warnings
        }
      ).then(...);

但此时触发了两个ESLint警告：

Unsafe assignment of an any value.eslint@typescript-eslint/no-unsafe-assignment
Unsafe member access .initialDoc on an any value.eslint@typescript-eslint/no-unsafe-member-access

外部库中MyObject的类型定义如下：

declare const MyObject: MyObject;
// ...
declare type MyObject = {
    (options: MyObjectOptions): Promise<...>
// ...
export type MyObjectOptions = {
  x?: string | string[];
}

看起来所有类型都已正确定义，为何会触发这些ESLint警告？

核心原因 #

Vue 2选项式API中，setup函数的props参数无法被TypeScript自动推断出准确类型——即便你在props选项里明确了类型、必填规则和默认值，TypeScript仍会把props.x识别为any类型。当你将这个any类型的值传入MyObject时，就触发了@typescript-eslint/no-unsafe-assignment警告；而.initialDoc的警告则是因为MyObject返回的Promise类型被推断为any，后续访问其属性时触发了不安全成员访问的规则。

另外，MyObjectOptions中的x是可选联合类型（string | string[]），虽然和Vue组件的x类型兼容，但TypeScript无法在选项式API的setup中自动关联这层类型关系，进一步导致了类型推断的模糊。

解决方法 #

方法1：为props添加明确的类型定义

利用Vue提供的类型工具让TypeScript正确识别props类型：

• Vue 3 使用defineProps直接声明类型：

<script setup lang="ts">
import { onMounted } from 'vue';

const props = defineProps<{
  x: string;
}>();

onMounted(async () => {
  await MyObject({ x: props.x }).then(...);
});
</script>

• Vue 2 + @vue/composition-api 使用PropType断言类型：

import { onMounted, PropType } from '@vue/composition-api';

export default {
  name: '...',
  props: {
    x: {
      type: String as PropType<string>,
      required: true,
      default: ''
    }
  },
  setup(props) {
    onMounted(async () => {
      await MyObject({ x: props.x }).then(...);
    });
  }
};

方法2：显式断言props.x的类型

如果不想修改组件的props定义方式，可以通过类型断言明确props.x的类型，同时处理Promise返回值的类型：

onMounted(async () => {
  await MyObject({
    x: props.x as string
  }).then(res => {
    // 断言res的类型以消除.initialDoc的警告
    const typedRes = res as { initialDoc: YourDocType };
    // 后续访问typedRes.initialDoc即可
  });
});

方法3：检查外部库类型的导入配置

确保你正确导入了外部库的类型定义：

• 确认tsconfig.json中包含了该库的类型文件路径；
• 通过import type { MyObjectOptions } from 'your-library-name'的方式正确导入类型，让TypeScript能识别MyObject的参数和返回值类型。

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