Namespace added in *.d.ts file in vue typescript is not being recognized without explicit import

I am trying to use typescript namespace without importing the .d.ts file in vue typescript project and I have problems.

I want to use DropdownTypes which is a namespace defined in .d.ts file without importing it. I think this should be possible.

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"
  ]
}