vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别

Question

项目中使用vue+typescript
使用this.$refs.refsName和document.querySelector打印出来的结果是一样的

但是当使用API是。$refs获得的DOM就报错：请问是需要在ts项目中添加什么ts相关的配置吗？

Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.

  Property 'getBoundingClientRect' does not exist on type 'Vue'.

any

    let el = this.$refs.refsName

    console.log('el:', el);

    let element = document.querySelector('.content-box')

    console.log('element:', el);

    console.log(element['style'].width)

    // 1.element 调用API正常

    console.log(window.getComputedStyle(element).width)

    console.log(element.getBoundingClientRect())

    

    // 2.el 调用报错

    // Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.Property 'getBoundingClientRect' does not exist on type 'Vue'.any

    // console.log(el.getBoundingClientRect()) 

    // console.log(window.getComputedStyle(el).width)

知道了，要把let el = this.$refs.refsName改为：let el: any = this.$refs.refsName，定义一个类型

Answer 1

typescript 是强类型语言 你这属于 类型不明确的问题