Vue Typescript Flatpickr this.$refs.field 不可分配给“字符串”类型的参数答案

【问题标题】：Vue Typescript Flatpickr this.$refs.field is not assignable to parameter of type 'string'Vue Typescript Flatpickr this.$refs.field 不可分配给“字符串”类型的参数
【发布时间】：2019-08-26 09:46:57
【问题描述】：

Typescript 在 Vue 中，Flatpickr 和 Veevalidate 作为包。

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

错误：类型参数'Element |元素[] | Vue | Vue[]' 不可分配给“字符串”类型的参数。类型“元素”不可分配给类型“字符串”。

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

【问题讨论】：

标签： typescript vue.js flatpickr

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只需将参数转换为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;
}

【讨论】：