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 typescript
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 css npm init --yes && tsc --init npm i -D @types/arcgis-js-api
13 index.html
Snippet shortcuts
! getApi
14 tscon g.json
{ "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