#spsbe Get Typing with Typescript
-
Upload
david-opdendries -
Category
Software
-
view
143 -
download
2
Transcript of #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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Typescript Intro
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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.
SharePoint Saturday Belgium 2016 • October 15 • Brussels
What is Typescript - Example
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Typescript compiles into JavaScript
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Typescript supports…• Namespaces• Classes• Interfaces• Inheritance• Generics• Enums• Static methods
https://www.typescriptlang.org/play/index.html
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Typescript Configuration – tsconfig.json
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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.
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Typescript Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Promises
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Promise Example
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Promise Example continued
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Promises Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Modular JavaScript
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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.
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Config• ES6 promise
pollyfill recommended.• Data-main is the
entry point to your require.js
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Main.ts
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Example of importing
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Promises Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Thank You!
Feedbackhttp://spsbe.be