env.d.ts:

declare interface Operators {
  plus?: ' '
  minus?: '-'
  multiple?: '*'
  division?: '/'
}

declare interface Rule {
  digits: number
  operators: operator[]
  calcTimes: number
}

type operator = ' ' | '-' | '×' | '÷'

vue file : error(no-undef) @ Rule

<template>
  <div>111</div>
</template>

<script setup lang="ts">
const rule = useRuleStore()
const nums = reactive<Array<number>>([])
const generatorExpression = (rule: Rule) => {
  console.log(rule.digits)
  // TODO
  // randomIntNum(1, rule.digits)
  // generatorExpression(rule.operators)
}
</script>

index.ts: no error

// stores/counter.ts
import { defineStore } from 'pinia'

export const useRuleStore = defineStore('rule', {
  state: (): Rule => {
    return {
      digits: 10,
      operators: [' ', '-'],
      calcTimes: 1
    }
  },
  actions: {}
})

eslintrc.cjs:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    './.eslintrc-auto-import.json',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
  ],
  overrides: [],
  // ESLint: Parsing error: '>' expected.
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    project: ['./tsconfig.json'],
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ]
}

this program use: vite vue3 vue-router pinia ts eslint

interface Rule error(no-undef) in *.vue ,but it work in *.ts.

remove eslint will work fine. anybody can explane this? How can I make eslint recognize the interface from the .d.ts file?

Thanks

CodePudding user response：

eslint suggests you simply turn the no-undef rule off for typescript projects and let typescript handle typing

We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.