#spsbe get typing with typescript

SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: Developer | Level: 200

Get Typing with Typescript

David Opdendries (MCT)@sharepointdavid

Platinum

Gold

Silver

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Agenda• Typescript Introduction• Typescript and Visual Studio 2015• Promises• Modular development with requirejs and Typescript


Typescript Intro


A Little About Typescript• Is a typed superset of JavaScript that compiles into plain JavaScript• Has ECMAScript 2015 / ES6 syntax but compiles into ES5 or newer• Typescript makes use of type definitions to give you intellesence• Typescript 1.0 November 2014• Typescript 2.0 just got released.


What is Typescript - Example


Typescript compiles into JavaScript


Typescript supports…• Namespaces• Classes• Interfaces• Inheritance• Generics• Enums• Static methods

https://www.typescriptlang.org/play/index.html

https://www.typescriptlang.org/play/index.html


Typescript Configuration – tsconfig.json


Typescript definition files• Provides information about the types. • https://github.com/DefinitelyTyped/DefinitelyTyped has typing files

for all popular js libraries including the SharePoint JSOM libraries • Use nuget or npm to download them• Using typescript files• Add /// <reference path="jquery.d.ts" /> to the top of your ts file• Or add the file to the files array in your tsconfig.file.

https://github.com/DefinitelyTyped/DefinitelyTyped


Typescript Demo


Promises


JavaScript Promises• A nice clean way to deal with async tasks• Can be used instead of callbacks. Aka "callback hell"• No more large amounts of nested code• Part of ES6• Not supported in IE11• Add Promise pollyfill to add support for IE11• https://github.com/stefanpenner/es6-promise

• http://www.javascriptkit.com/javatutors/javascriptpromises.shtml

https://github.com/stefanpenner/es6-promise

http://www.javascriptkit.com/javatutors/javascriptpromises.shtml


Promise Example


Promise Example continued


Promises Demo


Modular JavaScript


Why JavaScript Modules• Instead of having all your code in one file you have several files (or

modules)• Prevents downloading of unnecessary bytes.• Load JavaScript on the fly when you need them• Several Popular libraries• Require.js• System.js


Typescript config• Set outDir so all typescript files

go to the same directory• Set module to amd so typescript

compiler knows what type loader is being used.


Config• ES6 promise

pollyfill recommended.• Data-main is the

entry point to your require.js


Main.ts


Example of importing


Promises Demo


Thank You!

Feedbackhttp://spsbe.be

#spsbe get typing with typescript

Software