博客站

Vue 3 对 TypeScript 的支持有了显著提升，从底层代码到开发工具都进行了优化，使得开发者可以更轻松地在 Vue 3 项目中使用 TypeScript。以下是 Vue 3 支持 TypeScript 的主要方式和实践：

1. Vue 3 对 TypeScript 的内置支持

Vue 3 的源码完全使用 TypeScript 重写，这意味着 Vue 3 天生对 TypeScript 提供了更好的支持。以下是一些内置支持的特性：

类型推断

• Vue 3 的 Composition API 和 Options API 都提供了更好的类型推断。例如，ref、reactive、computed 等 API 的类型推断非常准确。
• 在模板中使用 TypeScript 时，Vue 3 能够自动推断出组件的 props、data、methods 等的类型。

类型声明

• Vue 3 提供了完整的类型声明文件（.d.ts），开发者可以直接在 TypeScript 项目中使用 Vue 3，而无需额外安装类型声明包。

2. 在 Vue 3 项目中使用 TypeScript

以下是在 Vue 3 项目中使用 TypeScript 的常见实践：

创建支持 TypeScript 的 Vue 3 项目

使用 Vue CLI 或 Vite 创建一个支持 TypeScript 的 Vue 3 项目：

# 使用 Vue CLI
vue create my-project
# 选择 Vue 3 和 TypeScript 支持

# 使用 Vite
npm create vite@latest my-project
# 选择 Vue 和 TypeScript 模板

文件扩展名

• Vue 单文件组件（SFC）的文件扩展名可以使用 .vue 或 .ts。
• 如果使用 TypeScript 编写逻辑代码，可以将 <script> 标签的 lang 属性设置为 ts：

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

export default defineComponent({
  // 组件逻辑
});
</script>

3. 使用 defineComponent 定义组件

Vue 3 提供了 defineComponent 函数，用于定义组件并支持 TypeScript 类型推断。

示例

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

export default defineComponent({
  name: 'MyComponent',
  props: {
    initialMessage: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const message = ref(props.initialMessage);

    function updateMessage(newMessage: string) {
      message.value = newMessage;
    }

    return {
      message,
      updateMessage,
    };
  },
});
</script>

4. 类型化的 Props

在 Vue 3 中，可以通过 TypeScript 接口或类型别名来定义 props 的类型。

示例

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

interface MyProps {
  initialMessage: string;
  count?: number;
}

export default defineComponent({
  props: {
    initialMessage: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      default: 0,
    },
  },
  setup(props: MyProps) {
    // 使用 props
    console.log(props.initialMessage);
    console.log(props.count);
  },
});
</script>

5. 类型化的 Emits

在 Vue 3 中，可以通过 TypeScript 定义组件的 emits 类型。

示例

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

export default defineComponent({
  emits: {
    'update:message': (payload: string) => typeof payload === 'string',
  },
  setup(props, { emit }) {
    function sendMessage() {
      emit('update:message', 'New Message');
    }

    return { sendMessage };
  },
});
</script>

6. 类型化的 Refs 和 Reactive

Vue 3 的 ref 和 reactive 支持 TypeScript 类型推断。

示例

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

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

export default defineComponent({
  setup() {
    const count = ref<number>(0); // 显式指定类型
    const user = reactive<User>({ name: 'Alice', age: 25 }); // 使用接口定义类型

    return { count, user };
  },
});
</script>

7. 类型化的 Computed 和 Watch

Vue 3 的 computed 和 watch 也支持 TypeScript 类型推断。

示例

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

export default defineComponent({
  setup() {
    const count = ref(0);

    const doubleCount = computed(() => count.value * 2);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count, doubleCount };
  },
});
</script>

8. 使用自定义 Hook

在 Vue 3 中，可以将逻辑提取到自定义 Hook 中，并使用 TypeScript 定义类型。

示例

// useCounter.ts
import { ref } from 'vue';

export function useCounter(initialValue: number = 0) {
  const count = ref(initialValue);

  function increment() {
    count.value  ;
  }

  return { count, increment };
}

// MyComponent.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { useCounter } from './useCounter';

export default defineComponent({
  setup() {
    const { count, increment } = useCounter(10);

    return { count, increment };
  },
});
</script>

9. 工具支持

• VSCode 插件：使用 Volar 插件可以获得更好的 TypeScript 支持。
• ESLint 和 Prettier：配置 ESLint 和 Prettier 以支持 TypeScript。

10. 总结

Vue 3 对 TypeScript 的支持非常完善，开发者可以通过以下方式在 Vue 3 项目中使用 TypeScript：

• 使用 defineComponent 定义组件。
• 类型化的 Props 和 Emits。
• 类型化的 ref、reactive、computed 和 watch。
• 使用自定义 Hook 实现逻辑复用。
• 借助工具（如 Volar、ESLint）提升开发体验。

通过这些实践，开发者可以充分利用 TypeScript 的类型检查和代码提示功能，构建更健壮和可维护的 Vue 3 应用。