是否有将JavaScript文件转换为TypeScript的工具?


133

现在TypeScript出来了,这对我来说是一个令人振奋的消息,但是如何将所有现有的JavaScript文件转换为TypeScript。


3
由于typescript是javascript的超集,因此您所有的javascript文件都已经是typescript文件。
本杰明·格伦鲍姆

6
这与题外话相反,从一种编程语言转换为另一种是一个编程问题。
伊万·卡斯泰拉诺斯

2
@Tony_Henrich那么,应该将其移到那里,而不是“关闭为offtopic”,并且顺便说一句,该站点应该有明确的类别,以供软件工程师参考。
伊万·卡斯泰拉诺斯

3
@Tony_Henrich让我们这样说:这是Internet上“将JavaScript转换为TypeScript”的最佳结果,而您能做的最好的事情就是从进一步的答案中将其关闭,并称之为脱题?我认为,如此狭thinking的想法将使该网站消亡。
伊万·卡斯特拉诺斯

5
荒谬的是,这被关闭作为主题。
bharal

Answers:


112

我担心这会很成问题。TypeScript是JavaScript的超集。这意味着所有有效的JavaScript代码也是有效的TypeScript代码。这是错误的。以下代码在JavaScript中是正确的,但在TypeScript中会产生错误:

var data={x:5, y:6};
data.z=5;

您可以通过将数据声明为“环境”来获得JavaScript的动态行为

var data:any={x:5, y:6};
data.z=5;

现在,这也可以在TypeScript中使用。不过,您可以将.js文件的扩展名更改为.ts,然后将此文件传递给TypeScript编译器。这真的让我感到困惑,我在freenode上的TypeScript IRC频道中问了这个问题。事实证明,Typescript编译器会检查其输入中是否包含有效的JavaScript,并且在发现某些内容时不会执行任何操作。直观上来说,这听起来不错。您只需要更新文件扩展名就应该能够将所有JavaScript都“转换”为Typescript,并且一切顺利。不幸的是,这不能按预期工作。假设您有以下代码:

var func=function(n){alert(n)};

var data={x:5};
data.z=6;

编辑:我只是试图编译它,它不起作用。对不起,我似乎误会了:TypeScript编译器甚至不接受纯JavaScript。我将尝试找出问题所在。

您已将文件扩展名更改为.ts,并在其他代码中使用了func函数。起初一切似乎都很好,但随后出现了一个丑陋的错误。您认为某些静态类型检查可能会为您提供帮助,然后将代码更改为:

var func=function(n:string){alert(n)};

var data={x:5};
data.z=6;

但是现在这不再是有效的JavaScript代码,它将导致编译器生成许多错误消息。毕竟所有数据都没有成员“ z”。...如果默认类型始终为“ any”,则可以避免这种行为,但是类型推断将毫无用处。

那么您如何解决这个问题呢? 答案是:声明文件。您可以在项目中“按原样”使用JavaScript代码,并借助一些.d.ts文件进行静态类型检查。它们通知编译器在JavaScript文件中声明了哪些变量,方法和“类”,包括它们的类型。因此,它们允许进行编译时类型检查和出色的智能感知。我的示例的.d.ts文件是

declare var data:any;
declare function func(n:string);

将其另存为“ myjsfile.d.ts”,然后将其导入到打字稿中

///<reference path="myjsfile.d.ts"/>

确保在已编译的打字稿上方的html文件中包含JavaScript脚本。这是一个有趣的链接。您可能对“将JavaScript转换为TypeScript”一节感兴趣。


57
+1指出并非所有有效的JS都是有效的TS。
肯·史密斯

14
实际上,您发布的所有JavaScript代码段都是有效的打字稿。您只需要关闭一些编译器开关,例如--noImplictAny等。但是,将其最终打开并在需要的地方添加类型注释是个好主意
Liero

谢谢。当我告诉人们TypeScript不是JavaScript的超集时,无论我提供什么示例,我都只会争论。最终,当我向他们展示原因时,人们放弃了论点,然后他们在下周进行了同样的辩论,好像忘记了布丁中的证据。“ 所有有效的JavaScript代码也是有效的TypeScript代码...是错误的 ”-LHK
科迪

3
尽管TypeScript出现“错误”,但TypeScript仍允许将其编译为JavaScript(在当前的TypeScript演示版中,此答案中的所有JavaScript示例都没有编译问题),它确实可以作为超集工作-至少包括那些TypeScript编译器能够处理...
Brett Zamir,

是的,我在这个问题上“两面都”。从本质上讲,TS在某种意义上是JS的超集:TypeScript会抱怨一些有效的JS代码,但是只要noEmitOnError关闭,它仍然可以操作并发出其翻译。因此,尽管它显示了错误(令人不安),但实际上您可以忽略这些错误并使用TypeScript转译(例如,允许从JS逐渐过渡到TS)。同样,至少某些错误可以通过类似的开关禁用noImplicitAny(也许全部通过IDK)。
Venryx

51

更新:这篇文章中详细描述了该工具

从版本9开始的ReSharper(可用EAP构建)具有将JavaScript代码自动转换为TypeScript的功能。您可以从将.js文件重命名为.ts开始,然后看到像这样的R#建议:

尚未在实际示例中尝试过。但是它能够转换大量的JavaScript模式。


我很乐意通过使用手动编辑的元文件来快速执行此操作,从而创建所需的所有TS膨胀。
xamiro

您好,我使用的是reshaper,所以只能将.js重命名为.ts吗?就像我正在使用a.js文件并重命名a.ts文件一样,resharper会给出任何建议吗?我正在使用Visual Studio社区版本并安装了Resharper
Swift

1

从终端(mac):

for f in *.js; do mv $f `basename $f .js`.ts; done;

将所有.js文件重命名为.ts

这有点可笑,但正如本杰明指出的,上述JavaScript文件是有效的TypeScript。如果要向JavaScript添加类型,类,接口等-您将需要使用这些概念设计和更改代码 -几乎没有/没有自动转换。

使用GNU findutils(大多数* nixes)+ Bash,只需执行以下操作:

find -type f -name '*.js' -exec bash -c 'mv "${1}" "${1%???}.ts"' bash {} \;

10
+1-有点像尝试将经过删节的书自动转换回完整版本。
Fenton

所有类型信息都将被删除,所有接口都将被删除-大量信息消失了。任何具有足够信息以推断类型信息的JavaScript都可以直接粘贴到TypeScript文件中,并且编译器可以计算出这些类型,但是由于JavaScript不一致,因此许多实例将无法工作。
Fenton

1
从什么转换成什么?从JS派生类型并将其添加到vars?不知道还有什么可以自动转换,也不确定如何(同时)派生类,接口和模块。
7zark7

4
并非所有JavaScript代码都在TypeScript中有效,请尝试以下操作:var a = 5; a = "";
coudy 2013年

4
第二,证明其不合理之处,当您尝试将模块或插件从其本机JS转换为TypeScript时,您将很快意识到并非所有JS代码在TypeScript中都是有效的(例如jquery.address等)
dpb
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.