#spsbe Get Typing with Typescript

SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: Developer | Level: 200
Get Typing with Typescript
David Opdendries (MCT)
@sharepointdavid

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

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.

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

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

Thank You!

#spsbe Get Typing with Typescript

More Related Content

What's hot

Viewers also liked

Similar to #spsbe Get Typing with Typescript

Recently uploaded

#spsbe Get Typing with Typescript