Using Typescript with Arcgis API for Javascript Noah Sager | René Rubalcava Slides

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 <body> <div id="viewDiv"></div> <script> require(["app/main"]); </script> </body> 14 tscong.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 <link rel="stylesheet" href="css/main.css"> 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.

Using Typescript with Arcgis API for Javascript Noah Sager | René Rubalcava Slides

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support