Microsoft tools streamline TypeScript development – Hot Tech Online

Microsoft tools streamline TypeScript development

microsoft-tools-streamline-typescript

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.jpgTypescriptVS_FigB_072413.jpg


Figure C

TypescriptVS_FigC_072413.jpgTypescriptVS_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.jpgTypescriptVS_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.jpgTypescriptVS_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.jpgTypescriptVS_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.jpgTypescriptVS_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

No Comments

Leave a Comment

Show Buttons
Hide Buttons