Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio Code: compile typescript module

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 ?

UPDATE

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.

UPDATE

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.

like image 563
lhk Avatar asked May 05 '15 10:05

lhk


People also ask

What command is used to compile a TypeScript file?

Here, you will learn how to compile a TypeScript project and also learn about tsconfig. json. As you know, TypeScript files can be compiled using the tsc <file name>. ts command.

How TypeScript gets compiled?

The TypeScript compiler compiles these files and outputs the JavaScript with . js extension by keeping the same file name as the individual input file. The TypeScript compiler also preserves the original file path, hence the . js output file will be generated where the input file was in the directory structure.


2 Answers

I also faced the same problem today. I followed this link http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx 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.

like image 190
khagesh Avatar answered Oct 14 '22 19:10

khagesh


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.

like image 38
MircoT Avatar answered Oct 14 '22 17:10

MircoT