I just wrapped up my latest webinar on the Critical Path Training free webinar series – this time on Typescript. It was pretty well attended – about 60 people if I saw the attendee counter properly. I think the session went OK – it started out a little slow but then picked up and as usual, I had way too much content to fit into a 45 minute session (allowing time for Q&A).
If you missed the live session, the recording is available here: http://t.co/bSZvjTYE.
What Is Typescript?
So, first of all…what is Typescript? From the www.typescriptlang.org website, we learn that:
Any browser. Any host. Any OS. Open Source.
Great. That and $5 will buy me a cup of coffee. Honestly, that description barely scratches the surface of Typescript. Personally, I prefer this as a definition:
I think that is a far more encompassing definition.
Now on to the good stuff.
Getting Started with Typescript
To get started with Typescript, you first need to install a couple of tools. First, you’ll need the Visual Studio plug-in and I highly recommend Web Essentials (for more than just Typescript):
Web Essentials: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
VS Plugin: http://go.microsoft.com/fwlink/?LinkID=266563 (If you don’t use Visual Studio, Typescript is also available for Sublime Text, Emacs and Vim. My guess is that if you’re doing SharePoint development you use VS…)
With those installed, you’re ready to go. You can now create a SharePoint project (Farm, Sandbox or App – doesn’t matter) and add a Typescript file to it:
After you first add the Typescript file to your project, you’ll see it in Solution Explorer:
(Notice that there is no accompanying .js file yet)
Once you compile (which could be as simple as just saving the .ts file, depending on how you’re environment is configured), the appropriate .js files are created and nested under the .ts file in Solution Explorer:
The configuration settings to pay attention to are in Tools|Options|Web Essentials|Typescript:
The highlighted part is what we added. Note that you’ll need to perform that little hack for every project in your SharePoint VS Solution that needs to compile Typescript.
The last thing you’re going to want to do is remove the .ts file from your deployment package – there’s no sense including it in the package – neither SharePoint nor the web server would have any idea what to do with it. Doing this is simply a matter of deleting it from, or commenting it out of, the Elements.xml file:
Now we’re finally ready to begin…
The Typescript Editor
Each and every Typescript file you add will have some sample code included with it. This is great while you’re learning but just an annoyance when you’re actually trying to be productive. I hope this changes in the RTM of the tooling. If, for some reason the tooling doesn’t change at RTM, or if deleting the sample code every time gets on your nerves, you could just create a Text file and change the extension to .ts.
This is probably a good place to end part 1 of this article. We’ll pick up with Part 2 shortly covering our first baby-steps into writing Typescript code. I’ll leave you with some resources to help you learn basic Typescript. Part 2 will review some of that quickly and then move on to SharePoint-specific Typescript code.
Typescript Language Specification: http://go.microsoft.com/fwlink/?LinkId=267238
Pluralsight Typescript course: http://pluralsight.com/training/courses/TableOfContents?courseName=typescript
My webinar slides: blog.mannsoftware.com/wp-content/uploads/2013/02/typescriptandsharepoint.pdf
That’s it for part 1.