使用TypeScript 2.0导入js文件 [英] Import js file with TypeScript 2.0

问题描述

我正在尝试从外部位置导入.js文件（即 node_modules ）我正在尝试使用commonjs模块模式执行此操作，但 import 不希望使用.js文件类型，直到我在同一文件夹中的.js文件附近添加.d.ts文件。

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 import wouldn't want to work with ".js" file types until I add ".d.ts" file near ".js" file in the same folder.

但问题是我不想用我的.d.ts文件影响任何 node_modules 。我希望它位于另一个文件夹中，与 node_modules 分开，但是一旦我这样做，typescript编译器就会抛出错误：

But the problem is that I wouldn't want to affect any node_modules with my ".d.ts" files. 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:

我有以下文件夹结构：

|- DTS
|   |- y.d.ts
|- main.ts
|- y.js

y.js 具有以下内容

module.export = function (x) {
    console.log(x);
};

ydts 具有以下内容

export interface Y {
    (x): any;
}
declare let y: Y;
export default y;

main.ts 具有以下内容

import * as y from './y'

现在当我尝试编译 main.ts 时：

tsc -m commonjs -t ES2015 main.ts

我将收到错误：

x.ts(1,20): error TS2307: Cannot find module './y'.

问题

如何导入。 js文件并能够定义它的.d.ts声明，同时让两个文件位于不同的位置。

Question

How to import ".js" files and being able to define it's ".d.ts" declarations while having both files located in different locations.

以下是示例项目的链接。一定要使用TypeScript 2.0版编译器。并且上面的 tsc 命令可以看到错误。

Here is the link to example project. Be sure to use TypeScript version 2.0 compiler. And the tsc command above to see the error.

推荐答案

注意： 证明您的类型定义的官方建议采用与下面所示略有不同的方法。
我认为下面的方法略好一些，因为* .d.ts文件几乎与最终产品完全相同。

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.

在类型检查（构建时）中TypeScript适用于* .ts文件和（大部分）忽略* .js文件。
让我举一个例子，激励你（我相信）你提出的建议。
假设存在一个非常好的JavaScript库，遗憾的是没有任何类型（例如 N3 ）。
已经通过npm安装，因此：

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:

npm install n3 --save

这通常会添加到 ./ node_modules / n3 /...和项目中。 JSON。
如上所述，输入不存在，需要手动添加。
我为此创建了一个 ./@ types / n3.d.ts 文件。
对于我们的目的而言，定义实际上并不是特别重要，但以下内容是一个良好的开端：

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.ts file 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:

declare namespace N3 {
}

declare module "n3" {
    export = N3;
}

现在回答你的问题。
更新' tsconfig.json '：

Now to your question. Update the 'tsconfig.json':

...
"compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "@types"
    ],
...
"paths": {
  "*": [
    ...
    "./@types/*"
  ]

仍然需要处理用于查找相应* .js文件的运行时解析，但这与您提出的问题不同。

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.

作为参考，您可以找到 TypeScript中的新功能
和此讨论主题有用。

For reference you may find What is new in TypeScript and this discussion thread useful.

这种方法在处理全局变量时工作正常，但与模块不同。

This approach works fine when working with global variables but not so much with modules.

更新' tsconfig.json '：

...
"paths": {
  "*": [
    ...
    "./@types/*"
  ],
  "foo": [ "./@types/foo.d.ts" ]
  },
 ...

这篇关于使用TypeScript 2.0导入js文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！