Vue+TS中响应式变量重赋值报错：类型不匹配与this.data非函数

错误原因 #

1. this.data不是函数：在Vue选项式API中，data是组件配置选项，初始化后会将其返回对象的属性直接挂载到组件实例this上，无需调用this.data()，直接通过this.属性名访问即可。
2. 类型不匹配：accessToken初始值为null，TypeScript自动推断其类型为null，而赋值的exAccessToken![1]是string类型，两种类型无法兼容。

修正后的代码 #

<script lang="ts">
import { defineComponent, useRoute } from 'vue';

export default defineComponent({
  name: 'AuthCallback',
  data() {
    return {
      // 显式声明联合类型，允许变量为string或null
      accessToken: null as string | null,
    };
  },
  mounted() {
    const tokenParseRegex: RegExp = /access_token=(.*?)&/;
    const exAccessToken: RegExpMatchArray | null = useRoute().hash.match(tokenParseRegex);
    
    // 直接通过this访问响应式属性，添加空值判断避免潜在报错
    if (exAccessToken) {
      this.accessToken = exAccessToken[1];
    }
  },
});
</script>

Vue+TS中响应式变量重赋值方法 #

选项式API场景 #

• 直接通过this.变量名 = 新值完成赋值，Vue会自动追踪变量变化并更新视图。
• 类型处理：若变量可能存在多种类型，需显式声明联合类型（如string | null），或通过类型断言（as）明确变量的类型范围。
• 注意：避免滥用强制非空断言（!），建议添加空值判断（如if (exAccessToken)），防止空值引发运行时错误。

组合式API场景（补充） #

如果使用<script setup lang="ts">语法，通过ref声明响应式变量：

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

// 显式指定变量类型，初始值设为null
const accessToken = ref<string | null>(null);

onMounted(() => {
  const tokenParseRegex = /access_token=(.*?)&/;
  const exAccessToken = useRoute().hash.match(tokenParseRegex);
  if (exAccessToken) {
    accessToken.value = exAccessToken[1];
  }
});
</script>

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