typescript 全局定义类型、接口

创建全局声明文件

配置tsconfig.json

打开tsconfig.json文件，找到 compilerOptions 配置项，添加属性配置 "typeRoots": ["./types"]

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "typeRoots": ["./types"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

修改创建的新文件，新增对应类型、接口定义

// types/index.d.ts
declare global {
  interface CreateWorkerOrderForm {
    id: number
  }
  
  type Name = string
  
  type AgeArr = Array<number>
  ...
  
}

// 不加这行代码，编辑器会报错
export {};

使用

// Form.vue
<script setup lang="ts">
const form: CreateWorkerOrderForm = {
    id: 1
}
</script>