Javascript 使用 TypeScript 2.0 导入 js 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38445132/
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
Import js file with TypeScript 2.0
提问by Lu4
Abstract
抽象的
I'm trying to import ".js" file from an external location (i.e. node_modules) I'm trying to do this using commonjs module pattern, however importwouldn't want to work with ".js" file types until I add ".d.ts" file near ".js" file in the same folder.
我正在尝试从外部位置（即node_modules）导入“.js”文件我正在尝试使用 commonjs 模块模式来执行此操作，但是导入不想使用“.js”文件类型，直到我添加“ .d.ts”文件在同一文件夹中的“.js”文件附近。
But the problem is that I wouldn't want to affect any node_moduleswith my ".d.ts" files. I want it to be located in another folder, separate from node_modulesbut as soon as I do that, typescript compiler throws an error:
但问题是我不想用我的“.d.ts”文件影响任何node_modules。我希望它位于另一个文件夹中，与node_modules分开，但是一旦我这样做，typescript编译器就会抛出一个错误：
Example
例子
I have the following folder structure:
我有以下文件夹结构：
|- DTS
| |- y.d.ts
|- main.ts
|- y.js
y.jshas the following content
y.js有以下内容
module.export = function (x) {
console.log(x);
};
y.d.tshas the following content
ydts有以下内容
export interface Y {
(x): any;
}
declare let y: Y;
export default y;
main.tshas the following content
main.ts有以下内容
import * as y from './y'
Now when I'm trying to compile main.tswith:
现在，当我尝试使用以下命令编译main.ts时：
tsc -m commonjs -t ES2015 main.ts
I will get an error:
我会得到一个错误：
x.ts(1,20): error TS2307: Cannot find module './y'.
Question
题
How to import ".js" files and being able to define it's ".d.ts" declarations while having both files located in different locations.
如何导入“.js”文件并能够在两个文件位于不同位置的同时定义它的“.d.ts”声明。
Edit
编辑
Here is the link to example project. Be sure to use TypeScript version 2.0 compiler. And the tsccommand above to see the error.
这是示例项目的链接。请务必使用 TypeScript 2.0 版编译器。和tsc上面的命令查看错误。
采纳答案by phreed
Note: The official recommendation for proving your type definitionstakes a slightly different approach than what is presented below. I believe the approach below is slightly better as the *.d.ts file is practically identical to the final product.
注意：证明您的类型定义的官方建议采用的方法与下面介绍的方法略有不同。我相信下面的方法稍微好一点，因为 *.d.ts 文件实际上与最终产品相同。
During typechecking (build time) TypeScript works with *.ts files and (mostly) ignores *.js files. Let me offer an example that motivates what (I believe) you are proposing. Suppose there exists a perfectly good JavaScript library that sadly has no typings (e.g. N3). Which has been installed via npm, thus:
在类型检查（构建时）期间，TypeScript 使用 *.ts 文件并且（大部分）忽略 *.js 文件。让我举一个例子来激发（我相信）你提出的建议。假设存在一个完美的 JavaScript 库，遗憾的是它没有类型（例如N3）。已通过 npm 安装，因此：
npm install n3 --save
This, as is typical, is added to ./node_modules/n3/...and project.json. As mentioned the typings does not exist and needs to be added manually. I create an ./@types/n3.d.tsfile for this purpose. For our purposes it is not particularly important what the definitions actually are but something like the following is a good start:
这是典型的，被添加到./node_modules/n3/...和 project.json。如前所述，类型不存在，需要手动添加。为此，我创建了一个./@types/n3.d.ts文件。就我们的目的而言，定义实际上是什么并不特别重要，但以下内容是一个好的开始：
declare namespace N3 {
}
declare module "n3" {
export = N3;
}
Now to your question. Update the 'tsconfig.json':
现在回答你的问题。更新“ tsconfig.json”：
...
"compilerOptions": {
"typeRoots": [
"node_modules/@types",
"@types"
],
...
"paths": {
"*": [
...
"./@types/*"
]
It will still be necessary to deal with the run-time resolution for locating the corresponding *.js files but that is a different question than the one you asked.
仍然需要处理用于定位相应 *.js 文件的运行时分辨率，但这与您提出的问题不同。
For reference you may find What is new in TypeScriptand this discussion threaduseful.
作为参考，您可能会发现TypeScript 中的新增功能和此讨论线程很有用。
This approach works fine when working with global variables but not so much with modules.
这种方法在处理全局变量时工作得很好，但在处理模块时效果不佳。
Update the 'tsconfig.json':
更新“ tsconfig.json”：
...
"paths": {
"*": [
...
"./@types/*"
],
"foo": [ "./@types/foo.d.ts" ]
},
...
回答by basarat
being able to define it's ".d.ts" declarations while having both files located in different locations.
能够在两个文件位于不同位置的同时定义它的“.d.ts”声明。
importfollows the same module resolution process when given a .jsor .d.tsfile with relative files.
import当给定具有相关文件的.js或.d.ts文件时，遵循相同的模块解析过程。
