Oct 102012
 
 October 10, 2012  Posted by at 5:01 am WinRT Tagged with: , , , , ,  Add comments

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 😀

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… 😀 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

Download Typescript

Don't forget Web Essentials!

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

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

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

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”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FunWithTypeScript</title>

<!– 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>
</head>
<body>
<div id="greetingOutput" style="padding: 100px; font-size: 30pt"></div>
<script src="/js/script.js"></script>
</body>
</html>
[/sourcecode]

6. Run the example. VOILA!!

The result, TypeScript using interfaces, inheritance and classes

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

  4 Responses to “Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfaces in 6 steps”

  1. […] Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfac… (Iris Classon) […]

  2. […] reading so this post should be seen as a cheat sheet for a portion of that document…”Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfac… (Iris Classon)“Ah, the sweet revenge when an evil Javascript dev laughed at my question about […]

  3. […] Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfac… – Iris Classon takes a look at building a simple Windows Store application using the TypeScript language, taking advantages of the features it provides above and beyond standard JavaScript. […]

  4. […] Simple TypeScript Example: Windows Store App using TypeScript with classes, inheritance and interfac… (Iris Classon) […]

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 14 + 8 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)