如何为TypeScript配置自定义全局接口(.d.ts文件)? [英] How to configure custom global interfaces (.d.ts files) for TypeScript?
问题描述
我目前正在研究一个使用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中./p>
我用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?我希望我不必将它们包装在名称空间中吗?！
魔术可用的接口"或全局类型.另外，您不应将环境声明文件(例如d.ts文件)用于正在编写的代码.这些是为了代替外部非打字稿代码(基本上将打字稿类型填充到js代码中，以便您可以更好地将其与javascript集成).
对于编写的代码，应该使用普通的.ts文件定义接口和类型.
不建议使用全局类型，但对您的问题的答案是，Typescript中有两种.ts文件类型.这些被称为scripts和modules.
script中的所有内容都是全局的.因此，如果您在脚本中定义接口，它将在整个应用程序中全局可用(只要脚本通过///<reference path="">标记，通过files:[]或includes:[]或默认的**/*.ts包含在编译中即可)您的tsconfig.json.
另一个文件类型是'module'，module中的任何内容都是该模块专用的.如果您从某个模块导出任何内容，那么如果其他模块选择导入它，则其他模块也可以使用它.
是什么使.ts文件成为脚本"或模块"?好吧....如果您在文件中的任何位置使用import/export，该文件将成为模块".如果没有import/export语句，则它是一个全局脚本.
我的猜测是您无意中在声明中使用了import或export并将其放入一个模块，该模块将您所有的接口都变为私有.如果您希望它们是全局的，那么请确保您未在文件中使用import/export语句.
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.
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.json and 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').
Here's my current tsconfig.json file:
{
"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.json is in the root of the project directory, all source is in ./src, I placed my custom .d.ts files in ./typings and included it in typeRoots.
I tested it with TypeScript 2.1.6 and 2.2.0 and neither works.
One way of getting it all to work is to move my typings directory into src and 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.
Here's a sample app.d.ts file:
interface IAppStateProps {
}
interface IAppDispatchProps {
}
interface IAppProps extends IAppStateProps, IAppDispatchProps {
}
Do I need to export them or maybe declare? I hope I don't have to wrap them in a namespace?!
"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.ts files) 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).
For code you write you should be using plain .ts files to define your interfaces and types.
While global types are discouraged, the answer to your issue is that there are two types of .ts files in Typescript. These are called scripts and modules.
Anything in a script will 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 **/*.ts in your tsconfig.json.
The other file type is 'module', and anything in a module will 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.
What makes a .ts file a "script" or a "module"? Well.... if you use import/export anywhere in the file, that file becomes a "module". If there are no import/export statements then it is a global script.
My guess is you have inadvertently used import or export in 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.
这篇关于如何为TypeScript配置自定义全局接口(.d.ts文件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
