typescript - typescript 的全局模块定义

Question

我正在使用以下文件结构在 Webstorm 中开发一个项目

| src
    | ...
    | many files
| types
    | SomeInterface
        | index.d.ts
    | AnotherInterface
        | index.d.ts
    | index.d.ts

我想让 SomeInterface 全局可用(无需导入即可使用接口(interface))。

我的主要 index.d.ts 如下:

import { SomeInterface } from './SomeInterface'
import { AnotherInterface} from './AnotherInterface'

declare global {
  interface MainInterface extends SomeInterface {
    someAttribute?: number[]
    names: SomeInterface[]
    contactData: AnotherInterface[]
  }
}

每当我尝试在 src/some/path/to/file.ts 中实现类型定义时:

function someFunctionName(parsedData: MainInterface):void{...}

我收到以下消息:ESLint: 'MainInterface' 未定义。(no-undef)

这是我当前的 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "allowJs": true,
    "checkJs": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noImplicitAny": false,
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    }
  },
  "include": ["src", "types/index.d.ts"],
  "exclude": ["node_modules"]
}

我错过了什么吗？我知道不建议在全局范围内提供东西，但我被要求以这种方式特别这样做。

Answer 1

typescript-eslint FAQ在这里提供指导:

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

但是 no-undef 对 JavaScript 很有用，所以如果你混合使用，最好只对使用 TypeScript 的文件禁用它，例如对于 Vue + TypeScript:

"overrides": [
    {
        "files": ["*.ts", "*.vue"],
        "rules": {
            "no-undef": "off"
        }
    }
]

当然，由于 no-undef 被禁用，因此不要使用 JavaScript 编写 Vue 文件。