Leveraging TypeScript in Cross-functional development teamsAaron McGee, Richard Brookes M216

Building Better Apps

The JavaScript problem

Photo by Thomas Quilne, Flickr, Creative Commons Attribution 2.0 Generic

Solution: Enter TypeScript

Syntactic Sugar

Photo by Daniel Horacio Agostini, Flickr, Attribution-NonCommercial-NoDerivs 2.0 Generic

Basic Types

Basic Typesvar typeScriptBoolean: boolean = true;

var typeScriptNumber: number = 10;

var typeScriptString: string = "Hello World";

var anyOldType: any = "what evs";

Compiledvar typeScriptBoolean = true;var typeScriptNumber = 10;var typeScriptString = "Hello World";var anyOldType = "what evs";

Enums

Enumenum Color { Red, Green, Blue };

var c: Color = Color.Green;

Enum - Compiledvar Color;(function (Color) { Color[Color["Red"] = 0] = "Red"; Color[Color["Green"] = 1] = "Green"; Color[Color["Blue"] = 2] = "Blue";})(Color || (Color = {}));;var c = 1 /* Green */;

Arrays

Arrayvar list: number[] = [1, 2, 3];

var list: Array<number> = [1, 2, 3];

Compiles to:var list = [1, 2, 3];

Interfaces

Interfaceinterface ILabelledValue { label: string;}function printLabel(labelledObj: ILabelledValue) { console.log(labelledObj.label);}var myObj = { size: 10, label: "Size 10" };printLabel(myObj);

Compiles to:function printLabel(labelledObj) { console.log(labelledObj.label);}var myObj = { size: 10, label: "Size 10" };printLabel(myObj);

Function Types

Function Typesinterface SearchFunc { (source: string, subString:string): boolean;}var mySearch: SearchFunc;mySearch = function(src: string, sub: string) { //some implementation return true;}

Compiles to:var mySearch;mySearch = function (src, sub) { //some implementation return true;};

Classes

TypeScript Class:interface ClockInterface { currentTime: Date;}

class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { }}

Compiles to:var Clock = (function () { function Clock(h, m) { } return Clock;})();

Modules for organsiation

TypeScript Modulemodule Time { export interface ClockInterface { currentTime: Date; } export class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { } }

}

Compiles to:var Time;(function (Time) { var Clock = (function () { function Clock(h, m) { } return Clock; })(); Time.Clock = Clock;})(Time || (Time = {}));

Demo

Aaron McGee

Connecting Frontend and Backend

Photo by Ucumari Photography, Flickr, Attribution-NonCommercial-NoDerivs 2.0 Generic

Photo by daveynin, Flickr, Attribution 2.0 Generic

Photo by Ben Garney, Flickr, Attribution 2.0 Generic

When there’s duplication…

Demonstration

Richard Brookes

…but there are still problems

Unifying Frontend and Backend

Photo by OneFuller, Flickr, Attribution-NoDerivs 2.0 Generic

Model Generation

Photo by Ubé, Flickr, Attribution-NonCommercial-NoDerivs 2.0 Generic

The 3 stages of Model Generation Build Generate Repeat

Photo by NH567, Flickr, Attribution-NonCommercial 2.0 Generic

Demonstration

Richard Brookes

Conclusion

Try it for yourself

http://bka.co.nz/model-generation

Contact us:aaron@bka.co.nzrichard@bka.co.nz

The future of TypeScript generation?

Q&A

Related Ignite NZ Sessions

Building Azure Web Apps with Node.js and the Spotify Web API [M361]Thurs 4:30pm

Javascript on mobile - Cordova less of a (phone) gap than ever [M334] Wed 4:30pm

ASP.NET MVC vNext with Visual Studio 2015’s new tools [M364]Fri 9:00am

Universal Apps: A Developers Guide [M257]Wed 9:00am

Find me later at… Hub Happy Hour Wed 5:30-6:30pm Hub Happy Hour Thu 5:30-6:30pm Closing drinks Fri 3:00-4:30pm

1

2

3

4

Resources

TechNet & MSDN FlashSubscribe to our fortnightly newsletter

http://aka.ms/technetnz http://aka.ms/msdnnz

http://aka.ms/ch9nz

Microsoft Virtual AcademyFree Online Learning

http://aka.ms/mva

Sessions on Demand

Complete your session evaluation now and win!

© 2015 Microsoft Corporation. All rights reserved.Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or

other countries.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.