写vue的时候，eslint跟typescript冲突的问题

Question

我用eslint来解析typescript的，用的是这个@typescript-eslint/parser,产生了以下问题

用this.$emit('change', (<HTMLInputElement>e.target).checked)这个语法的时候
产生这个错误 Parsing error: JSX element 'HTMLInputElement' has no corresponding closing tag
他把这个<HTMLInputElement>解析成标签了 于是让我闭合它。为啥会这样呢。

也没说是哪条规则错了
明明用的是vue 为什么会当做jsx解析呢。

.eslintrc.js

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
    browser: true
  },
  extends: [
    'standard',
    'plugin:vue/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  plugins: [
    'html',
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    'space-before-function-paren': 0,
    'vue/singleline-html-element-content-newline': 0,
    'vue/max-attributes-per-line': ['error', {
      'singleline': 3,
      'multiline': {
        'max': 1,
        'allowFirstLine': false
      }
    }],
    'vue/html-closing-bracket-newline': 0,
    'vue/html-self-closing': ['error', {
      'html': {
        'void': 'never',
        'normal': 'never',
        'component': 'always'
      },
      'svg': 'always',
      'math': 'always'
    }],
    'vue/require-default-prop': 0,
    'vue/attributes-order': 0,
    'vue/html-self-closing': 0,
    'vue/html-closing-bracket-spacing': 0
  }
}

tsconfig.json

{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": true,
    "module": "es2015",
    // 启用实验性的ES装饰器
    "experimentalDecorators": true,
    "moduleResolution": "node"
  },
  "include": [
    "packages/*/src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

checkBox.vue

<template>
  <div>
    <h3>爱好：</h3>
    <input type="checkbox" @change="onChange" :checked="checked"/>游戏
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from 'vue-property-decorator'

@Component
export default class CheckBox extends Vue {
  @Model('change', {
    type: Boolean
  })
  checked!: boolean

  onChange(e: Event): void {
    console.log(e)
    // this.$emit('change', (e.target as HTMLInputElement).checked)
    this.$emit('change', (<HTMLInputElement>e.target).checked)
  }
}
</script>

那是以上的配置文件

Answer 1

使用(e.target as HTMLInputElement).checked

至于为什么，是因为尖括号的类型断言形式和JSX语法冲突了，所以Typescript官方也推荐在可能使用JSX的场景推荐使用as形式