[英]Import js file with TypeScript 2.0
I'm trying to import ".js" file from an external location (ie node_modules ) I'm trying to do this using commonjs module pattern, however import wouldn't want to work with ".js" file types until I add ".d.ts" file near ".js" file in the same folder. 我正在尝试从外部位置导入“.js”文件(即node_modules )我正在尝试使用commonjs模块模式执行此操作,但是导入不希望使用“.js”文件类型,直到我添加“ .d.ts“文件附近”.js“文件位于同一文件夹中。
But the problem is that I wouldn't want to affect any node_modules with my ".d.ts" files. 但问题是我不想用我的“.d.ts”文件影响任何node_modules 。 I want it to be located in another folder, separate from node_modules but as soon as I do that, typescript compiler throws an error:
我希望它位于另一个文件夹中,与node_modules分开,但是一旦我这样做, typescript编译器就会抛出一个错误:
I have the following folder structure: 我有以下文件夹结构:
|- DTS
| |- y.d.ts
|- main.ts
|- y.js
y.js has the following content y.js具有以下内容
module.export = function (x) {
console.log(x);
};
ydts has the following content ydts具有以下内容
export interface Y {
(x): any;
}
declare let y: Y;
export default y;
main.ts has the following content main.ts具有以下内容
import * as y from './y'
Now when I'm trying to compile main.ts with: 现在,当我尝试编译main.ts时:
tsc -m commonjs -t ES2015 main.ts
I will get an error: 我会收到一个错误:
x.ts(1,20): error TS2307: Cannot find module './y'.
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”声明,同时让两个文件位于不同的位置。
Here is the link to example project . 这是示例项目的链接 。 Be sure to use TypeScript version 2.0 compiler.
一定要使用TypeScript 2.0版编译器。 And the
tsc
command above to see the error. 并在上面的
tsc
命令中查看错误。
Note: The official recommendation for proving your type definitions takes 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 . 在类型检查(构建时)期间,TypeScript使用* .ts文件和(大多数) 忽略* .js文件 。 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 (eg N3 ).
假设存在一个非常好的JavaScript库,遗憾的是没有任何类型(例如N3 )。 Which has been installed via npm, thus:
已通过npm安装,因此:
npm install n3 --save
This, as is typical, is added to ./node_modules/n3/... and project.json. 这是典型的,添加到./node_modules/n3 / ...和project.json。 As mentioned the typings does not exist and needs to be added manually.
如上所述,输入不存在,需要手动添加。 I create an ./@types/n3.d.ts file for this purpose.
我为此创建了一个./@types/n3.d.ts文件。 For our purposes it is not particularly important what the definitions actually are but something like the following is a good start:
对于我们的目的而言,定义实际上并不是特别重要,但以下内容是一个良好的开端:
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 TypeScript and this discussion thread useful. 作为参考,您可以找到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" ]
},
...
being able to define it's ".d.ts" declarations while having both files located in different locations.
能够定义它的“.d.ts”声明,同时让两个文件位于不同的位置。
import
follows the same module resolution process when given a .js
or .d.ts
file with relative files. 当给定带有相关文件的
.js
或.d.ts
文件时, import
遵循相同的模块解析过程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.