如何为 TypeScript 配置自定义全局接口(.d.ts 文件)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42233987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-09 07:35:21  来源:igfitidea点击:

How to configure custom global interfaces (.d.ts files) for TypeScript?

typescripttypescript-typingstypescript2.0typescript1.8

提问by Andris

I'm currently working on a ReactJS project which uses Webpack2 and TypeScript. Everything works perfectly apart from one thing - I can't a find a way to move interfaces that I've written myself into separate files so that they are visible to the whole application.

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

For prototyping purposes I initially had interfaces defined in files that use them but eventually I started adding some that were needed in multiple classes and that's when all the problems started. No matter what changes I make to my tsconfig.jsonand no matter where I put the files my IDE and Webpack both complain about not being able to find names (Could not find name 'IMyInterface').

出于原型设计的目的,我最初在使用它们的文件中定义了接口,但最终我开始添加一些在多个类中需要的接口,这就是所有问题的开始。无论我对我tsconfig.json的文件做了什么更改,也无论我将文件放在哪里,我的 IDE 和 Webpack 都抱怨无法找到名称 ( Could not find name 'IMyInterface')。

Here's my current tsconfig.jsonfile:

这是我当前的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"
  ]
}

As you can see, my tsconfig.jsonis in the root of the project directory, all source is in ./src, I placed my custom .d.tsfiles in ./typingsand included it in typeRoots.

正如你所看到的,我tsconfig.json是项目目录的根目录,所有的来源是./src,我把我的自定义.d.ts文件./typings和包括它typeRoots

I tested it with TypeScript 2.1.6 and 2.2.0 and neither works.

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

One way of getting it all to work is to move my typingsdirectory into srcand then import {IMyInterface} from 'typings/blah'but that doesn't feel right to me as it's not something I need to use. I want those interfaces to just be 'magically' available throughout my application.

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

Here's a sample app.d.tsfile:

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

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

Do I need to exportthem or maybe declare? I hope I don't have to wrap them in a namespace?!

我需要export他们declare吗?我希望我不必将它们包装在命名空间中?!

回答by dtabuenc

"Magically available interfaces" or global types is highly discouraged and should mostly be left to legacy. Also, you should not be using ambient declaration files (e.g. d.tsfiles) for code that you are writing. These are meant to stand-in the place of external non-typescript code (essentially filling in the typescript types into js code so that you can better integrate it with javascript).

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

For code you write you should be using plain .tsfiles to define your interfaces and types.

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

While global types are discouraged, the answer to your issue is that there are two types of .tsfiles in Typescript. These are called scriptsand modules.

虽然不鼓励使用全局类型,但问题的答案是.tsTypescript 中有两种类型的文件。这些被称为scriptsmodules

Anything in a scriptwill be global. So if you define your interfaces in a script it will be available globally throughout your application (as long as the script is included in the compilation through either ///<reference path="">tags or through files:[]or includes:[]or the default **/*.tsin your tsconfig.json.

a 中的任何内容都script将是全局的。所以,如果你在脚本定义接口,这将是整个应用程序在全球上市(只要剧本是通过任一包含在编译///<reference path="">标签或通过files:[]includes:[]或默认**/*.ts在您的tsconfig.json

The other file type is 'module', and anything in a modulewill be private to the module. If you export anything from a module it will be available to other modules if those other modules chose to import it.

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

What makes a .tsfile a "script" or a "module"? Well.... if you use import/exportanywhere in the file, that file becomes a "module". If there are no import/exportstatements then it is a global script.

什么使.ts文件成为“脚本”或“模块”?嗯.... 如果你import/export在文件中的任何地方使用,那个文件就变成了一个“模块”。如果没有 import/export语句,则它是一个全局脚本。

My guess is you have inadvertently used importor exportin your declarations and made it into a module, which turned all your interfaces to private within that module. If you want them to be global then you would make sure you are not using import/export statements within your file.

我的猜测是你无意中在你的声明中使用了importexport并将它变成了一个模块,这将你的所有接口都变成了该模块中的私有接口。如果您希望它们是全局的,那么您将确保您没有在文件中使用导入/导出语句。