typescript overview
DESCRIPTION
Slides presented during the Community LAB (Typescript in the real world)TRANSCRIPT
![Page 1: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/1.jpg)
Andrea Boschin
http://1drv.ms/1flJCDT
Typescript overview
![Page 2: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/2.jpg)
Javascript
why?
![Page 3: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/3.jpg)
Javascript
any browserany hostany os
![Page 4: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/4.jpg)
Javascript
hard to learnhard to read
hard to maintain
![Page 5: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/5.jpg)
Javascript
type unsafeprone to tricksnon-scoped
![Page 6: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/6.jpg)
Typescriptstarts with Javascript, ends with
Javascript
è un superset tipizzato di Javascript quindi
il codice Javascript è già Typescript(on steroids)
![Page 7: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/7.jpg)
Typescriptstarts with Javascript, ends with
Javascript
produce Javascript quindiany browser, any host, any os!
![Page 8: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/8.jpg)
Typescriptstatic type checking
var a: string = 'Andrea';var b: number = 10;var c: number = a + b;
Cannot convert ‘string’ to ‘number’
![Page 9: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/9.jpg)
Typescriptstructural typing
var speaker: { firstName: string; lastName: string; };
speaker ={ firstName: 'Andrea', lastName: 'Boschin'};
Declares a type inline
![Page 10: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/10.jpg)
Typescriptinterfaces
interface IPerson{ firstName: string; lastName: string; birthDate: Date;}
var developer: IPerson = { firstName: 'Andrea', lastName: 'Boschin', birthDate: new Date(1968, 10, 27) };
Declares an interface
![Page 11: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/11.jpg)
JavascriptInterface output
var developer = { firstName: 'Andrea', lastName: 'Boschin', birthDate: new Date(1968, 10, 27)};
![Page 12: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/12.jpg)
Typescriptclasses
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());
![Page 13: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/13.jpg)
Javascriptclass 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());
![Page 14: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/14.jpg)
Typescriptmodules
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();
![Page 15: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/15.jpg)
Typescriptcallbacks
class Service{ public getItems(success: (result: any[]) => void): void { success(["a", "b", "c"]); }}
function(result: any[]): void {}
![Page 16: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/16.jpg)
Typescriptexternal libs
definition files
https://github.com/borisyankov/DefinitelyTyped
jqueryangular knockout
.d.ts
.d.ts
.d.ts
![Page 17: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/17.jpg)
Typescriptmemo
VS debugger works! (thanks to «sourcemaps»)
Typescript compiler is developed with Typescript
Compiler can be hosted in ECMASCRIPT 3 browsers
![Page 18: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/18.jpg)
Typescriptwhy
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
![Page 19: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/19.jpg)
Typescripttoolset
http://www.typescriptlang.org
visual studio 2012/2013plugin available
visual studio 2013 - update 2 - Feb 25integrated
other IDE?Sublime Text, EMACS, Vim
![Page 20: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/20.jpg)
LAB
![Page 21: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/21.jpg)
feedback
10
o feedback su:• http://xedotnet.org/feedback
• TWITTERhttp://twitter.com/aboschin
• FACEBOOKhttp://www.facebook.com/thesmallgrove
ANDREA BOSCHINMost Valuable Professional
![Page 22: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/22.jpg)
Prossimo Meeting
11 aprile 2014 – Virtual Meeting
21:00 – Pragmatic JavascriptSpeaker: 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...
![Page 23: Typescript overview](https://reader033.vdocument.in/reader033/viewer/2022061218/54b7394b4a7959be4c8b46bb/html5/thumbnails/23.jpg)
Prossimo Meeting
4 aprile 2014 – Community Meeting: Visual Studio
20:00 - Sviluppare applicazioni web (completamente) on-line con Visual Studio «Monaco»Speaker: M.ParenzanWindows 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 TFSSpeaker: D.VernoleIn questa sessione vedremo come sia possibile utilizzare GIT come repository dei sorgenti in TFS 2013 in alternativa a Visual Source Control