Web Development

Microsoft tools streamline TypeScript development

Here's what you need to know to start using the TypeScript plug-in for Visual Studio 2012 to develop and test code.

TypeScript is Microsoft's attempt to simplify building large-scale applications with JavaScript. Microsoft recognized the need for tools to make managing these applications easier and created the Web Essentials 2012 extension and TypeScript plug-in for Visual Studio 2012 (I assume full TypeScript support will be included in Visual Studio 2013). Here's a tour of the marriage of TypeScript and Visual Studio 2012, with an emphasis on developing and testing code.

Get everything you need

The TypeScript plug-in for Visual Studio 2012 provides a TypeScript editor within the IDE. In addition, it installs the command-line compiler if it is not already installed. TypeScript support is installed via the Web Essentials 2012 download as well, but it does not include the editor. While you can develop TypeScript without the plug-in, it is easier with it, because the plug-in provides IntelliSense and in-line compilation, which should make you more productive. Web Essentials 2012 provides the ability to adjust compiler settings, use regions, and much more.

You should install downloads to have everything you need for TypeScript development. The plug-in download is straightforward, as it is contained in one MSI file, but it does require a system reboot for the changes to Visual Studio 2012 to be made. Web Essentials 2012 is a Visual Studio extension, but its download and installation is as simple as point-and-click. (You need Visual Studio 2012 to use both downloads.)

Develop TypeScript in Visual Studio 2012

With your environment set up, you are ready to develop TypeScript. You can choose to work with TypeScript files or build a complete application. You can work with TypeScript files by selecting File | New File, which opens the New File window (Figure A). Select Script on the left side of Figure A to see the TypeScript File type shown. Or, you may opt to create a project by selecting File | New Project and choosing TypeScript (HTML Application with TypeScript) (Figure B). Figure C shows the result of creating a project.

Figure A

TypescriptVS_FigA_072413.jpg

Figure B

TypescriptVS_FigB_072413.jpg

Figure C

TypescriptVS_FigC_072413.jpg

You can see the TypeScript support by creating a file. As an example, I create a TypeScript file that will include the following code. I utilize IntelliSense while typing the code (Figure D).

class automobile {
constructor(public make: string, public year: number, public model:string) { }
}
class car extends automobile {
constructor(make: string, year: number, model: string) {
super(make, year, model);
}
getInfo(): string {
return this.year + " " + this.make + " " + this.model;
}  }
var example: car = new car("Ford", 2000, "Mustang");
console.log(example.getInfo());

Figure D

TypescriptVS_FigD_072413.jpg

Another great feature included with the Web Essentials 2012 installation is the split screen view of your TypeScript code; by default, it shows the original TypeScript on the left with the equivalent standard JavaScript on the right. The presentation for our sample code is shown in Figure E. The TypeScript (the simplified version) is on the left, and the JavaScript on the right is a bit more complex with the prototype, function, and other language features used.

Figure E

TypescriptVS_FigE_072413.jpg

You generate the JavaScript equivalent code shown in Figure E by compiling your TypeScript code. This can be accomplished with the command-line compiler, but the Web Essentials 2012 extension ties this to the Visual Studio 2012 IDE via Build menu options. A new menu aptly called Web Essentials is available via the Build menu; it offers compile options for LESS, CoffeeScript, and TypeScript (Figure F). Once you select the Re-compile All TypeScript Files option, the generated JavaScript appears in the right-hand portion of Figure E.

Figure F

TypescriptVS_FigF_072413.jpg

The generated JavaScript output window shown in Figure E is an option that may be disabled; it is just one of the options available. These options are accessed via the Tools | Options window, which includes a Web Essentials section (Figure G). It provides compiler and general TypeScript options. You can decide to compile to the ECMAScript 3 standard; the Generate Source Map option allows you to debug your code, and much more.

Figure G

TypescriptVS_FigG_072413.jpg

Dive into TypeScript development

With Microsoft behind the TypeScript language, it is no surprise the company is fully embracing it within its flagship development tools. The TypeScript plug-in provides a rich editor within Visual Studio 2012, and the Web Essentials 2012 extension adds everything needed to concentrate on TypeScript development rather than tool configuration.

It remains to be seen how TypeScript will be embraced, but these tools make it easy for existing Microsoft developers to take the plunge now.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments

Editor's Picks