Почему ругается TypeScript?

Question

[Александр Епихин]

Vue, Element UI, TypeScript, vue-class-component, vue-property-decorator.
TypeScript ругается на:

this.$refs.loginForm.validate((valid: boolean) => {} - Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'.

this.$refs.loginForm.resetFields(); - аналогичная ошибка

Код:

<template>
  <el-form :model="form" :rules="rules" ref="loginForm" label-width="80px" class="auth-form">
    <h3>Вход</h3>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="Пароль" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Войти</el-button>
  </el-form>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import { ElForm } from 'element-ui/types/form';
@Component
export default class Login extends Vue {
  @Ref("loginForm") readonly loginForm!: ElForm
  form = {
    email: "",
    password: ""
  }
  rules = {
    email: {
      required: true,
      message: 'Введите email',
      trigger: 'blur'
    },
    password: {
      required: true,
      message: 'Введите пароль',
      trigger: 'blur'
    },
  }
  submitForm(): void {
    this.$refs.loginForm.validate((valid: boolean) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }
  resetForm(): void {
    this.$refs.loginForm.resetFields();
  }
}
</script>

Answer 1

[Aetae]

Typescript работает только с кодом, он не знает что-там в Vue шаблоне, увы. Потому в $refs у него лежат голые компоненты Vue или Element'ы.
Я лично вручную указываю через объединение интерфейсов - внизу добавляю перекрывающий:

@Component
export default class Login extends Vue { 
  // ...
}
export default interface Login {
  $refs: {
     loginForm: any; // на самом деле не any, а интерфейс компонента, поддерживающий нужные методы
  }
}

Comments

[Александр Епихин]

Спасибо. Нашел еще такой способ:
(this.$refs.loginForm as ElForm).resetFields();

[Aetae]

Александр Епихин, это простое кастование типа. Его придётся писать каждый раз. Как по мне - мой вариант приятней и красивей.)

[Александр Епихин]

Согласен, мне не понятно почему мой изначальный код не работает. Вроде сделал как в документации

[Aetae]

Александр Епихин, а если присмотреться?)
У вас изначально ни один из предлженных варинтов не используется.
Ни первый вариант с декоратором @Ref() и прямым указанием типа, ни второй вариант с кастованием типа через as.:)

[Александр Епихин]

Не понимаю.
Чем мое:

import { Vue, Component,  Ref } from "vue-property-decorator";
import { ElForm } from 'element-ui/types/form';
@Component
export default class Login extends Vue {
  @Ref("loginForm") readonly loginForm!: ElForm
}

отличается от примера в документации:

import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'

@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

?

[Aetae]

Александр Епихин, прошу прощения не заметил первой строчки класса.
Отличается тем, что объявив через декоратор надо использовать просто через this.loginForm, а не this.$refs.loginForm.

Декоратор - не магия, это простая функция, которая там внутри просто добавляет вычисляемое не кеширующее свойство loginForm, которое, в свою очередь, просто возвращает this.$refs.loginForm, но с уже скастованными типами.

[Александр Епихин]

Теперь все отлично. Спасибо за краткий экскурс в декораторы.

[Александр Епихин]

Дальше начал подключать actions, опять проблемы, нужно добавлять декораторы (vuex-class). В итоге сделал как у вас, через объединение интерфейсов