Javascript Vuejs类型脚本此。$refs<；refField>；。值不存在

在用typescript重写VueJs项目时，我遇到了一个typescript错误

这是具有自定义v型模型的组件的一部分

html中的一个输入字段有一个名为“plate”的ref，我想访问它的值。该字段上的@input调用下面编写的update方法

Typescript正在抱怨平板上不存在值

@Prop() value: any;

update() {
    this.$emit('input',
        plate: this.$refs.plate.value
    });
}

模板：

<template>  
<div>
    <div class="form-group">
        <label for="inputPlate" class="col-sm-2 control-label">Plate</label>

        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputPlate" ref="plate" :value="value.plate" @input="update">
        </div>
    </div>

</div>
</template>

盘子

我找到了一种让它工作的方法，但在我看来它很难看

请随意提出其他/更好的建议

update() {
    this.$emit('input', {
        plate: (<any>this.$refs.plate).value,
    });
}

update（）{
此.$emit（'input'{
车牌：（此.$refs.车牌）。数值，
});
}

我找到了一种让它工作的方法，但在我看来它很难看

请随意提出其他/更好的建议

update() {
    this.$emit('input', {
        plate: (<any>this.$refs.plate).value,
    });
}

update（）{
此.$emit（'input'{
车牌：（此.$refs.车牌）。数值，
});
}

您可以执行以下操作：

class YourComponent extends Vue {
  $refs!: {
    checkboxElement: HTMLFormElement
  }

  someMethod () {
    this.$refs.checkboxElement.checked
  }
}

从本期：

您可以执行以下操作：

class YourComponent extends Vue {
  $refs!: {
    checkboxElement: HTMLFormElement
  }

  someMethod () {
    this.$refs.checkboxElement.checked
  }
}

---

从本期开始：

避免使用括号

进行类型转换，因为它会与JSX冲突

试试这个

update() {
    const plateElement = this.$refs.plate as HTMLInputElement
    this.$emit('input', { plate: plateElement.value });
}

作为我一直记得的一个音符

Typescript只是Javascript，具有强大的键入功能以确保类型安全。因此（通常）它不会预测X的类型（var、param等），也不会自动对任何操作进行类型转换

---

此外，typescript的另一个用途是使JS代码变得更清晰/可读，因此尽可能始终定义类型。

避免使用括号

进行类型转换，因为它会与JSX冲突

试试这个

update() {
    const plateElement = this.$refs.plate as HTMLInputElement
    this.$emit('input', { plate: plateElement.value });
}

作为我一直记得的一个音符

Typescript只是Javascript，具有强大的键入功能以确保类型安全。因此（通常）它不会预测X的类型（var、param等），也不会自动对任何操作进行类型转换

此外，typescript的另一个用途是使JS代码变得更清晰/可读，因此只要有可能，就始终定义类型。

这对我来说很有用：使用

（this.$refs.as any）.value

或

（this.$refs.'refField']as any）.value

这对我有效：使用

---

（this.$refs.as any）。value

或

（this.$refs.'refField']as any）。value

可能对某人有用。它看起来更漂亮，并保留了类型支持

HTML:

---

也许它会对某人有用。它看起来更漂亮，并保留了类型支持

HTML:

编辑-2021-03（合成API） 更新此答案是因为Vue 3（如果使用Vue 2，则为composition API插件）具有一些新功能

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
  import { ref, onMounted, defineComponent } from '@vue/composition-api'

  export default defineComponent({
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  })
</script>

---

原始答案 以上所有答案都不适用于我想做的事情。添加以下$refs属性最终解决了该问题，似乎恢复了预期的属性。我发现解决方案链接到

class YourComponent扩展了Vue{
$refs！：{
vue:vue，
元素：HTMLInputElement，
Vue:Vue[]，
元素：HTMLInputElement[]
}
方法（）{
这个.$refs。。
}
}

Edit-2021-03（合成API） 更新此答案是因为Vue 3（如果使用Vue 2，则为composition API插件）具有一些新功能

<template>
  <div ref="root">This is a root element</div>
</template>

<script lang="ts">
  import { ref, onMounted, defineComponent } from '@vue/composition-api'

  export default defineComponent({
    setup() {
      const root = ref(null)

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  })
</script>

---

原始答案 以上所有答案都不适用于我想做的事情。添加以下$refs属性最终解决了该问题，似乎恢复了预期的属性。我发现解决方案链接到

class YourComponent扩展了Vue{
$refs！：{
vue:vue，
元素：HTMLInputElement，
Vue:Vue[]，
元素：HTMLInputElement[]
}
方法（）{
这个.$refs。。
}
}

在自定义组件方法调用的情况下

我们可以键入该组件名称，因此很容易引用该方法

e、 g

其中AnnotatorComponent是基于类的vue组件，如下所示

@Component
export default class AnnotatorComponent extends Vue {
    public saveObjects() {
        // Custom code
    }
}

---

如果是自定义组件方法调用

我们可以键入该组件名称，因此很容易引用该方法

e、 g

其中AnnotatorComponent是基于类的vue组件，如下所示

@Component
export default class AnnotatorComponent extends Vue {
    public saveObjects() {
        // Custom code
    }
}

圣维

const Son = Vue.extend({
  components: {},
  props: {},
  methods: {
    help(){}
  }
  ...
})
export type SonRef = InstanceType<typeof Son>;
export default Son;

const-Son=Vue.extend({
组件：{}，
道具：{}，
方法：{
help（）{}
}
...
})
导出类型SonRef=实例类型；
导出默认子；

parent.vue

<son ref="son" />

computed: {
  son(): SonRef {
    return this.$refs.son as SonRef;
  }
}

//use
this.son.help();

计算：{
son（）：SonRef{
将此$refs.son作为SonRef返回；
}
}
//使用
这个，儿子，救命；

son.vue

const Son = Vue.extend({
  components: {},
  props: {},
  methods: {
    help(){}
  }
  ...
})
export type SonRef = InstanceType<typeof Son>;
export default Son;

const-Son=Vue.extend({
组件：{}，
道具：{}，
方法：{
help（）{}
}
...
})
导出类型SonRef=实例类型；
导出默认子；

parent.vue

<son ref="son" />

computed: {
  son(): SonRef {
    return this.$refs.son as SonRef;
  }
}

//use
this.son.help();

计算：{
son（）：SonRef{
将此$refs.son作为SonRef返回；
}
}
//使用
这个，儿子，救命；

如果要将现有的

Vue

项目从js转换为ts并希望保留旧格式，请确保使用

Vue.extend（）

包装导出

之前：

导出默认值{
安装的（）{
设元素=此。$refs.graph；
...

之后：

从“Vue”导入Vue；
导出默认Vue.extend({
安装的（）{
设元素=此。$refs.graph；
...

如果要将现有的

Vue

项目从js转换为ts并希望保留旧格式，请确保使用

Vue.extend（）

包装导出

之前：

导出默认值{
安装的（）{
设元素=此。$refs.graph；
...

之后：

从“Vue”导入Vue；
导出默认Vue.extend({
安装的（）{
设元素=此。$refs.graph；
...

我正在使用

let mycop=Vue.extend（{}）

语法。我如何才能做到这一点？我也应该使用上面的语法吗？您可以创建一个表示引用类型的接口，然后转换为该类型。至少这样您可以避免使用any，并且您的视图将根据它进行类型检查。我建议