如何为 TypeScript 配置自定义全局接口（.d.ts 文件）？

我目前正在开发一个使用 Webpack2 和 TypeScript 的 ReactJS 项目。除了一件事之外，一切都完美无缺 - 我找不到将自己编写的接口移动到单独文件中的方法，以便它们对整个应用程序可见。

出于原型设计的目的，我最初在使用它们的文件中定义了接口，但最终我开始添加一些在多个类中需要的接口，这就是所有问题开始的时候。无论我对 tsconfig.json 进行什么更改，无论我将文件放在哪里，我的 IDE 和 Webpack 都抱怨无法找到名称（“找不到名称 'IMyInterface'”） .

这是我当前的 tsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

如您所见，我的 tsconfig.json 在项目目录的根目录中，所有源代码都在 ./src 中，我将自定义 .d.ts 文件放在 ./typings 中并将其包含在 typeRoots 中。

我用 TypeScript 2.1.6 和 2.2.0 对其进行了测试，但都不起作用。

让这一切正常工作的一种方法是将我的 typings 目录移动到 src 然后 import {IMyInterface} from 'typings/blah' 但这对我来说感觉不对，因为它不是我需要使用的东西。我希望这些接口在我的应用程序中“神奇地”可用。

这是一个示例 app.d.ts 文件：

interface IAppStateProps {}
interface IAppDispatchProps {}
interface IAppProps extends IAppStateProps, IAppDispatchProps {}

我需要export 还是declare？我希望我不必将它们包装在名称空间中？！

更新（2020 年 10 月）

看到这个问题仍然非常受欢迎，我想更详细地解释解决方案。

首先，可能而且应该让人们感到困惑的是，我在问题末尾给出的界面示例实际上没有任何 export 关键字，即使我几乎可以肯定当时我的文件中确实有它们问这个问题。我相信我没有将它们包括在问题中，认为它们没有任何区别，无论它们是否存在。好吧，事实证明这不是真的，export 关键字正是使您能够“使用”接口而不是必须明确地import它们的原因。

因此，它在 TypeScript 中的工作方式如下：

如果您想要一个无需在消费模块中导入即可简单使用的接口/类型，则该接口必须驻留在 .ts 或理想情况下是 .d.ts 文件中没有任何导入或导出存在于同一文件中文件。这是最重要的，因为一旦您从同一个文件中导出至少一个东西，它就会变成一个模块，并且该模块中的所有内容都必须随后由消费者导入。

举个例子，让我们假设您想要一个名为 Dictionary 的类型，您希望能够在不导入的情况下使用它。声明方式如下：

// types.d.ts
interface Dictionary {}
interface Foo {}
interface Bar {}

要使用它，您只需执行以下操作：

// consumer.ts
const dict: Dictionary = {};

但是，如果由于某种原因该文件中的任何接口/类型被导出，它将不再起作用，例如：

// types.d.ts
interface Dictionary {}
interface Foo {}
export interface Bar {}

如果该文件中有导入，它也将不起作用：

// types.d.ts
import { OtherType } from 'other-library';

interface Dictionary {}
interface Foo extends OtherType {}
interface Bar {}

如果是这种情况，能够使用 Dictionary 类型的唯一方法是将其导出，然后将其导入使用者：

// types.d.ts
export interface Dictionary {}
interface Foo {}
export interface Bar {}

// consumer.ts
import { Dictionary } from './types';

const dict: Dictionary = {};

--isolatedModules

在 TypeScript 中使用 isolatedModules 模块标志时要记住一个额外的怪癖，重要的是，在使用 Create React App 时默认启用（并且不能禁用） - .ts 文件必须至少导出一件事否则你会得到 "All files must be modules when the '--isolatedModules' flag is provided." 错误。这意味着将 Dictionary 接口放在没有 export 关键字的 types.ts 文件中是行不通的。它必须是来自 .ts 文件的导出，或者是没有在 .d.ts 文件中导出的声明：

// types.d.ts
interface Dictionary {}        // works
export interface Dictionary {} // works

// types.ts
interface Dictionary {}        // doesn't work with --isolatedModules enabled
export interface Dictionary {} // works

注意
正如@dtabuenc 在他的回答中提到的环境模块（.d.ts 文件）不受欢迎，我的更正不应被视为建议。这只是解释普通模块和环境模块如何在 TypeScript 中工作的尝试。