Slides presented during the Community LAB (Typescript in the real world)

1. Andrea Boschin
http://1drv.ms/1flJCDT
Typescript overview

2. Javascript
why?

3. Javascript
any browser
any host
any os

4. Javascript
hard to learn
hard to read
hard to maintain

5. Javascript
type unsafe
prone to tricks
non-scoped

6. Typescript
starts with Javascript, ends with Javascript
è un superset tipizzato di Javascript quindi
il codice Javascript è già Typescript
(on steroids)

7. Typescript
starts with Javascript, ends with Javascript
produce Javascript quindi
any browser, any host, any os!

8. Typescript
static type checking
var a: string = 'Andrea';
var b: number = 10;
var c: number = a + b;
Cannot convert ‘string’ to
‘number’

9. Typescript
structural typing
var speaker: { firstName: string; lastName: string; };
speaker =
{
firstName: 'Andrea',
lastName: 'Boschin'
};
Declares a type inline

10. Typescript
interfaces
interface IPerson
{
firstName: string;
lastName: string;
birthDate: Date;
}
var developer: IPerson =
{
firstName: 'Andrea',
lastName: 'Boschin',
birthDate: new Date(1968, 10, 27)
};
Declares an interface

11. Javascript
Interface output
var developer = {
firstName: 'Andrea',
lastName: 'Boschin',
birthDate: new Date(1968, 10, 27)
};

12. Typescript
classes
class Person
{
firstName: string;
lastName: string;
birthDate: Date;
getAge(): number
{
return new Date().getFullYear() - this.birthDate.getFullYear();
}
}
var speaker: Person = new Person();
speaker.firstName = 'Andrea';
speaker.lastName = 'Boschin';
speaker.birthDate = new Date(1968, 10, 27);
console.log(speaker.getAge());

13. Javascript
class output
var Person = (function () {
function Person() {
}
Person.prototype.getAge = function () {
return new Date().getFullYear() - this.birthDate.getFullYear();
};
return Person;
})();
var speaker = new Person();
speaker.firstName = 'Andrea';
speaker.lastName = 'Boschin';
speaker.birthDate = new Date(1968, 10, 27);
console.log(speaker.getAge());

14. Typescript
modules
module model
{
export class Person
{ /* person implementation */ }
export module collections
{
export class PersonList
{ /* collection implementation */ }
}
}
var me: model.Person
= new model.Person();
var people: model.collections.PersonList
= new model.collections.PersonList();

15. Typescript
callbacks
class Service
{
public getItems(success: (result: any[]) => void): void
{
success(["a", "b", "c"]);
}
} function(result: any[]): void {}

16. Typescript
external libs
definition files
https://github.com/borisyankov/DefinitelyTyped
jquery
angular
knockout
.d.ts
.d.ts
.d.ts

17. Typescript
memo
VS debugger works! (thanks to «sourcemaps»)
Typescript compiler is developed with Typescript
Compiler can be hosted in ECMASCRIPT 3 browsers

18. Typescript
why
 support for ECMAScript 6 in ECMAScript 3 browsers
 open Source and available to download on codeplex
 tooling support, for type safety, inference and refactoring
 static types and compilation catches mistakes earlier
 structural interfaces & typing
 works well with existing projects
Anders Hejlsberg is involved.
enables programming in the large

19. Typescript
toolset
http://www.typescriptlang.org
visual studio 2012/2013
plugin available
visual studio 2013 - update 2 - Feb 25
integrated
other IDE?
Sublime Text, EMACS, Vim

20. LAB

21. feedback
10
o feedback su:
• http://xedotnet.org/feedback
• MAIL
andrea@boschin.it
• TWITTER
http://twitter.com/aboschin
• FACEBOOK
http://www.facebook.com/thesmallgrove
ANDREA BOSCHIN
Most Valuable Professional

22. Prossimo Meeting
11 aprile 2014 – Virtual Meeting
21:00 – Pragmatic Javascript
Speaker: D.Morosinotto
Un viaggio nel "mondo Javascript": partendo dalle basi (tipi di
dati, oggetti literal, array associativi, prototype e this...) vedremo
come sia possibile implementare dei Pattern OOP (Closure,
Revealing Modulo, Mixin...) Forse scopriremo che JS può fare
qualcosa di più che gestire qualche click e modificare degli
elementi del DOM con JQuery, a voi l'ardua sentenza...

23. Prossimo Meeting
4 aprile 2014 – Community Meeting: Visual
Studio20:00 - Sviluppare applicazioni web (completamente) on-line con Visual Studio
«Monaco»
Speaker: M.Parenzan
Windows Azure e Team Foundation Server hanno cominciato a cambiare in una
maniera incredibile il modo di gestire i progetti software e tutta l'attività professionale
dello sviluppatore. Ora il passaggio ulteriore: un Visual Studio che gira nel browser...
21:30 - Utilizzare Git con TFS
Speaker: D.Vernole
In questa sessione vedremo come sia possibile utilizzare GIT come repository dei
sorgenti in TFS 2013 in alternativa a Visual Source Control