TYPESCRIPT. Presented by Clarke Bowers

Transcription

1 TYPESCRIPT Presented by Clarke Bowers

2 ABOUT THE PRESENTER Clarke D. Bowers mailto: 35 years of industry experience Has developed everything from embedded systems using assembly language to enterprise data warehouses and everything in between

3 SCRIPTING WAT

4 WHAT IS TYPESCRIPT? TypeScript extends from the syntax and semantics of JavaScript. Full interop between TS and JS since TS compiles into JS. TypeScript runs on browsers, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer). TypeScript offers support for the latest JavaScript features (ECMAScript 2015). Types enable JS developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications. TS allows Intellisense to work in Visual Studio. Types and type inference allows a few type annotations to make static verification possible. Types let you define interfaces between software components.

5 HOW DO I GET IT? Version 2.7 is current Built into Visual Studio 2015 SP3 and 2017 Project template for learning, VS2017, search online for TypeScript NodeJs npm install -g typescript OData 4: Also add postman to Chrome, It will be handy for one of the examples

6 HELLO WORLD Create text file with ts extension Compile with tsc Usage: tsc [options] [file...] Execute with node Usage: node [options] [ -e script script.js - ] [arguments] console.log("hello world!"); C:\...\NodeExamples>tsc HelloWorld.ts C:\...\NodeExamples>node HelloWorld.js hello world!

7 INHERITANCE & POLYMORPHISM Supports classes and interfaces Use keyword extends to perform subclassing Use keyword implements to support a interface Polymorphism is not based on class or interface hierarchy Instead is it based on shape Shape is the signature of all functions and fields class Animal { name: string; constructor(thename: string) { this.name = thename; } move(distanceinmeters: number = 0) { console.log(`${this.name} moved ${distanceinmeters}m.`); } } //inheritance class Snake extends Animal { constructor(name: string) { super(name); } move(distanceinmeters = 5) { console.log("slithering..."); super.move(distanceinmeters); } }

8 VISUAL STUDIO CLOCK PROJECT Template for TypeScript project Shows the current time Updates ever 500ms Starts with a naked HTML page Adds elements in the constructor Update code to Add a button Hook the event handler to stop the clock Note that this is not implicit so be careful how to call a method on it. Timer token is not defined class Greeter { element: HTMLElement; span: HTMLElement; timertoken: number; button: HTMLElement; constructor(element: HTMLElement) { this.element = element; this.element.innerhtml += "The time is: "; this.span = document.createelement('span'); this.element.appendchild(this.span); this.span.innertext = new Date().toUTCString();

9

10 ASP.NET & ENTITY FRAMEWORK Create a ASP.NET Web Application Select Empty Checked are WebApi Select No Authentication Add Entity Framework Nuget package Restore the AdventureWorks DB to local SQL Server 2016 Add connection string to web.config Add Address, Person and Address to model <connectionstrings> <add name="adventureworks" connectionstring= Data Source=TALLTOWER\MSSQLSERVER2016; Initial Catalog=AdventureWorks2016CTP3; Integrated Security=True" /> </connectionstrings>

11 ASP.NET & ODATA Create a Data Model from the Adventure Works DB Create a new controller of type ODataController Return IQueryable of your entity public class AddressController : ODataController { private AdventureWorksContext db = new AdventureWorksContext(); [EnableQuery] public IQueryable<Address> Get() { return db.address; }

12 Adverting end point: Remove other end-points from WebApiConfig.cs ODATA STARTUP Query syntax eq 'Bothell localhost:61068/odata/person?$filter=firstname eq 'Ken'&$expand= Address ODataConventionModelBuilder builder = new ODataConventionModelBuilder(); builder.entityset<address>("addresses"); builder.entityset<person>("people"); //include all entities even when they have no endpoint builder.entityset< address>(" addresses"); config.routes.mapodataserviceroute("odatarouter", "odata", builder.getedmmodel()); config.addodataqueryfilter();

13 STRONGLY TYPED ODATA Add address class for Odata JSON deserialization FuryTech. OdataTypescriptServiceGenerator Scaffolding TypeScript model classes and services from an OData Metadata XML ech.odatatypescriptservicegenera tor class Address { }; public AddressID: number; public AddressLine1: string; public City: string;

14 ODATA REQUEST Use strongly typed XMLHttpRequest to query with Odata Parse the response from JSON into an JS object Grab a strongly typed array of addresses load() { } let Http = new XMLHttpRequest(); let url = + $filter=city eq 'Bothell ; Http.open('get', url, false); Http.send(); let odataresponse = JSON.parse(Http.response); let addresses: Address[] = odataresponse.value; this.span.innerhtml = "Id: " + addresses[0].addressid + " Address: " + addresses[0].addressline1 + " City: " + addresses[0].city;

15 MODULES Separate files Similar the C language header files Export the declaration Import where you need to reference Has the disadvantage of path accuracy ECMA Script 2015 required for modules support Otherwise you need a JS library to support export class Address { public AddressID: number; public AddressLine1: string; public City: string; }; import { Address } from "./Models/address";

16 TYPE DECLARATION /// <reference path="./scripts/typings/jquery/jquery.d.ts" /> Libraries can generate a header file: *.d.ts Visual Studio Intellisense support these files DefinitelyTyped is a repository of type definitions for common JS libraries Nuget packages Referencing a type definition file adds no JS code from the library file It just provides strong types for the TypeScript compiler Very strange syntax to reference a type definition file Triple-slash directives are single-line comments containing a single XML tag. The contents of the comment are used as compiler directives.

17 AJAX CALLBACK Use Jquery Ajax method getjson performs HTTP Get and deserializes into JSON object Assign to strongly type variable load() { let url = + $filter=city eq 'Bothell'"; $.getjson(url, (odataresponse, textstatus, xhr) => { let addresses: Address[] = odataresponse.value; this.span.innerhtml = "Id: " + addresses[0].addressid + " Address: " + addresses[0].addressline1 + " City: " + addresses[0].city; }); };

18 ITERATORS, FOR/OF C# foreach equivalent TypeScript for of Enumerates a collection public renderheaders( columnheaders: string[]) { let tr = document.createelement("tr"); this.table.appendchild(tr); this.headerrow = tr; for (let columnheader of columnheaders) { let th = document.createelement("th"); th.innertext = columnheader; tr.appendchild(th); } }

19 GENERICS Very similar syntax to C# Generic classes Generic functions Functions overloads work poorly because JavaScipt cannot distinguish public renderdata<t>( datarows: T[], renderrow: (rowelement: HTMLTableRowElement, rowdata: T) => void) { for (let datarow of datarows) { if (!this.headerrow) { this.renderheadersfromdata(datarow); } let tr = document.createelement("tr"); this.table.appendchild(tr); renderrow(tr, datarow); }

20 ITERATORS, FOR/IN For/in enumerates keys Great for object properties Works well for arrays indexed by string (maps) public renderheadersfromdata<t>( datarow: T) { let tr = document.createelement("tr"); this.table.appendchild(tr); this.headerrow = tr; for (let key in datarow) { let th = document.createelement("th"); th.innertext = key; tr.appendchild(th); }}

21