3. SharePoint Saturday Belgium 2016 • October 15 • Brussels
Agenda
• Typescript Introduction
• Typescript and Visual Studio 2015
• Promises
• Modular development with requirejs and Typescript
5. 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.
10. 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.
13. 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
18. 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
19. 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.
20. SharePoint Saturday Belgium 2016 • October 15 • Brussels
Config
• ES6 promise
pollyfill
recommended.
• Data-main is the
entry point to your
require.js
