Merging imported class with namespace in TypeScript

Question

Valid:

class InputField {
  
}

namespace InputField {
  export enum Types {
    text = "text",
    number = "number"
  }
}

export { InputField };

Invalid:

import InputField from "@Controls/InputFields/InputField.vue";
// TS2440: Import declaration conflicts with local declaration of 'InputField'

namespace InputField {
  export enum Types {
    text = "text",
    number = "number"
  }
}

export { InputField };

How can I merge imported InputField class with namespaceInputField (and reexport it)?

How I'll use the result

import { Vue, Component, Prop } from "vue-property-decorator"
import { InputField } from "@Components/..."


@Component({
  //              Usage as namespace    ↓↓↓
  template: `<InputField type="InputField.Types.number" />`,
  components: {
    InputField // Usage as Vue component
  } 
})
export default class Application extends Vue {
  // Provide access from template
  private InputField: typeof InputField = InputField;
}

Why I need this

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Because of this, TypeScript does not see the public fields of imported classes in .vue files

Answer 1

You can circumvent this *.vue as VueContructor<Vue> issue by proxiing it via a *.ts file:

import DefaultImportClass, {componentOptions} from "@/source/index.vue"
import {Component} from "vue-property-decorator"

@Component<exportClassName>(componentOptions)
class exportCalssName extends DefaultImportClass {} 
namespace exportClassName {}

export {exportClassName}

BUT

You can use static to achive the same result as done via namespace:

enum Types {
  Text: "text",
  Number: "number"
}

@Component
export class InputFieldTypes extends Vue {
  static Types = Types
}