Post on 30-May-2020
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
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
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
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
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
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
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
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
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 9/21 8
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
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
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
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
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
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
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
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
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 18/21
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 19/2117 . 1
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 20/21
3/29/2019 Intro to TypeScript
https://noashx.github.io/DevSummit/2019/Intro-to-TypeScript/index.html?print-pdf#/ 21/2117 . 2