vue3的defineProps使用外部类型

历史问题

这不是 Ts 的问题，而是 Vue 宏 defineProps 局限性，

interface IProps {
  name: {
	  type: String,
	  default: "zhangsan"
  }
}

// IProps 只能在当前（vue）文件中定义，不支持从外部导入
const props = defineProps<IProps>()

问题解决

该问题在 vue3.3 及以上版本中已经被修复，也就是说 vue3.3 及以上版本中的宏函数中可以直接使用外部导入的类型。

不仅如此，类型 IProps 甚至可以定义在全局的 d.ts 文件中（这就可以使用 namespace 等 ts 类型定义的 这些高级语法特性了），不过需要做一些额外的配置才可以。

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { globSync } from "glob";

export default defineConfig(({ command, mode }) => {
  return {
    plugins: [
      vue({
        script: {
          globalTypeFiles: [ // 配置这个
            ...globSync("**/*.d.ts", { ignore: "node_modules/**" }),
          ],
        },
      })
    ]
  };
});