TypeScriptOrde in de chaos!

Over mij

• Patrick Schmidt (Microsoft Certified Trainer)• Trainer bij 4DotNet• Mede-oprichter en architect BesteProduct.nl

Over 4DotNet

4DotNet is een specialist op het gebied van software development en het Microsoft .NET Framework.

Wij ondersteunen onze klanten met de volgende diensten:• Detachering (van .NET software ontwikkelaars)• Consultancy (advies over architectuur, project begeleiding)• Trainingen (officiële Microsoft Learning Partner)• Coaching (maatwerk training on-the-job)

Programma

• Over JavaScript.• Wat is TypeScript?• JavaScript vs TypeScript• Asynchronous Module Definition (AMD)

Over JavaScript

• Gereleased in 1996 onder de naam LiveScript• Prototype based scripting language• Weakly typed.• Zowel server side als client side.• Wordt steeds meer ingezet voor complexe

applicaties.

Problemen met JavaScript

TypeScript to the rescue• Brengt orde in de JavaScript chaos.• Typed superset op JavaScript (ECMAScript 6)• Werkt daarom prima samen met bestaande

JavaScriptcode• Wordt gecompileerd naar JavaScript (tsc.exe)• Volledig geïntegreerd in Visual Studio 2013

Wat zijn de alternatieven?• CoffeeScript

– Momenteel de populairste– Eigen syntax– Integreert redelijk goed met bestaande JavaScript code– Lastig te debuggen

• Dart– Google initiatief– Eigen taal. Heeft veel weg van Java– Bestaande JavaScript code is moeilijk te integreren

TypeScript vs JavaScript• Object Geörienteerd Programmeren• Modules• Interfaces• Bottom line: De uitkomst blijft JavaScript

OOP en JavaScript• Kan eigenlijk niet, maar met enig kunst- en

vliegwerk wel te doen.• Encapsulation d.m.v. closures• Inheritance d.m.v. prototype chaining• Polymorphism… Alles lijkt wel polymorf in

JavaScript

OOP en TypeScript?• Geeft het gevoel dat je object georienteerd

werkt.• Converteert naar standaard JavaScript

patronen.• We hebben:– Classen– Interfaces– Generics

Demo

• OOP in JavaScript en TypeScript

Modules en JavaScript• Ook hier geldt weer: Kan eigenlijk niet, maar

• met closures is veel te bereiken (IIFE’s)

Modules in TypeScript• Twee soorten:– Inline– Externe (later meer hierover)

• Gebruikt het keyword module• Maakt onderdelen public dmv het keyword export

Demo

• Modules in JavaScript en TypeScript

Interfaces in JavaScript

Interfaces in TypeScript• Is aanwezig, maar is in de gegenereerde

JavaScript niet terug te vinden.• Om conceptuele context te duiden.• Om anonieme objecten mee te documenteren• Handig voor intellisense.

Demo

• Interfaces in TypeScript

Asynchronous Module Definition• Laadt modules asynchroon in• Gebruikt RequireJS• tsc.exe –module amd module.ts• In Visual Studio 2013 eenvoudig de module

blokken weglaten (worden gegenereerd volgens RequireJS standaarden)

Demo

• AMD in action

Tot slot

• JavaScript wordt als taal steeds vaker ingezet. Ook buiten browsers. (NodeJS, Windows Store Apps)

• TypeScript neemt complexiteiten JavaScript weg.• Groot voordeel TypeScript: Is een uitbreiding op

JavaScript (anticipeert op toekomstige specificities)• Met AMD een zeer krachtige oplossing voor

uitgebreide en complexe applicaties.

Handige Sites

• http://www.typescriptlang.org• http://www.codebelt.com/• http://channel9.msdn.com/Events/Build/2014/3-576• https://github.com/borisyankov/DefinitelyTyped

Vragen?

• Neem voor meer informatie over deze sessie contact op met 4DotNet op 0522-241448 of stuur een e-mail naar trainingen@4dotnet.nl

• Houdt ook zeker onze Events @4DotNet website in de gaten: http://events.4dotnet.nl