TypeScript With Visual Studio 2010
This article provides a crude yet effective way to use TypeScript in Visual Studio 2010 and prior versions.
TypeScript is a new language from Microsoft. It is actually an Open Source project hosted in CodePlex. You can refer to many of the other articles in this web site for more about TypeScript.
The TypeScript plugin does not support versions of Visual Studio prior to 2012. Since TypeScript is Open Source it is likely someone will create a plugin for versions of Visual Studio prior to 2012. It is possible however to use TypeScript within Visual Studio, although without most of the features that the plugin provides.
The following is the overall procedure:
- Install the TypeScript Visual Studio 2012 Plugin
- Create a Visual Studio "Tool" to execute tsc
- Create a .ts file then compile and execute it
Install the TypeScript Visual Studio 2012 Plugin
Go to the TypeScript web site. Click the button that says "Get TypeScript now". Then click on the link that says "Download the plugin". The plugin insallation will also install the tsc command. Note that the "System requirements" only lists editions of Visual Studio 2012, nothing prior to that. You can still install the plugin and when you do get Visual Studio 2012, you can re-run the plugin installation.
Create a Visual Studio "Tool" to execute tsc
Find where the tsc command was installed; it probably will be:
C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0
Then in Visual Studio in the "Tools" menu select "External Tools...". The External Tools window will appear; it looks like:
Except for you, the "Menu Contents" box will likely be empty or nearly empty. Click the "Add" button, and then the fields at the bottom will be cleared and a new entry will be created. Enter values as in the preceding image. The following describes the values to use:
- whatever you want to use
- the path and the filename for the tsc command
- -e "$(ItemPath)"
- Use Output window
- Select it
You can leave everything else as their default values. For Command, the path is explained above; the filename is tsc.exe. In other words, the following is what I have for "Command":
C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\tsc.exe
Using those arguments, you must have a .ts file open as the active (visible) file in the Visual Studio editor, and when you use the tool, the .ts file will be converted to a .js file and then executed. If the code writes to the console then the output will go to the VS Output window.
Create a .ts file then compile and execute it
Create a .ts file. There are many ways to do that but one way is to use "File" | "New" | "File..." then select "Text File". Then rename that file so as to change the txt extension to ts. Then put the following one line in the .ts file:
Save the file. Note that when you use a Tool in this manner, VS does not automatically save the file; you must explicitly save the file before using the tool. In the Tools menu there should be a menu item with the name you provided previously; if you used my suggestion, it is called "TypeScript". Warning: The compiler will replace a file, if it exists already, that is in the same location as the ts file with the same name except the new or replaced file will have a .js extension, so ensure you do not have such a file that you need to preserve. After using the tool with the .ts file visisble in VS with the preceding code, you should get the following for the Output window:
You can refer to the other articles in this web site for more sample code.