将JS文件导入到TypeScript中

Question

我正在考虑转换到Typescript，并尝试逐个文件进行此操作。

现在，我当前的系统是使用Webpack构建的，我希望继续使用它来构建我的整体捆绑包。

我有一个.d.ts文件用于定义，但我需要我的文件继续导入，目前会出现错误。

/// <reference path="../../../../vendor/src/foo.d.ts" />
import foo = require('../../../../vendor/src/foo.js');

foo('something');

目前出现错误，即使不使用引用路径也尝试过，似乎会引发一个“它不是模块”的错误。目前唯一不会引发错误的方法是不导入并简单地添加引用，但这意味着webpack将不知道我的文件的位置。

有什么想法吗？我搜索了很多，但我真的无法理解如何将JS文件导入到TypeScript中。

- Nick White

Answer 1

任何想法都可以搜索，但我并不能真正理解如何将JS文件导入到TypeScript中。对于Webpack来说，你只需要声明"require"函数，并做你已经习惯的事情：

var foo = require('../../../../vendor/src/foo');

require函数的类型定义可以在这里找到：https://github.com/TypeStrong/ts-loader#loading-other-resources-and-code-splitting

如果你想更强大地使用foo，建议将其移植到.ts文件中，而不是费力地构建和维护一个.d.ts文件。

- basarat

---

好的，这就是我所做的，但 Typescript 抛出了很多错误，但我可能做了一些奇怪的事情，我会再试一次。再次尝试时，我计划将所有内容逐步移植到 .ts，但我宁愿逐步进行而不是被迫在某些文件中打开依赖项树，因为一些文件中的 foo 可能是 10 个必需文件之一。 - Nick White

我刚刚尝试了一次快速尝试，现在Typescript抱怨foo被声明两次，尽管它只是一个定义文件。 - Nick White

“twice despite being only a definition file.” 这句话的意思是“尽管只是一个定义文件，但它被调用了两次。” 这个定义文件是否是一个模块？如果不是，它将进入全局命名空间并导致重复：https://basarat.gitbooks.io/typescript/content/docs/project/modules.html - basarat

Answer 2

那么，将foo.js简单地重命名为foo.ts（可能需要一些额外的步骤，但通常可以正常工作），然后将您的片段改写为：

 /// <reference path="../../../../vendor/src/foo.d.ts" />

 foo('something');

- MartyIX

---

这个问题是因为文件不再被需要或导入。这意味着像Webpack这样的工具将永远不会包含它，除非我可能漏掉了什么，但是/// <reference>部分只有TypeScript才用来定义变量。谢谢！ - Nick White

但是如果你将 foo.js 改为 foo.ts，那么 webpack 应该会将该文件包含在构建过程中，不是吗？ <reference> 用于静态类型控制，文件依赖树也基于 <reference> 注释（TS 文件的顺序很重要）。 - MartyIX

我看了一下，谢谢提醒。我已经在Atom上安装了TypeScript，但是做类似的事情会引发很多错误。 - Nick White

/// <reference path="../../../../vendor/Auxilium.js/src/attach-css.d.ts" />import attachCss from '../../../../vendor/Auxilium.js/src/attach-css.js';attachCss('s', 'a')我现在遇到了“找不到模块”的问题，但是我的导入文件路径是正确的。如果不使用文件扩展名，则会引发“这不是模块”的错误。我的 .d.ts 文件如下： declare function attachCss (ele: HTMLElement, css: Object) : HTMLElement; - Nick White

抱歉，我的意思是：var attachCss = require('../../../../vendor/Auxilium.js/src/attach-css');。 - MartyIX