![Page 1: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/1.jpg)
UsingTypeScriptwithArcGISAPIforJavascriptRenéRubalcava
@odoenet
![Page 2: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/2.jpg)
TypeScript
![Page 3: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/3.jpg)
WhatisTypeScript?SupersetofJavaScript(JavaScriptisvalidTypeScript)IntegratesnewerfeaturesofJavaScriptIncludesES7&ES8features
![Page 4: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/4.jpg)
Noteverydeclarationneedsatype
Thecompilerissmartenoughtofigureitout
let center = [-100.33, 25.69];// orlet center: number[] = [-100.33, 25.69];
![Page 5: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/5.jpg)
let center: number[];
// validcenter = [-100.33, 25.69];
// invalidcenter = ["-100.33", "25.69"];
![Page 6: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/6.jpg)
Interfacesinterface Props { view: MapView; initialCenter: Coordinates;}
interface Point { x: number; y: number;}
interface Point3D extends Point { z: number;}
![Page 7: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/7.jpg)
TypeAlias
Cannotextendtypes
type Point = { x: number; y: number}
type UIParams = { element: HTMLElement | string, position?: string};
type Points = Point[];
function addMe(point: Point, params: UIParams) {...}
![Page 8: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/8.jpg)
Classesclass MyPoint implements Point3D { x = 0; y = 0; z = 0;}
![Page 9: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/9.jpg)
ToolingandconfigurationtscVisualStudioCodeArcGIS4.xTypingsArcGIS3.xTypingsDojotypings
![Page 10: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/10.jpg)
TypeScriptintheJSAPI/// <amd-dependency path="esr/core/tsSupport/declareExtendsHelper" name="__extends" />/// <amd-dependency path="esr/core/tsSupport/decorateHelper" name="__decorate" />
import { declared, subclass, property, shared, read, write } from "esri/core/tsSupport/declare";
interface Base extends Layer, SceneService {}interface BaseConstructor { new (): Base; }function getBase(): BaseConstructor { return <any> Layer;}
@subclass("esri.layers.SceneLayer")class SceneLayer extends declared(getBase(), SceneService) { // ...}
![Page 11: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/11.jpg)
JSAPIWidgetDevelopmentSampleWidget
![Page 12: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/12.jpg)
Demo
![Page 13: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/13.jpg)
MoreGuidanceTypeScript-Settingupyourdevelopmentenvironment
![Page 14: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/14.jpg)
Questions?Helpustoimprovefillingoutthesurvey
ReneRubalcava( )
Slides:
@odoenet
github.com/odoe/presentations/2017-devsummit-ps-using-typescript/
![Page 15: Using TypeScript with ArcGIS API for JavaScript · 2017 Esri Developer Summit-International--Presentation, 2017 Esri Developer Summit-International, Using TypeScript with ArcGIS API](https://reader031.vdocuments.net/reader031/viewer/2022011900/5ee13cd6ad6a402d666c3044/html5/thumbnails/15.jpg)