![Page 1: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/1.jpg)
Esri GeoDev Webinar Series
Using TypeScript with the ArcGIS API for JavaScript
![Page 2: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/2.jpg)
Esri GeoDev Webinar Series
Using TypeScript with the ArcGIS API for JavaScript
September 26, 2018Rene RubalcavaNoah Sager
![Page 3: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/3.jpg)
Agenda
• ArcGIS API for JavaScript 4.x
• TypeScript
• Converting a JavaScript app to TypeScript
• Development Resources
• Custom Widgets
![Page 4: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/4.jpg)
ArcGIS API for JavaScript | Enabling Powerful and Modern Web GIS Apps
Data-Driven
Visualization
Widgets and Tools
3D Scenes
Directions
3D Measurement
Drawing Tools
3D Mobile
Web
Client-Side Mapping
and Processing
Fast Interaction with
Large Datasets
Smart Mapping
Client-Side Projection
Real-Time
Geometric Analytics
Interactive Analysis
Fast Display of
Large Datasets
![Page 7: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/7.jpg)
TypeScript is a superset of JavaScript
![Page 8: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/8.jpg)
Why TypeScript?
1. TypeScript adds type support to JavaScript
![Page 9: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/9.jpg)
Why TypeScript?
![Page 10: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/10.jpg)
Why TypeScript?
1. TypeScript adds type support to JavaScript
2. Enhanced IDE support
![Page 11: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/11.jpg)
Why TypeScript?
![Page 12: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/12.jpg)
Why TypeScript?
1. TypeScript adds type support to JavaScript
2. Enhanced IDE support
3. Makes use of the latest JavaScript features
![Page 13: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/13.jpg)
Why TypeScript? Latest JavaScript Features
promises async / await
![Page 14: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/14.jpg)
Why TypeScript? Latest JavaScript Features
Dynamic imports
• compute the module at runtime
• import a module on-demand
(or conditionally)
• import a module from within a regular script
(as opposed to a module)
![Page 15: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/15.jpg)
Convert JS App to TS
Since TypeScript is a superset of JavaScript …
Conversion can be done in steps
JavaScript to TypeScript
![Page 16: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/16.jpg)
Convert JS App to TS
![Page 17: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/17.jpg)
Convert JS App to TS
1.Do not need require statements.
2.Use import statements instead.
Step 1
![Page 18: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/18.jpg)
Convert JS App to TS
1.Replace var with const or let.
2.Define Types and/or Interfaces
Step 2
![Page 19: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/19.jpg)
TypeScript
Basic Application Structure
![Page 20: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/20.jpg)
TypeScript – tsconfig.json
Output files as AMD modules
Bare minimum configuration
![Page 21: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/21.jpg)
TypeScript – tsconfig.json
Output JavaScript as ES5
Bare minimum configuration
![Page 22: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/22.jpg)
TypeScript – tsconfig.json
Use
Bare minimum configuration
Instead of
![Page 23: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/23.jpg)
TypeScript – tsconfig.json
Where are my TypeScript files?
Bare minimum configuration
![Page 24: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/24.jpg)
TypeScript – tsconfig.json
Optional Configuration
Needed for async/await
![Page 25: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/25.jpg)
TypeScript – tsconfig.json
Optional Configuration
Output sourcemaps for debugging
![Page 26: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/26.jpg)
TypeScript – tsconfig.json
Optional Configuration
You can use any type, but must declare it
![Page 27: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/27.jpg)
TypeScript – tsconfig.json
Optional Configuration
Suppress the noImplicityAny errors for indexing objects
![Page 28: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/28.jpg)
TypeScript – tsconfig.json
Optional Configuration
Used for custom widget development
![Page 29: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/29.jpg)
TypeScript Features
• Types and Interfaces
• Type Guards
• Dynamic Imports
![Page 30: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/30.jpg)
TypeScript
Simple Example
![Page 31: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/31.jpg)
TypeScript
More Involved Example
![Page 32: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/32.jpg)
Resources
![Page 33: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/33.jpg)
Implementing Accessor - esri/core/Accessor class
![Page 34: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/34.jpg)
esri/core/accessorSupport/decorators module
![Page 35: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/35.jpg)
esri/core/accessorSupport/decorators – aliasOf()
![Page 36: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/36.jpg)
esri/core/accessorSupport/decorators – property()
![Page 38: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/38.jpg)
TypeScript Example
Custom Widget Example
![Page 39: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/39.jpg)
TypeScript Example
We can help make it easier for you!
npm install @arcgis/cli
![Page 40: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/40.jpg)
— Charles Darwin
“It is not the strongest of the species that survive,
Nor the most intelligent,
But the ones most responsive to change.”
![Page 41: Esri GeoDev Webinar Series Using TypeScript with the ArcGIS API … · 2019-10-04 · TypeScript –tsconfig.json Optional Configuration You can use anytype, but must declare it](https://reader030.vdocument.in/reader030/viewer/2022040718/5e26f5a8ee25e57aea03c4cb/html5/thumbnails/41.jpg)
© 2018 Esri. All rights reserved.