Using TypeScript with ArcGIS API for JavaScript Noah Sager | René Rubalcava slides: https://git.io/fj2Ej

1 Agenda

What is TypeScript? Why use TypeScript? Setup and First steps Live Action Demo Where can I get more info?

2 What is TypeScript?

3 Where do I begin?

4 Developer Setup

5 Why use TypeScript?

TypeScript adds type support to JavaScript

6 Why use TypeScript?

Enhanced IDE support

7 Why use TypeScript?

Makes use of the latest JavaScript features

8 Why use TypeScript?

Makes use of the latest JavaScript features

9 Setup and First steps

1. The recommended way to install TypeScript is via node and npm. 2. Make sure to install TypeScript globally:

npm install -g

3. Install the ArcGIS API for JavaScript Typings:

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

10 Demo: Build a TypeScript app from scratch

11 Tip! ArcGIS API for JavaScript Snippets

12 Demo Steps: mkdir ts-demo && cd ts-demo mkdir app && mkdir npm init --yes && tsc --init npm i -D @types/arcgis-js-api

13 index.

Snippet shortcuts

! getApi

14 tscong.

{ "compilerOptions": { "lib": ["dom", "es2015.promise", "es5"], "module": "amd", // output files as AMD modules "sourceMap": true, "target": "es5", "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "esModuleInterop": true } }

15 css/main.css html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }

and add it to html

16 app/main.ts

imports

import WebMap from "esri/WebMap"; import MapView from "esri/views/MapView"; import LayerList from "esri/widgets/LayerList"; import esri = __esri;

17 app/main.ts

WebMap and MapView

const map = new WebMap({ portalItem: { id: "d5dda743788a4b0688fe48f43ae7beb9" } });

// Add the map to a MapView const view = new MapView({ container: "viewDiv", map });

18 app/main.ts

LayerList

// Add a legend instance to the panel of a // ListItem in a LayerList instance const layerList = new LayerList({ view, listItemCreatedFunction: event => { const item: esri.ListItem = event.item; if (item.layer.type != "group") { item.panel = { content: "legend", open: true } as esri.ListItemPanel; } }

19 start typescript compiler

tsc -w

20 Tip: Hide .js and .jsmap les Reduce clutter VSCode: Add below to user preferences in les.exclude

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

21 Tip: Debugging with source maps Enable source maps in browser dev tools Set breakpoints in .ts instead of .js

22 Tip: Use __esri instead of import Only contains type interfaces Can use when not instantiating type import esri = __esri; const layerList = new LayerList({ view, listItemCreatedFunction: event => { const item = event.item as esri.ListItem; } });

23 Where can I get more info? SDK Documentation Esri-related training and webinars ArcGIS Blogs GeoNet, StackExchange, Spatial Community in Slack, etc.

24 25 26 27