Vue 3 + TypeScript 严格模式下的类型推导增强配置

欢迎来到Vue 3 + TypeScript的奇妙世界！

大家好，欢迎来到今天的讲座！今天我们要聊的是一个非常有趣的话题：如何在Vue 3 + TypeScript的严格模式下，通过一些配置和技巧，让类型推导变得更强大、更智能。如果你已经使用过Vue 3和TypeScript，那么你一定知道它们的组合是多么的强大。但是，你是否觉得有时候TypeScript的类型推导还不够“聪明”呢？别担心，今天我们就要解决这个问题！

1. 为什么需要严格模式？

首先，我们来聊聊为什么要在Vue 3中启用TypeScript的严格模式。严格模式（strict）是TypeScript的一个编译选项，它会强制我们在编写代码时更加严谨，避免一些常见的错误。具体来说，严格模式会启用以下几项检查：

• noImplicitAny：禁止隐式的any类型。
• strictNullChecks：启用对null和undefined的严格检查。
• strictFunctionTypes：确保函数参数的类型检查更加严格。
• strictBindCallApply：确保bind、call和apply方法的类型检查更加严格。
• strictPropertyInitialization：确保类的属性在构造函数中被初始化。

这些检查可以帮助我们在开发过程中捕获更多的潜在问题，避免运行时错误。因此，在大型项目或团队协作中，启用严格模式是非常有必要的。

2. Vue 3中的TypeScript支持

Vue 3对TypeScript的支持非常友好，尤其是在Composition API的引入之后。Composition API不仅让代码结构更加清晰，还为TypeScript提供了更好的类型推导支持。不过，默认情况下，TypeScript在Vue 3中的类型推导并不是完美的，尤其是在严格模式下，可能会遇到一些类型不明确的情况。

为了增强类型推导，我们可以从以下几个方面入手：

2.1 使用 defineComponent

在Vue 3中，defineComponent 是一个非常重要的工具，它可以帮助我们更好地定义组件，并且为TypeScript提供更好的类型推导支持。默认情况下，Vue 3的组件定义是这样的：

import { defineComponent } from 'vue';

export default {
  name: 'MyComponent',
  props: {
    message: String,
  },
  setup() {
    return {};
  },
};

虽然这段代码可以正常工作，但在严格模式下，TypeScript可能无法正确推导出props的类型。为了解决这个问题，我们应该使用 defineComponent 来定义组件：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String,
  },
  setup(props) {
    console.log(props.message); // 类型为 string | undefined
    return {};
  },
});

通过使用 defineComponent，TypeScript可以更好地理解组件的结构，并且能够自动推导出props的类型。这样，我们就不需要手动为props指定类型了。

2.2 使用 PropType 和 withDefaults

有时候，我们希望为props提供更复杂的类型，而不仅仅是基本类型。例如，我们可能希望传递一个对象或数组作为prop。在这种情况下，我们可以使用 PropType 来定义更复杂的类型：

import { defineComponent, PropType } from 'vue';

interface User {
  id: number;
  name: string;
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
  setup(props) {
    console.log(props.user.name); // 类型为 string
    return {};
  },
});

此外，我们还可以使用 withDefaults 来为props提供默认值。这不仅可以简化代码，还能让TypeScript更好地推导出props的类型：

import { defineComponent, withDefaults } from 'vue';

export default defineComponent(
  withDefaults(
    {
      props: {
        message: {
          type: String,
          default: 'Hello, World!',
        },
      },
      setup(props) {
        console.log(props.message); // 类型为 string
        return {};
      },
    },
    {
      message: 'Default Message',
    }
  )
);

2.3 使用 ref 和 reactive 的类型推导

在Composition API中，ref 和 reactive 是两个非常常用的状态管理工具。默认情况下，TypeScript可以很好地推导出它们的类型，但有时候我们可能需要手动指定类型，以确保类型的安全性。

对于 ref，我们可以直接为其赋值，TypeScript会自动推导出类型：

import { ref } from 'vue';

const count = ref(0); // 类型为 Ref<number>

如果我们想为 ref 指定一个复杂类型，可以使用泛型：

interface User {
  id: number;
  name: string;
}

const user = ref<User | null>(null); // 类型为 Ref<User | null>

对于 reactive，TypeScript同样可以自动推导出类型，但我们也可以手动指定类型：

import { reactive } from 'vue';

const state = reactive({ count: 0 }); // 类型为 { count: number }

// 手动指定类型
interface State {
  count: number;
  message: string;
}

const state = reactive<State>({ count: 0, message: 'Hello' });

2.4 使用 computed 的类型推导

computed 是Vue 3中用于计算属性的工具。TypeScript可以很好地推导出 computed 的返回类型，但有时候我们可能需要手动指定类型，尤其是在返回值较为复杂的情况下。

import { computed, ref } from 'vue';

const count = ref(0);

const doubleCount = computed(() => count.value * 2); // 类型为 ComputedRef<number>

// 手动指定类型
const doubleCount = computed<number>(() => count.value * 2);

3. 增强类型推导的高级技巧

除了上述的基本配置，我们还可以通过一些高级技巧来进一步增强TypeScript的类型推导能力。

3.1 使用 global.d.ts 文件

在Vue 3项目中，我们可以通过创建一个 global.d.ts 文件来扩展全局类型。这对于自定义的全局变量、插件或第三方库非常有用。例如，假设我们有一个全局的 api 对象，我们可以在 global.d.ts 中定义它的类型：

// global.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: {
      fetchUsers(): Promise<User[]>;
      createUser(user: User): Promise<User>;
    };
  }
}

这样一来，TypeScript就可以识别 this.$api 的类型，并提供自动补全和类型检查。

3.2 使用 @types/vue 和 shims-vue.d.ts

如果你在项目中使用了Vue 2的语法（如Options API），或者引入了一些第三方库，TypeScript可能无法正确识别它们的类型。这时，你可以安装 @types/vue 并创建一个 shims-vue.d.ts 文件来帮助TypeScript识别这些类型：

// shims-vue.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

3.3 使用 vue-tsc 进行类型检查

vue-tsc 是一个专门为Vue项目设计的TypeScript编译器，它可以更好地处理 .vue 文件中的类型检查。相比于普通的 tsc，vue-tsc 可以更准确地识别Vue组件中的类型，并且支持更多Vue特有的功能。

要使用 vue-tsc，你只需要在项目中安装它，并将其添加到 package.json 的 scripts 中：

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

然后，你可以通过运行 npm run type-check 来进行类型检查。

4. 总结

今天，我们探讨了如何在Vue 3 + TypeScript的严格模式下，通过一些配置和技巧，增强类型推导的能力。我们学习了如何使用 defineComponent、PropType、withDefaults 等工具来更好地定义组件和props，并且讨论了如何使用 ref、reactive 和 computed 的类型推导。最后，我们还介绍了一些高级技巧，如 global.d.ts、shims-vue.d.ts 和 vue-tsc，来进一步提升类型安全性和开发体验。

希望今天的讲座对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言。让我们一起享受Vue 3 + TypeScript带来的高效开发体验吧！ ?

---

参考资料：

• TypeScript Handbook
• Vue 3 Composition API Documentation
• Vue 3 TypeScript Support