3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 1/21

Intro to TypeScriptIntro to TypeScript

Kelly Hutchins and Noah Sager

Presentation: https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript

1

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 2/21

AgendaAgenda

What is TypeScript?Why use TypeScript?Setup and First stepsLive Action DemoWhere can I get more info?

2

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 3/21

What is TypeScript?What is TypeScript?

3

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 4/21

Where do I begin?Where do I begin?

4

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 5/21

Developer SetupDeveloper Setup

5

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 6/21

Why use TypeScript?Why use TypeScript?

TypeScript adds type support to JavaScript

6

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 7/21

Why use TypeScript?Why use TypeScript?

Enhanced IDE support

7

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 8/21

Why use TypeScript?Why use TypeScript?

Makes use of the latest JavaScript features

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 9/21 8

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 10/21

Why use TypeScript?Why use TypeScript?

Makes use of the latest JavaScript features

9

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 11/21

Setup and First stepsSetup and First steps

1. The recommended way to install TypeScript is via Node and npm.

2. Make sure to install TypeScript globally:

3. Install the ArcGIS API for JavaScript Typings:

npm install -g typescript

npm install --save @types/arcgis-js-api

10

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 12/21

Demo: Build a TypeScript app from scratchDemo: Build a TypeScript app from scratch

11

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 13/21

Tip: Hide .js and .jsmap �lesTip: Hide .js and .jsmap �lesReduce clutterVSCode: Add below to user preferences in �les.exclude

**/*.js.map": true, "**/*.js": { "when": "$(basename).ts

12

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 14/21

Tip: Debugging with source mapsTip: Debugging with source mapsEnable source maps in browser dev tools

Set breakpoints in .ts instead of .js

13

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 15/21

Tip: Use __esri instead of importTip: Use __esri instead of importOnly contains type interfacesCan use when not instantiating type

import esri = __esri; const layerList = new LayerList({ view, listItemCreatedFunction: event => { const item = event.item as __esri.ListIte} });

14

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 16/21

Where can I get more info?Where can I get more info?SDK DocumentationEsri-related training and webinarsArcGIS BlogsGeoNet, StackExchange, Spatial Community in Slack, etc.

15

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 17/21

Additional TypeScript SessionAdditional TypeScript Session

16

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 18/21

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 19/2117 . 1

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 20/21

3/29/2019 Intro to TypeScript

https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 21/2117 . 2