Introduction
TypeScript is a new language from Microsoft. It is actually an Open Source project hosted on CodePlex. You can refer to many of the
other articles on 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.
TypeScript files normally have a "ts" file extension. You can edit ts files using Visual Studio, then convert (compile) the TypeScript to JavaScript by executing tsc (the TypeScript "compiler") as a Visual Studio Tool. So let us back up a bit. Whether you use TypeScript or not, you can execute JavaScript that is in a file. You can do that without a web site, without Internet Explorer or any browser and without HTML. With TypeScript, you can use the tsc command to convert (compile) TypeScript to JavaScript. You can also get tsc to execute the JavaScript after it converts (compiles). After the TypeScript is converted to JavaScript, you can then execute the JavaScript directly just as if the original TypeScript does not exist.
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 installation 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:
- Title
- whatever you want to use
- Command
- the path and the filename for the tsc command
- Argument
- -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 visible in VS with the preceding code, you should get the following for the Output window:
You can refer to the other articles on this web site for more sample code.