TypeScript inside Visual Studio 2012 - how?

Topics: General
Oct 1, 2012 at 9:57 PM
Edited Oct 1, 2012 at 9:58 PM

I've downloaded and installed both Visual Studio Express 2012 for the Web and the TypeScript plugin. What now?

There's no option in Visual Studio to create or open a TypeScript project and the sample typescript file which I created via File > New does have neither syntax highlighting nor IntelliSense. Also, I can't find a way to access the TypeScript compiler. So what's the point?

I'm sure that I installed the plugin correctly (after I installed Visual Studio).

Oct 1, 2012 at 10:24 PM

I'm having the same issue, as well.

Oct 1, 2012 at 10:38 PM

Thanks for reporting this issue! What version of VS Express are you folks using? VS Express for Web is the only version we support at this time. If you have Express for Windows 8 or Windows Desktop installed, the plugin will install without issue but you will not have the VS plugin component.

You should be able to find the compiler executable (tsc.exe) under %ProgramFiles(x86)%\Microsoft SDKs\TypeScript.

Oct 2, 2012 at 1:31 AM

I have a similar issue- windows server 2008 r2, visual studio premium 2012.  Installed typescript, added greeter.ts, pasted code from the TypeScript tutorial, F6... javascript code-behind file wasn't updated/synced with the ts code.  Opened the command window,

>tsc greeter.ts

Command "tsc" is not valid.

>

Oct 2, 2012 at 8:25 AM

I installed Visual Studio Express 2012 for the Web on Windows 7 (64bit).

Oct 2, 2012 at 8:57 AM

I do have the same issue with Visual Studio 2012 Ultimate on Windows 8.

I installed the VS plugin + Npm install. I do have the syntax working correctly but I do not have a particular project to create neither can I use the VS Command Window to generate my javascript.

Oct 2, 2012 at 8:57 AM

I do have the same issue with Visual Studio 2012 Ultimate on Windows 8.

I installed the VS plugin + Npm install. I do have the syntax working correctly but I do not have a particular project to create neither can I use the VS Command Window to generate my javascript.

Oct 2, 2012 at 11:28 AM

I've got the VSPlugin and the NPM version. I get syntax highlighting but the .js file under the .ts never updates itself. If I delete the .js it never generates again.

Oct 2, 2012 at 12:46 PM
Edited Oct 2, 2012 at 12:47 PM

Manually executing the language service installer did the trick for me:

http://stackoverflow.com/questions/12684987/create-a-new-typescript-project-in-visual-studio

Oct 2, 2012 at 5:01 PM

Have a look here : http://blogs.msdn.com/b/timart/archive/2012/10/02/typescript-project-in-visual-studio-2012.aspx

Oct 2, 2012 at 9:41 PM

Why the ____ is the TypeScript template to be found under the C# section. This is maybe the default when you use a C#-oriented Visual Studio but in my case C# just happen to be in the "Other languages" categories. Hopefully, the search box of the "New Project" form did the trick but I would prefer the template to be in the "JavaScript" language section.

Oct 2, 2012 at 10:20 PM

yeah, that confused me as well. turned out to be right there from the beginning.. :/

Oct 4, 2012 at 1:19 AM

There is no "TypeScript" project type in Visual Studio yet.  That work is a lot more involved, and we haven't done it for this preview release.  Our templates are based on existing project types, and the TypeScript compilation is just a call out to "tsc" in a prebuild task.  It's simple, and it works, but it does mean living within another project type.  Sorry for any confusion this caused by being in a non-obvious location.

If the js file isn't getting built with the project, take a look in the project file and make sure the TypeScript file is listed in the "TypeScriptCompile" ItemGroup.

  <ItemGroup>
    <TypeScriptCompile Include="app.ts" />
  </ItemGroup> 



This is the list of files passed to the compiler in the BeforeBuild step.

Jan 16, 2014 at 2:55 PM
Hello Everyone,

I am using Visual Studio 2012 Ultimate on Windows 7. I have downloaded and installed TypeScriptSetup.0.9.5.
But when I try to create ASP.NET MVC3 WEB APPLICATION and select Project Template as TypeScript Internet Application I get this error
"The system cannot find the file specified. Exception from HResult 0x80070002"

I tried reparing the TypeScript setup and it shows "All components repaired successfully".

I also cross checked if I could simply create ASP.NET MVC3 WEB APPLICATION with Project Template as Internet application, and what I could see is I could successfully create this.

Is there any problem with TypeScript setup?

Could anybody please help me out to sort this issue?

Thanks in advance.
Jan 16, 2014 at 5:15 PM
@apurvap,

my guess is that you shouldn't be selecting the TypeScript project template.

Simply create an ASP.Net MVC3 Web Application then edit the csproj file to import TypeScript targets.
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
You can check your TypeScript installation by creating a project of type "HTML Application with TypeScript" and ensuring that you are able to compile the project correctly.

You may also want to log a ticket on the issue tracker with that exception.
Jan 17, 2014 at 6:46 AM
Edited Jan 17, 2014 at 8:23 AM
Hi Nabog,

Thank you very much for your quick response.

As you said, the HTML Application with TypeScript works just fine. It compiles ts to form js.

Next what I did is

Instead of MVC3, I now switched to MVC4 and followed things given in here http://www.devcurry.com/2012/10/typescript-template-for-aspnet-mvc4.html.

But for MVC4, in cs project file, instead of just adding

<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>

which didn't work for me, I replaced it by

<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.9.5.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
</Target>

and I could build the project successfully.

After building the project, there are no errors. When I try to execute the code written in ts-site.ts which is simply
$(document).ready(function () {
$("#linkToggle").click(function () {
    $("#main").slideToggle("slow");
    $(this).toggleClass("active");
});
});

whereas linkToggle is my anchor tag id, and main is the section wherein @RenderBody() lies.

I checked out in developer tool's console it doesn't show any script errors. Also the code is not executed as is supposed to.

Also I noticed that, though build is succeeded, I can't see the required js file which should have been created on build according to the rule that ts file compiles to js file.

What might have gone wrong? Any idea?
Jan 17, 2014 at 4:36 PM
@apurvap, there is really no magic to TypeScript: it takes a .ts file and turns it into a corresponding .js file.

Here's a check list:
  1. First ensure your website is working with a pure JavaScript file, say ts-site.js
  2. Rename ts-site.js to ts-site.ts
  3. Compile the project and ensure a JavaScript file has been generated.
  4. If the file has not been generated, compare the ASP.Net .csproj file with a working "HTML Application with TypeScript" project to see what is amiss.
  5. Keep troubleshooting until ts-site.js magically appears.
That's about it.

(BTW I was wrong: there is a little magic to TS)