compilation - Visual Studio Code: compile typescript module - Stack Overflow
Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
J it only takes a minute:
I've just downloaded the new Visual Studio Code and my first impression is very positive. For typescript, intellisense works beautifully.
However, there is a strange problem: VS Code doesn't seem to be able to compile typescript modules.
This code:
/// &reference path="../definitions/react.d.ts"/&
import React = require("react");
compiles perfectly fine on the cmd, with
tsc --module commonjs main.ts
but within VS Code, the second line is highlighted in red and the editor complains:
cannot compile external modules unless the "-module" flag is provided
Of course any typescript code which makes use of modules has to be compiled with this flag. But if the IDE is aware of the usage of modules, why doesn't it set the flag ? Typescript code without modules is compiled on save, without problems.
I think I'm missing some compiler-setup config file. Is there such a thing ? Where can I find it ?
I've added the tsconfig.json file:
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
This actually removes the error. Unfortunately the IDE no longer compiles my code. At first I thought the config.json would only silence the error message, but it does more than that. Intellisense now works in the sample file. If I type React the autocompletion is triggered and apparently knows React because meaningful suggestions are displayed.
Now, why doesn't VS Code compile the file to js ? I've tried to configure the task runner to do that job, but it doesn't seem to work:
"version": "0.1.0",
// The command is tsc.
"command": "tsc",
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// Under windows use tsc.exe. This ensures we don't need a shell.
"windows": {
"command": "tsc.exe"
// args is the HelloWorld program to compile.
"args": ["--module commonjs","${file}"],
// use the standard tsc problem matcher to find compile problems
// in the output.
"problemMatcher": "$tsc"
If I save the file, nothing happens, even if I explicitly run the build task, there's no response. The name of the task I edited is "tsc", I tried to run that, too. No effect. Then I changed the arguments to "args": ["--module commonjs","main.ts"], No response.
The only way the task runner seems to work is with these two settings:
"args": ["${file}"],
"isShellCommand": true,
Here are the outputs:
"args": ["-p"],
"args": ["-p", "."],
error TS5023: Unknown compiler option 'p'.
"args": ["."],
error TS6053: File '.ts' not found.
3,77454370
I also faced the same problem today. I followed this link
After following all setup steps, I ran this command on command line and it started generating JavaScript files
npm install -g typescript
We need to ensure that we have node and npm installed and accessible through command line.
The reason I found it was not working because in tasks.json we specify following options
"command": "tsc"
"isShellCommand": true,
So, visual studio code tries to run command tsc on command line and it does not find tsc. So, installing typescript globally using npm solved the problem.
I had the same problem in another project on VS Code and I figured out that VS Code was using a different version of Typescript.
Here are the outputs:
"args": ["-p"],
"args": ["-p", "."],
error TS5023: Unknown compiler option 'p'.
"args": ["."],
error TS6053: File '.ts' not found.
I had the 1.5.3 from npm and he was using the 1.0.3, this because I had installed in the system Typescript also in Microsoft SDKs and it was accesible from the PATH.
The solution was remove from global and user PATH this Typescript of Microsoft SDKs to access the newest one from npm that can manage -p args.
Try to execute tsc command with only -v argument to verify if it is the correct version.
Regarding compiling the code, the tasks.json file should look like this:
"version": "0.1.0",
"command": "tsc",
"showOutput": "silent",
"windows": {
"command": "tsc.exe"
"args": ["-p", "."],
"problemMatcher": "$tsc"
If you are running under Windows and have tsc installed as a node module globally, change the windows section to:
"windows": {
"command": "tsc",
"isShellCommand": true
The -p . args tell the tsc compiler to look for a tsconfig.json file in the root folder and use it to compile your project.
2,65411834
You need to create a tsconfig.json file in the root of your project.
Set "module": "commonjs"
basic example:
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true
I had the same problem and found the solution right here on stackoverflow, provided by Steve Fenton:
His proposal is elegant, complies with the current VS Code standards and worked immediately as described. Add this to File -> Preferences -> Keyboard Shortcuts as an overwrite:
"key": "ctrl+s",
"command": "workbench.action.tasks.build"
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .25258
Stack Overflow works best with JavaScript enabledTypeScript1.0发布，完美支持Visual Studio系列产品
发表于 10:24|
作者夏梦竹
摘要：TypeScript 1.0发布，该版本支持Visual Studio等产品。微软表示将继续专注TypeScript语言的开发，以创建更高效的开发环境，包括智能感知、项目支持以及强大的代码导航功能。
是由微软公司于2012年发布（用以替代JavaScript）的一门语言，该项目主要的负责人Anders Hejlsberg （C#、TurboPascal 之父）。TypeScript提供了类、模块和接口来帮助构建健壮的组件，帮助JavaScript开发人员更容易地编写和维护应用程序。时隔两年，TypeScript&1.0终于发布了（当然，在这期间也有一些小版本发布），该版本支持、以及，此外还提供了和。微软表示，将继续专注TypeScript语言的开发，以创建更高效的开发环境，包括智能感知、项目支持以及强大的代码导航功能。下面是TypeScript在&Visual Studio 2013中的演示：TypeScript在中的示例：更多详细内容参见：下载地址：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章中国领先的IT技术网站
51CTO旗下网站
突如其来的Visual Studio Code为何这么热门？大牛来给你深度剖析！(1)
这次放出的VSCode，算是轻量级的VS，用的是TypeScript/JavaScript并且结合atom用的开发跨平台桌面应用程序库atom/electron ? GitHub开发出来的，而且内置支持NodeJS(包括NPM)、Yeoman、Express、gulp、mocha、bower等当下前端开发领域非常热门的一些工具/库，不得不说，微软这次真的很潮！
作者：来源：oschina/知乎 整理| 14:05
本文内容由&&翻译自&
Microsoft 今天在其&上正式宣布了&&项目：一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 web 和云应用的跨平台编辑器。该应用仍然处于预览版阶段，但是你现在就可以在下载体验。
这标志着 Microsoft 第一次向开发者们提供了一款真正的跨平台编辑器。虽然完整版的 Visual Studio 仍然是只能运行在 Windows 之上，但是今天的声明向我们展示了这家公司对于支持其他计算机平台的承诺。
&很多人都使用 Windows 作为他们的开发环境，但是我们也注意到了，还有很多人使用 Linux 和 Mac&，Somasegar，Microsoft 公司的开发者事业部总裁在这周稍早时候对笔者如是说道。&我们想让他们能够在他们习惯的平台上使用我们公司的产品，而不是非要迁徙到 Windows 上&。这些平台上的很多开发者们也更乐意于使用像 Sublime Text 这种轻量级的代码编辑器，而非像 Visual Studio 这种全特性的 IDE。
Visual Studio Code 为开发者们提供了对多种编程语言的内置支持，并且正如 Microsoft 在今天 Build 大会的 keynote 中所指出的，这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。JavaScript，TypeScript，Node.js 和 ASP.NET 5 开发者也将会获得额外的工具集。
该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax hight lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。
正如 Somasegar 所言，新款编辑器部分基于 Microsoft 为 Visual Studio Online 编写 Monaco 编辑器时的经验，但是该公司也正努力将一些 Visual Studio 的语言特性带到 Visual Studio Code 上，例如 Roslyn 项目，Microsoft 的 .NET 编译器平台。并且 Microsoft 声称这些为 VSC 打造的语言服务也会在其他编辑器包括 Sublime Text，Vi 以及 Atom 中可用。
上面提到的一些语言特性已经在其他编辑器中可用了。就在不久前，Microsoft 启动了针对 Sublime Text 的 TypeScript 插件项目，并且 Somasegar 告诉笔者该公司承诺会在未来启动更多类似于这样的项目（归根结底，是为了满足开发者们的需要）。
Visual Studio Code 的发布的确来的很突然。然后仔细想想这在一段时间之前就已经有了预兆，比如 .NET 内核的开源（以及使其能够跨平台运行）或者是社区版的 Visual Studio Community 的启动。
如果是在短短几年前，今天的宣布势必会引起轩然大波，但是今天，这对我们来说更多的是惊喜。
大家都在看猜你喜欢
原创头条头条头条热点
24H热文一周话题本月最赞
讲师：22人学习过
讲师：7人学习过
讲师：12人学习过
精选博文论坛热帖下载排行
本书所介绍的Struts 2已经完全超出了Struts 1框架原有的高度，Struts 2建立在Struts 1和WebWork两个框架整合的基础之上，因此提供了更多优...
订阅51CTO邮刊译者：张天军
本文为组织翻译，转载请注明出处。
世界在TypeScript的眼里是什么样子呢？你在使用TypeScript versus ES6编程的时候有什么得失呢？
如果你一直在琢磨这个问题，那么今天我们将深入地帮你列出答案。解决这个问题的最好办法是通过代码。所以让我们来深入了解它吧。在本文中，我们将改造 Kendo UI 的示例app中的其中一个 - Layout Digram App。我选择这个示例是因为它包含了各种排序的 Kendo UI 控制。由于我们很多人使用 Angular JS 开发，我们将继续并且从它的 jQuery 实现方式来重构（如果你不使用 Angular ，这个示例仍然是可以参考的，简单忽略特定的 Angular 位）。
(用安装)；
一个支持的IDE。如下：
（我自己使用的IDE & 本文也是用这个 IDE）
（所有版本）
（TypeScript 定义管理器 - 命令行工具）
TSD（TYPESCRIPT DEFINITION MANAGER）你需要下载所有的。这个包含了我们项目中使用的JavaScript库的定义（AngularJS，lodash，KendoUI，等。）你可以把TSD命令行工具当做其它依赖包工具的等价物，比如Nuget，Bower，npm，等等。
安装TSD，你需要安装Node.js/npm：
npm install tsd -g
你现在可以搜索并且安装其它TypeScript包。TSD目前即包含JavaScript库的客户端定义，又包含JavaScript库的服务端定义。
tsd query angular
结果如下（简化）：
- angular-agility
/ angular-agility
- angular-bootstrap-lightbox / angular-bootstrap-lightbox
- angular-dialog-service
/ angular-dialog-service
- angular-dynamic-locale
/ angular-dynamic-locale
- angular-file-upload
/ angular-file-upload
- angular-formly
/ angular-formly
- angular-gettext
/ angular-gettext
- angular-google-analytics
/ angular-google-analytics
- angular-growl-v2
/ angular-growl-v2
- angular-hotkeys
/ angular-hotkeys
- angularjs
然后你可以根据自己需求自定义安装：
tsd install angular --save
你可能会注意到TypeScript的定义文件已“d.ts”为后缀，比如 AngularJS 的 TypeScript定义文件 为 angular.d.ts 。在安装一个定义文件的时候忽略 --save 选项，如果文件不存在将创建一个tsd.d.ts文件，并且为我们项目中的每个TypeScript定义的依赖添加入口。
下面是运行命令行的目录结构图：
├── myapp/
├── typings
├── angularjs
├── angular.d.ts
├── tsd.d.ts
下面你会注意到，一条添加到Angular tsd依赖的命令是如何为我们 app/project 目录下的
提供其他的依赖的。
/// &reference path=&express/express.d.ts& /&
/// &reference path=&node/node.d.ts& /&
/// &reference path=&stylus/stylus.d.ts& /&
/// &reference path=&serve-favicon/serve-favicon.d.ts& /&
/// &reference path=&morgan/morgan.d.ts& /&
/// &reference path=&body-parser/body-parser.d.ts& /&
/// &reference path=&errorhandler/errorhandler.d.ts& /&
/// &reference path=&serve-static/serve-static.d.ts& /&
/// &reference path=&mime/mime.d.ts& /&
/// &reference path=&../public/lib/kendo-ui/typescript/kendo.all.d.ts& /&
/// &reference path=&angularjs/angular.d.ts& /&
/// &reference path=&angular-ui-router/angular-ui-router.d.ts& /&
/// &reference path=&jquery/jquery.d.ts& /&
你可能会注意到列表中包含了Kendo UI tsd。有时我们下载的例如Kendo UI，angular-ui-router，和其他包括tsd文件的JavaScript库。在这些情况下，我们可以只打开tsd.d.ts文件，并且直接引用到我们项目app/project目录（使用相对路径）。
正如我前面所述，本文中，我们将使用AngularJS重构。这是一个很好的例子，因为它在案例app中使用了很多 Kendo UI组件，允许我们通过TypeScript和AngularJS使用大量的Kendo UI组件。
别名（可选）
在TypeScript中，有一个静态输入数据类型的概念，据我所知，大部分团队通常不管他们正在敲些什么，只是完全的限定。然而这篇文章中，我们将重命名大部分 Kendo UI，因而使他们根据简短。同样，你也可以跳过命名空间步骤的别名，并且按你所想的，对所有都完全限定。
例如，我们使用完全限定的命名空间初始化一个 ObservableArray ：
var myArray = new kendo.data.ObservableArray([]);
那么，下面我们使用别名命名空间初始化一个 ObservableArray
import ObserverableArray = kendo.data.ObservableA // aliased
var myArray = new ObserverableArray([]); // initialized w/ alias
下一步，我们继续解决关注点分离。我们将从逻辑层和返回数据的view model分离view（presentation），例如组件初始化和数据绑定。
TypeScript接口抽象（可选）
作为一个最佳实践，我习惯为每一个 Angular Controller/ViewModel 创建一个接口，并且放在相同的文件中，作为 Controller的实现。为什么呢？这里有几个重要的原因：
ng Controller（class）的目的很明显，通过接口我们可以快速理解这个意图，用处和关注点。
理解什么是ng.IScope($scope)的界限。
下面是IDiagramController接口（diagram.controller.ts）：
interface IDiagramController {
diagramWidget: D
diagramWidgetOptions: IDiagramO
canvasBackgroundColor:
selected: Array&any&;
selectedShape: S
selectedConnection: C
diagramZoomOptions: ISliderO
menuOptions: IMenuO
uploadOptions: IUploadO
splitterOptions: ISplitterO
panelBarOptions: IPointO
colorPickerOptions: IColorPickerO
canvasLayoutOptions: IDropDownListO
connectionCapOptions: IDropDownListO
windowWidgetOptions: IWindowO
shapeItemDraggableOptions: IDraggableO
alignConfigurationOptions: IButtonO
arrangeConfigurationOptions: IButtonO
windowWidget: K
shapePropertiesChange: (e: JQuery) =&
exportClick: (e: HTMLAnchorElement) =&
现在我们可以实现IDiagramController，我们尽量使用Controller/ViewModel，注意，下面，我们使用Angular注册DiagramController的地方实现这个类。我也建议使用Angular 1.x版本，因为无论何时升级到Angular v2，都会很好的兼容。
class DiagramController implements IDiagramController {
static $inject = ['$scope', '$window'];
constructor(private $scope: IDiagramScope, private $window: any) {
.module('diagram')
.controller('diagram.DiagramController', DiagramController);
TypeScript开发时间和完美编译时间
TypeScript 的好处是所有的类都是类型安全的，而且提供了一个支持确定开发时和编译时错误提醒。当完全由TypeScript编写时，当你的类型是混合类型或者使用静态语言例如C#，Java，C++，等等实现非静态操作时，你能够获取开发时和编译时的错误。
例如，如果你使用 Visual Studio Code，你好注意到，你能够获取接口没有被马上实现的警告，如果我们通过TypeScript获取编译错误。实际上我们使用混合类型是相同的（例如使用number声明，赋值string）。
Paste_Image.png
下面TypeScript能够从声明中推断出myArray是ObservableArray 的一种类型。然而我们设置myArray 为 ObservableObjectm TypeScript 会立即指示错误位置。
Paste_Image.png
重构操作和KENDO MENU
让我们来看看重构代码以支持新架构的案例，首先jQuery 和JavaScript版本：
var actions = {
blank: reset,
undo: undo,
redo: redo,
copy: copyItem,
paste: pasteItem
$(&#menu ul&).kendoMenu({
dataSource: [
{ text: &New&, spriteCssClass: &new-item&, items: [
{ text: &Blank&, spriteCssClass: &blank-item&, cssClass: &active& }
{ text: &Open&input id='upload' type='file' name='files' /&&, encoded: false, spriteCssClass: &open-item&, cssClass: &upload-item& },
{ text: &Save&a id='export' download='diagram.json'&&/a&&, encoded: false, spriteCssClass: &save-item& },
{ text: &Undo&, spriteCssClass: &undo-item&, cssClass: &active& },
{ text: &Redo&, spriteCssClass: &redo-item&, cssClass: &active& },
{ text: &Copy&, spriteCssClass: &copy-item&, cssClass: &active& },
{ text: &Paste&, spriteCssClass: &paste-item&, cssClass: &active& }
select: function(e) {
var item = $(e.item),
itemText = item.children(&.k-link&).text();
if (!item.hasClass(&active&)) {
actions[itemText.charAt(0).toLowerCase() + itemText.slice(1)]();
与此相比，使用TypeScript和AngularJS 版本如下：
var actions: IMenuActions = {
blank: (e: IMenuSelectEvent): void =& {
this.diagramWidget.clear();
undo: (e: IMenuSelectEvent): void =& {
this.diagramWidget.undo();
redo: (e: IMenuSelectEvent): void =& {
this.diagramWidget.redo();
copy: (e: IMenuSelectEvent): void =& {
this.diagramWidget.copy();
paste: (e: IMenuSelectEvent): void =& {
this.diagramWidget.paste();
vm.menuOptions = {
dataSource: [
text: &New&, spriteCssClass: &new-item&, items: [
{ text: &Blank&, spriteCssClass: &blank-item&, cssClass: &active& }
{ text: &Open&input kendo-upload='upload' type='file' name='files' k-options='vm.uploadOptions' /&&, encoded: false, spriteCssClass: &open-item&, cssClass: &upload-item& },
{ text: &Save&a id='export' download='diagram.json' ng-click='vm.exportClick($event)'&&/a&&, encoded: false, spriteCssClass: &save-item& },
{ text: &Undo&, spriteCssClass: &undo-item&, cssClass: &active& },
{ text: &Redo&, spriteCssClass: &redo-item&, cssClass: &active& },
{ text: &Copy&, spriteCssClass: &copy-item&, cssClass: &active& },
{ text: &Paste&, spriteCssClass: &paste-item&, cssClass: &active& }
select: (e: IMenuSelectEvent) =& {
var item = angular.element(e.item),
itemText = item.children(&.k-link&).text();
if (!item.hasClass(&active&)) {
actions[itemText.charAt(0).toLowerCase() + itemText.slice(1)](e);
重构SHAPEPROPERTIES变化事件
这里，我们将重构ShapeProperties变化事件，当其中一个属性（颜色，形状等）改变时，会同步更改选中对象的设计显示。
首先，jQuery和JavaScript版本：
$(&#shapeProperties&).on(&change&, shapePropertiesChange);
function shapePropertiesChange() {
var elements = selected || [],
options = {
fill: $(&#shapeBackgroundColorPicker&).getKendoColorPicker().value(),
color: $(&#shapeStrokeColorPicker&).getKendoColorPicker().value(),
width: $(&#shapeStrokeWidth&).getKendoNumericTextBox().value()
bounds = new Rect(
$(&#shapePositionX&).getKendoNumericTextBox().value(),
$(&#shapePositionY&).getKendoNumericTextBox().value(),
$(&#shapeWidth&).getKendoNumericTextBox().value(),
$(&#shapeHeight&).getKendoNumericTextBox().value()
for (i = 0; i & elements. i++) {
element = elements[i];
if (element instanceof Shape) {
element.redraw(options);
element.bounds(bounds);
下面让我来看看 TypeScript和AngularJS版本：
&span&Background Color:&/span&
&input kendo-color-picker
ng-model=&vm.selectedShape.options.fill&
k-on-change=&vm.shapePropertiesChange(kendoEvent)& /&
&span&Stroke Color:&/span&
kendo-color-picker
ng-model=&vm.selectedShape.options.stroke.color&
k-on-change=&vm.shapePropertiesChange(kendoEvent)& /&
&span&Stroke Width:&/span&
&input kendo-numeric-text-box type=&text&
k-ng-model=&vm.selectedShape.options.stroke.width&
k-on-change=&vm.shapePropertiesChange(kendoEvent)& /&
&!-- code shortened for brevity--&
请看，你会发现借助于Angular的MVVM优势，我们再也不需使用jQuery selectors 去拼凑UI控件。现在我们直接绑定View到ViewModel：
public shapePropertiesChange = (e: JQuery): void =& {
var elements = this.selected || [];
var i: number,
elements.forEach((element) =& {
if (element instanceof Shape) {
var shape =
shape.redraw({
fill: this.selectedShape.options.fill,
stroke: this.selectedShape.options.stroke
shape.bounds(
this.selectedShape.height,
this.selectedShape.width,
this.selectedShape.x,
this.selectedShape.y
你可能会注意到，我们使用到了TypeScript中的新功能。例如，我们在上述forEach方法（aka fat arrows 和lambdas）中使用了箭头的功能。
随着最近发布的，我们如今甚至能够使用新功能开发，这个新功能可以兼容很多浏览器，即使不支持ES6或ES7。
INTELLISENSE
此外，即使是Kendo UI类型我们也可以获取 Intellisense，因为我们声明了selectedShape 并且定义为Kendo UI Shape 类型。
var selectedShape: kendo.dataviz.diagram.S
Paste_Image.png
显然，这将是和所有你导入的TSD库类型相似的，包含了jQuary，Angular 和 loadsh。
此外，我们现在可以实现一个真正的“查找所有依赖” 或者“查找所有使用”，举例来说，你能够为我们在ViewModel或者Angular控制器中的selectedShape实现一个“查找所有依赖”。如果这是用于工程间，我们也能够跨工程获取结果列表。
Paste_Image.png
如果你使用Visiual Studio Code，则能够打开“peek”视图，并且在右侧列出所有使用this.selectedShape的列表。你能够通过点击浏览每一个出现的地方，而且通过右侧的视图列表浏览也能够自动的滚动到出现的地方。
Paste_Image.png
其它存在TypeScript特性的有：
Solution-wide 重构
值得注意的是，这些特不仅Visual Studio Code独有的。在大多数支持TypeScript的IDE都可以使用。由于为JavaScript提供了强大的开发和编译时体验，因此TypeScrip带来了很多好处，可以提高你的开发效率。
我已经上传了文中介绍用TypeScript和AngularJS重构Kendo UI Diagram Application的sample到上。你可以访问。我也已经部署已完成和已经重构好的应用，。
在接下来的文章中，我打算使用Kendo替换TypeScript和Angular2 TypeScript with NativeScript。可以通过Twitter@lelong37 给我意见反馈或者直接留言。
祝编码愉快！