vue.js - เนมสเปซที่เพิ่มในไฟล์ *.d.ts ใน vue typescript จะไม่ถูกจดจำหากไม่มีการ import อย่างชัดเจน

ฉันกำลังพยายามใช้ namespace ของ TypeScript โดยไม่ต้องนำเข้าไฟล์ .d.ts ในโปรเจกต์ Vue TypeScript และฉันมีปัญหา

ฉันต้องการใช้ DropdownTypes ซึ่งเป็นเนมสเปซที่กำหนดในไฟล์ .d.ts โดยไม่ต้องนำเข้ามา ฉันคิดว่านี่ควรจะเป็นไปได้

Cannot find namespace 'DropdownTypes'.

src/components/Common/Dropdown.vue

<template>
...
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({ name: 'dropdown' })
export default class Dropdown extends Vue {
  @Prop({ required: true })
  items!: DropdownTypes.DropdownItem[]
...
}
</script>

src/components/Common/DropdownTypes.d.ts

declare namespace DropdownTypes {
  type DropdownItem {
    id: string;
    text: string;
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "types": [
      "jest",
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*",
        "config/*"
      ],
      "vue-analytics": [
        "src/shims/vue-analytics"
      ],
      "@mathieustan/vue-intercom": [
        "src/shims/vue-intercom"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "config/**/*.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.js",
    "src/**/*.d.ts",
    "test/**/*.ts",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "test/e2e"
  ]
}