$ref typecast 导致编译器需要分号来终止行

Question

我有一个 Vue 组件，它使用 vue-boostrap Modal 组件，其定义如下所示：

<template>
    <div>
        <b-modal ref="NewProjectDialog" id="NewProjectDialog" centered>
        </b-modal>
    </div>
</template>

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

    @Component()
    export default class Projects extends Vue {
        save_project() {
            (this.$refs['NewProjectDialog'] as BModal).hide()
        }
    }

上面的代码工作正常，但是我的转换方式似乎有误 $ref['NewProjectDialog']，因为编译器似乎将前一行作为表达式的一部分，例如以下代码生成 "Cannot invoke an expression whose type lacks a call signature." 错误：

save_project() {
    console.log('any code line without a semicolon fails')
    (this.$refs['NewProjectDialog'] as BModal).hide()
}

但以下代码编译正常：

save_project() {
    console.log('any code line without a semicolon fails');
    (this.$refs['NewProjectDialog'] as BModal).hide()
}

谁能解释为什么我需要行分隔符才能使代码正常工作？

Answer 1

此处需要分号以消除语法中的歧义。

问题不在于你在做演员表，而是演员表需要用括号括起来。

如果我们去掉代码的其他部分，只看语法，可能更容易理解：

foo()
(bar).fizz()
// vs
foo();
(bar).fixx

看起来一样，但是对于解释器来说，第一个看起来像

foo()(bar).fizz()

即您将 foo() 的结果作为函数调用。

如果我们以不同的方式定义变量，则此语法很有意义：

function foo() {
    return a => a*2;
}
var bar = 2;

foo()
(bar).toFixed(2);
// Prints 4.00

添加分号告诉解释器 foo() 是一个单独的调用，下一行不作为函数对其结果进行操作。

Answer 2

BootstrapVue v2.0.0-rc.21（和更新版本）有一个更简单的显示和隐藏模态的方法：

this.$bvModal.hide('id-of-modal')
this.$bvModal.show('id-of-modal')

上面的 this.$bvModal 有类型声明，所以它应该可以在没有任何转换的情况下工作。

$ref typecast 导致编译器需要分号来终止行

$ref typecast causes compiler to require semicolon to terminate line

typescript

vue.js

bootstrap-vue