将导入的类与 TypeScript 中的命名空间合并

Question

有效的：

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文件中看不到导入类的公共字段

Answer 1

您可以*.vue as VueContructor<Vue>通过文件代理来规避此问题*.ts：

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
}