Using TypeScriptUsing TypeScriptwith ArcGIS API for JavaScriptwith ArcGIS API for JavaScript

Noah Sager | René Rubalcava

slides: https://git.io/fj2Ej

1

AgendaAgenda

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

2

What is TypeScript?What is TypeScript?

3

Where do I begin?Where do I begin?

4

Developer SetupDeveloper Setup

5

Why use TypeScript?Why use TypeScript?

TypeScript adds type support to JavaScript

6

Why use TypeScript?Why use TypeScript?

Enhanced IDE support

7

Why use TypeScript?Why use TypeScript?

Makes use of the latest JavaScript features

8

Why use TypeScript?Why use TypeScript?

Makes use of the latest JavaScript features

9

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 typescriptnpm install -g typescript

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

10

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

11

Tip!Tip!ArcGIS API for JavaScript Snippets

12

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

13

index.htmlindex.html

!getApi

Snippet shortcuts

<<bodybody>>

<<divdiv idid==""viewDivviewDiv"">></</divdiv>>

<<scriptscript>>

requirerequire(([["app/main""app/main"]]));;

</</scriptscript>>

</</bodybody>>

14

tscon�g.jsontscon�g.json{{

"compilerOptions": { "compilerOptions": {

"lib": ["dom", "es2015.promise", "es5"], "lib": ["dom", "es2015.promise", "es5"],

"module": "amd", // output files as AMD modules "module": "amd", // output files as AMD modules

"sourceMap": true, "sourceMap": true,

"target": "es5", "target": "es5",

"noImplicitAny": true, "noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true, "suppressImplicitAnyIndexErrors": true,

"esModuleInterop": true "esModuleInterop": true

} }

}}

15

css/main.csscss/main.css

and add it to html

html,html,

body,body,

#viewDiv#viewDiv {{

paddingpadding:: 0 0;;

marginmargin:: 0 0;;

heightheight:: 100% 100%;;

widthwidth:: 100% 100%;;

}}

<<linklink relrel==""stylesheetstylesheet"" hrefhref==""css/main.csscss/main.css"">>

16

app/main.tsapp/main.tsimports

importimport WebMap WebMap fromfrom "esri/WebMap""esri/WebMap";;

importimport MapView MapView fromfrom "esri/views/MapView""esri/views/MapView";;

importimport LayerList LayerList fromfrom "esri/widgets/LayerList""esri/widgets/LayerList";;

importimport esri esri == __esri __esri;;

17

app/main.tsapp/main.tsWebMap and MapView

constconst map map == newnew WebMapWebMap(({{

portalItem portalItem:: {{

id id:: "d5dda743788a4b0688fe48f43ae7beb9""d5dda743788a4b0688fe48f43ae7beb9"

}}

}}));;

// Add the map to a MapView// Add the map to a MapView

constconst view view == newnew MapViewMapView(({{

container container:: "viewDiv""viewDiv",,

map map

}}));;

18

app/main.tsapp/main.tsLayerList

// Add a legend instance to the panel of a// Add a legend instance to the panel of a

// ListItem in a LayerList instance// ListItem in a LayerList instance

constconst layerList layerList == newnew LayerListLayerList(({{

view view,,

listItemCreatedFunctionlistItemCreatedFunction:: eventevent =>=> {{

constconst item item:: esri esri..ListItem ListItem == event event..itemitem;;

ifif ((itemitem..layerlayer..typetype !=!= "group""group")) {{

item item..panel panel == {{

content content:: "legend""legend",,

open open:: truetrue

}} asas esri esri..ListItemPanelListItemPanel;;

}}

}

19

start typescript compiler

tsc -wtsc -w

20

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

"**/*.js.map": true, "**/*.js.map": true,

"**/*.js": { "**/*.js": {

"when": "$(basename).ts" "when": "$(basename).ts"

21

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

Set breakpoints in .ts instead of .js

22

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

importimport esri esri == __esri __esri;;

constconst layerList layerList == newnew LayerListLayerList(({{

view view,,

listItemCreatedFunctionlistItemCreatedFunction:: eventevent =>=> {{

constconst item item == event event..item item asas esri esri..ListItemListItem;;

}}

}}));;

23

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.

24

25

26

27