Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfaces in 6 steps

Ah, the sweet revenge when an evil Javascript dev laughed at my question about how I can fake classes in jS Introducing yet another lets create classes in js! Muahahahaha :D

Oki, so coffeescript is nice, but I don’t like the syntax. Dart is pretty cool but I can’t take it serious. TypeScript? I like it - so far.

Before we get started creds must be given. Shayne Boyer AKA TattooCoder (follow him on Twitter) saved a few greys on my head by helping me out on skype yesterday as I was unable to compile ts to js, because I forgot to install something… :D I’m sick, and my brain is working slowly right now. Anyways, I found his blog post on google, that cheeky little dev managed to squeeze in a post before me with and example! It’s a good blog post, and I recommend you read it. I will skip a few things here and refer to his blog post instead, and I’ll keep this example short and sweet. Like classes in C#.

The example I made above can be found here: Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfaces

I’m just going to assume you run VS 2012, and please remember to download TypeScript and Web Essentials (I had forgotten last one).

1. TypeScript and Web Essentials 2012

Download Typescript

Don’t forget Web Essentials!

2. Double check that TypeScript installed correctly, there should be a TS template under new project. Do a search.

Make sure typescript installed correctly

If you are having problem with TypeScript and Visual Studio 2012 check out this Q and A on StackOverflow

3. Create a new blank Html and JS application

Create a new blank Html and JS application

4. Add a new script file, one script.ts (notice TS extension) and one script.js

Two files, one ts and one js

5. Type some typescript in the ts file and SAVE -> js file should be populated with the compiled javascript

[sourcecode language=“javascript”]
interface PersonData {
firstname: string;
lastname: string;
}

class Person {
constructor (public country: string) { }
}

class Employee extends Person implements PersonData {
department: string;
firstname: string;
lastname: string;
constructor (department: string, country:string) {
super(country),
this.department = department;
}
nameBadgeInfo() {
return this.firstname + " " + this.lastname + " works at " + this.department + “. Born in : " + this.country;
}
}
var newEmployee = new Employee(“Dotnet Mentor & Telerik”, “Sweden”);
newEmployee.firstname = “Iris”;
newEmployee.lastname = “Classon”;

document.getElementById(“greetingOutput”).innerText = newEmployee.nameBadgeInfo();
[/sourcecode]

Reference the script (js) file in the page, add an element to display your data
[sourcecode language=“html”]

<!-- WinJS references -->  
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />  
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>  
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  

<!-- FunWithTypeScript references -->  
<link href="/css/default.css" rel="stylesheet" />  
<script src="/js/default.js"></script>

6. Run the example. VOILA!!

The result, TypeScript using interfaces, inheritance and classes

Important note on Windows Store Applications: Shayne mentions in his blogpost that we need some wrappers to be able to work with Winjs and Winrt, plus some extra files. For this example we didn’t have to use them, but it is very likely that you will need them. Have a read in his blog post.
The files are these ones, in his example you can see them:

‘Wrappers’

You can download the files needed here

The example I made above can be found here: Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfaces

Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfaces in 6 steps

Comments