Valid Script Code:
class InputField {
}
namespace InputField {
export enum Types {
text = "text",
number = "number"
}
}
export { InputField };
Invalid Script Code:
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 combine the imported InputField class with the namespace InputField and re-export it?
Planned Usage of the Merged Result
import { Vue, Component, Prop } from "vue-property-decorator"
import { InputField } from "@Components/..."
@Component({
// Using as namespace ↓↓↓
template: `<InputField type="InputField.Types.number" />`,
components: {
InputField // Using as Vue component
}
})
export default class Application extends Vue {
// Enabling access from template
private InputField: typeof InputField = InputField;
}
Motivation Behind the Requirement
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
This is necessary because TypeScript cannot recognize the public fields of imported classes in .vue files.