Vue Typescript Flatpickr this.$refs.field 不可分配给 'string' 类型的参数

Question

Typescript in Vue with Flatpickr and Veevalidate as Package.

错误行：this.fp = new Flatpickr(this.$refs.field, {})

ERROR: Argument of type 'Element | Element[] | Vue | Vue[]' is not assignable to parameter of type 'string'. Type 'Element' is not assignable to type 'string'.

<template>
  <div>
    <label :for="name">{{ name }}</label>
     <input
      v-validate="validation"
      :name="name"
      :id="name"
      v-model="name"
      :placeholder="name"
      ref="field"
      type="text"
      value="value"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Flatpickr from 'flatpickr'

@Component({})
export default class BaseDate extends Vue {
  @Prop()
  name!: string

  @Prop({ default: '' })
  validation!: string

  @Prop()
  model!: string

  @Prop()
  validator!: any

  fp: any

  mounted (): void {
    this.$validator = this.validator
    this.fp = new Flatpickr(this.$refs.field, {})
  }
}
</script>

Answer 1

只需将参数转换为 Element（或 Node）：

this.fp = new Flatpickr(this.$refs.field as Element, {})

Flatpickr 构造函数期望参数类型为 Node | Node[] | string。 TypeScript 无法将 $refs 类型转换为预期类型；

export interface FlatpickrFn {
  (selector: Node, config?: Options): Instance;
  (selector: ArrayLike<Node>, config?: Options): Instance[];
  (selector: string, config?: Options): Instance | Instance[];
  defaultConfig: Partial<ParsedOptions>;
  l10ns: { [k in LocaleKey]?: CustomLocale } & { default: Locale };
  localize: (l10n: CustomLocale) => void;
  setDefaults: (config: Options) => void;
  parseDate: (
    date: DateOption,
    format?: string,
    timeless?: boolean
  ) => Date | undefined;
  formatDate: (date: Date, format: string) => string;
  compareDates: (date1: Date, date2: Date, timeless?: boolean) => number;
}

Answer 2

这是对我有效的最终解决方案：

this.fp = new (Flatpickr as any)(this.$refs.field as Element, {})

Vue Typescript Flatpickr this.$refs.field 不可分配给 'string' 类型的参数

Vue Typescript Flatpickr this.$refs.field is not assignable to parameter of type 'string'

typescript

vue.js

flatpickr