Question

过去几个小时我一直在努力解决这个问题，而我似乎无法在互联网上找到任何可以清楚解释这个简单概念的内容。

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

出于原型设计的目的，我最初在使用它们的文件中定义了接口，但最终我开始添加一些在多个类中需要的接口，并且当所有问题都开始时。无论我对tsconfig.json做了什么更改，无论我把文件放在哪里，我的IDE和Webpack都抱怨无法找到名字（Could not find name '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？我希望我不必将它们包装在命名空间中？！

Answer 1

“神奇可用的接口”或全局类型是非常不鼓励的，应该主要留给遗留。此外，您不应该使用环境声明文件（例如d.ts文件）来编写您正在编写的代码。这些代替了外部非打字稿代码（基本上将打字稿类型填入js代码中，以便您可以更好地将其与javascript集成）。

对于您编写的代码，您应该使用普通.ts文件来定义接口和类型。

虽然不鼓励使用全局类型，但问题的答案是在Typescript中有两种类型的.ts文件。这些称为scripts和modules。

script中的任何内容都是全局的。因此，如果您在脚本中定义接口，它将在整个应用程序中全局可用（只要脚本通过///<reference path="">标记或files:[]或includes:[]包含在编译中，或者**/*.ts中的默认tsconfig.json。

另一种文件类型是“模块”，module中的任何内容都是模块专用的。如果您从模块中导出任何内容，那么如果其他模块选择导入它，则其他模块可以使用它。

是什么使.ts文件成为“脚本”或“模块”？好吧......如果你在文件中的任何地方使用import/export，该文件就会成为“模块”。如果没有import/export语句，那么它就是一个全局脚本。

我的猜测是你无意中在声明中使用了import或export并将其变成了一个模块，它将所有接口转换为该模块中的私有。如果您希望它们是全局的，那么您将确保不在文件中使用导入/导出语句。

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

1 个答案: