Slides from my talk at DevSum 2013 in Stockholm 29th of May 2013.

1. TypeScript
DevSum 2013
Micael Herkommer

2. Why should I care of yet another language?
This session shows what pains are addressed
and what you can benefit from, with a very
small investment of your time and skill set.
Anyone using JavaScript today and is getting
frustrated in trying to keep order in an ever
growing heap of JavaScript will love the simple
idea behind TypeScript!

3. Agenda
• JavaScript?
• Server-side vs Client-side
• Frameworks
• Ordning och reda med TypeScript
• Kom igång med TypeScript
• Varför behöver jag TypeScript, på riktigt?
• Get going, it is great fun!

4. Micael Herkommer
• Webbutveckling sedan klassisk ASP
• Backend och integrationsfokus
• WPF
• ALM/TFS
• Tidigare JavaScript-motståndare

5. Utveckling, mest Webb
• Kort tillbakablick
– ASP, ASP.NET, MVC, MVVM
• Mönster och ramverk
• JScript
• JavaScript är ingen ny fågel, utan en Fenix!
• Behov av snabb repsons och flexibel UX
• SPA (Single Page Applications)

6. Frameworks
• jQuery, jQueryUI, jQueryMobile
• Node.js (skalbar webbserver)
– SignalR (skalbar webbserver, C#)
• Knockout (MVVM)
• AngularJS (SPA MVC)
• Backbone (SPA MVP JSON)
• MongoDB (NoSQL)
• D3 (Data-Driven-Documents)

7. • CommonJS
• RequireJS (Module loader)
• AMD (Asynchronous Module Definition)
• Modernizr (feature detection)
• ExpressJS (MVC Server-side)
och många många fler…

8. Backend vs Frontend Developers
• Normally don’t mix and play
• Flytande gränser idag
• jQuery banade väg
• Kundernas krav på bättre UX
• Svårt att lyckas utifrån endast Server-side

9. JavaScript to the rescue
• Alla kan, alla kan lära
• Funkar i alla webbläsare och annat
men...
• Dynamiskt och okompilerat
• Så lätt att komma igång och se resultat snabbt
• Oerhört svårt att underhålla över tid

10. Nästa version av JavaScript…
• Många vill ersätta JavaScript
– CoffeeScript
– DART (Google)
• Allmän trend
– LESS, SASS m.fl. (pre-compilers)
• ECMAScript (EC3, EC5 och EC6)
– Open Standard

11. TypeScript gör entre hösten 2012
• Microsoft upplever Pain
• Exempelvis TS2012 och Office Live 365
• Eric Gamma, Anders Hejlsberg & team
• Hantera 100K+ rader av JavaScript (TFS2012)
• Dogfooding
• Fortfarande i Beta version
• Open Source (CodePlex)

12. TypeScript Definition:
• TypeScript is a language for application-scale
JavaScript development.
• TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript.
• Any browser. Any host. Any OS. Open Source.

13. Vad gör TypeScript?
• Accepterar all JavaScript
• Kompilerar till ren JavaScript
• Assisterar oss att skriva bättre JavaScript

14. Vad gör TypeScript INTE?
• Lägger inte till någon egen tolkning eller
annan typ av meta-data eller kod, bara ren
JavaScript.

15. Så varför använda TypeScript?
• Mindre JavaScript kod ger ingen större fördel
att använda TypeScript
• Större projekt och många kodrader med
JavaScript hjälper TypeScript att organisera
och hitta feltypningar innan runtime
• Många av oss kommer från C# och liknande
OO bakgrund och behöver nu behärska
JavaScript, TypeScript gör övergången enklare
och stabilare

16. Invändningar
• Jo, visst men vi har liknande verktyg idag:
– jsLint
– jsHint
– Google Linter (Closure Compiler)
– m.fl.

17. Stora fördelen (enligt mig)
• Hålla ordning på alla JavaScript-ramverk är klurigt
• TypeScript ger mig Intellisense i VS2012 och även
andra IDE (TS LanguageService)
– Sublime Text 2
– WebStorm
– PHPStorm
– Emacs
– VIM
– WebMatrix
– m.fl.
• Modulhantering och dependency

18. Hur?
• Kommer du ihåg den gamla TLB filerna?
• Type Definitions (*.d.ts)
– Jmf. header files i C/C++
• jQuery och Node.js
• Importera övrigt du behöver via:
– NuGet
– https://github.com/borisyankov/DefinitelyTyped

19. Installera TypeScript
• Ladda ner: http://www.microsoft.com/en-
us/download/details.aspx?id=34790
• VS2012 PlugIn
• NPM, Node Package Manager
• Övriga IDE stöd

20. TypeScript features
• Optional Type System (Type Inference)
• Modules
• Interfaces
• Classes
• Inheritance
• Lambda (Arrow Syntax)
• Static Checking
• Code Re-factoring

21. Type Inference
• Kompilatorn använder type inference för att
automatiskt hitta rätt datatyp att använda, om
det inte lyckas används JavaScript any som
default.

22. Kompilatorn
• Genererar en helt vanlig *.js fil
• Option: generera type def file *.d.ts
• Default EC5
• Option EC3
OBS: TypeScript använder sig av några EC6
(ECMAScript) “features proposed” som ännu inte är
godkända.

23. Kodexempel:
• Variabler och deklarationer
• Intellisense och Type Inference
• Frameworks
• Lambda
• Klasser, arv och konstruktor
• Funktioner
• Interface
• Moduler (externa och interna)

24. Programstruktur
• Source file structure
– implementation
• module elements
– module
» modules
• statement
• function declaration
• class declaration
• interface declaration
• module declaration
• import declaration
• export declaration
• ambient declaration
– declaration

25. Variabler och deklarationer
• Type Decoration
• Annotations
• Optional (default is any)
var s
var s: string

26. Intellisense och Type Inference

27. Frameworks
• Type Definitions

28. Lambda =>
• Scope: this
• Slipper använda function keyword
• Snyggare (kortare) callbacks och inline

29. Klasser, arv och konstruktor
• Slipp skapa en massa JavaScript kod för att
hålla reda på prototyp
• Constructor
• Super
• Scope

31. Funktioner

32. Interface
• Definiera komplexa typer enkelt
• Få stöd av IDE Intellisense
• Implements
• Funkar fint på alla typer

34. Moduler (externa och interna)
• Jmf. C# Namespaces
• Module = sets named internal module
• Export = accessable outside the module

35. file4.ts

36. Dependencies
(AMD, CommonJS, RequireJS)
• Moduler kan extendas, delas mellan filer och
refereras
/// <reference path=“xxx.ts” />
• Följer AMD conventions
• Använd Require för att implementera AMD
• Använd CommonJS för att exportera hela
moduler till en annan modul
• Skapa Dependency Chains

37. Sammanfattning
• TypeScript är JavaScript för C# utvecklare!
• JavaScript är överallt och oerhört kraftfullt
• C# strukturerat tänkande ger resultat i TS
• En underbar värld av fria paket och
ramverk, skapade av utvecklare som irriterat
sig på väldigt specifika problem en längre tid

• Dive in, enjoy!

38. Kom igång
Installera via Node NPM
• $ sudo npm install -g typescript
Ladda ner TypeScript för VS2012
• http://www.microsoft.com/en-
us/download/details.aspx?id=34790

39. Rekommenderade länkar
TypeScript offical home page, including specification, samples and play area
• http://www.typescriptlang.org/
TypeScript in four parts by John Papa and Dan Wahlin
• http://www.johnpapa.net/typescriptpost1/
• http://www.johnpapa.net/typescriptpost2/
• http://www.johnpapa.net/typescriptpost3/
• http://www.johnpapa.net/typescriptpost4/
AngularJS and TypeScript by David Iffland
• http://notebookheavy.com/2013/05/22/angularjs-and-typescript/
Knockout.js and TypeScript
• http://notebookheavy.com/2012/10/03/typescript-and-knockout-computed/
Knockout.js Channel 9 by Steve Sanderson
• http://channel9.msdn.com/Events/MIX/MIX11/FRM08
Intro to Node.js by Ryan Dahl
• http://www.youtube.com/watch?v=jo_B4LTHi3I
Interesting point of view from Nicholas Zakas
• http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript/
TypeScript definition files
• https://github.com/borisyankov/DefinitelyTyped

40. Tack för din tid!
Happy DevSum 2013!
@herkommer