vue.js - 在 TypeScript 中將導入的類與命名空間合併

有效：

class InputField {
  
}

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

export { InputField };

無效：

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

我如何將 導入的 InputField 類與命名空間 InputField 合併（並重新導出）？

我將如何使用結果

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

為什麼我需要這個

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

因此，TypeScript 無法在 .vue 檔案中看到已匯入類別的公用欄位

答案＃1

你可以透過一個 *.ts 文件代理它，來規避這個 *.vue as VueConstructor<Vue> 問題：

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

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

export {exportClassName}

但是

您可以使用 static 來達到與透過命名空間完成的相同結果：

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

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

答案＃2

限制

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

它可以通過靜態欄位解決。