![Page 1: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/1.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 1/21
Intro to TypeScriptIntro to TypeScript
Kelly Hutchins and Noah Sager
Presentation: https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript
1
![Page 2: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/2.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 2/21
AgendaAgenda
What is TypeScript?Why use TypeScript?Setup and First stepsLive Action DemoWhere can I get more info?
2
![Page 3: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/3.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 3/21
What is TypeScript?What is TypeScript?
3
![Page 4: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/4.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 4/21
Where do I begin?Where do I begin?
4
![Page 5: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/5.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 5/21
Developer SetupDeveloper Setup
5
![Page 6: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/6.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 6/21
Why use TypeScript?Why use TypeScript?
TypeScript adds type support to JavaScript
6
![Page 7: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/7.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 7/21
Why use TypeScript?Why use TypeScript?
Enhanced IDE support
7
![Page 8: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/8.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 8/21
Why use TypeScript?Why use TypeScript?
Makes use of the latest JavaScript features
![Page 9: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/9.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 9/21 8
![Page 10: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/10.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 10/21
Why use TypeScript?Why use TypeScript?
Makes use of the latest JavaScript features
9
![Page 11: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/11.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 11/21
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 typescript
npm install --save @types/arcgis-js-api
10
![Page 12: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/12.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 12/21
Demo: Build a TypeScript app from scratchDemo: Build a TypeScript app from scratch
11
![Page 13: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/13.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 13/21
Tip: Hide .js and .jsmap �lesTip: Hide .js and .jsmap �lesReduce clutterVSCode: Add below to user preferences in �les.exclude
**/*.js.map": true, "**/*.js": { "when": "$(basename).ts
12
![Page 14: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/14.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 14/21
Tip: Debugging with source mapsTip: Debugging with source mapsEnable source maps in browser dev tools
Set breakpoints in .ts instead of .js
13
![Page 15: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/15.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 15/21
Tip: Use __esri instead of importTip: Use __esri instead of importOnly contains type interfacesCan use when not instantiating type
import esri = __esri; const layerList = new LayerList({ view, listItemCreatedFunction: event => { const item = event.item as __esri.ListIte} });
14
![Page 16: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/16.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 16/21
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.
15
![Page 17: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/17.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 17/21
Additional TypeScript SessionAdditional TypeScript Session
16
![Page 18: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/18.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 18/21
![Page 19: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/19.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 19/2117 . 1
![Page 20: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/20.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 20/21
![Page 21: Intro to TypeScript - Recent Proceedings · 2019-04-15 · 3/29/2019 Intro to TypeScript 3/ 21 What is Ty p e Sc r ip t? 3](https://reader031.vdocument.in/reader031/viewer/2022013010/5ed77ef9e200687e44403cf2/html5/thumbnails/21.jpg)
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 21/2117 . 2