Merging imported class with namespace in TypeScript

user_4818123 0
Viewed 698

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

vue.js typescript
2 Answers

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
}
user_112044690

Limitation

@Component({
  template: `<input type="HTML_Type" />`
})
export default class InputField extends Vue {

  //              Vue will not see this !! ↓↓   
  @Prop({ default: InputField.Properties.Types.text, type: String }) 
  private readonly HTML_Type!: string;
}

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

It could be solved by static fields.

user_48181230
Related