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)
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)
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