using typescript with the arcgis api for javascript · 2018-11-06 · typescript polylls...
TRANSCRIPT
![Page 1: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/1.jpg)
Using TypeScript with the ArcGIS API forJavaScript
Rene Rubalcava –
Julian Kissling –
@odoenet
@JulianKissling
![Page 2: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/2.jpg)
![Page 3: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/3.jpg)
AgendaTypeScript?FundamentalsAdvanced typesDevelopment tooling & setupWorking with the 4.x JS APIAccessor, decorators, and advanced concepts
![Page 4: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/4.jpg)
TypeScript?
![Page 5: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/5.jpg)
Superset of JavaScriptTranspiles to JavaScriptESNext features (import, =>, rest/spread, async/await, etc)TypesCompatible with existing JavaScript
![Page 6: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/6.jpg)
Benets of TypeScript
Easier for multiple people to work onEasier to refactorEasier to testCan help prevent technical debt
![Page 7: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/7.jpg)
Fundamentals
![Page 8: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/8.jpg)
Primitive (Basic) Typesboolean , number , string , [] , any
type Foo = number; const foo: Foo = 8; const bar: string = "Lorem ipsum"; // Here be dragons const waldo: any = doStuff: (things: any) => something ;
![Page 9: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/9.jpg)
Type InferenceTypeScript compiler can infer types automatically
let foo = 8; // number type is inferred foo = 12; // Ok foo = "12"; // Error!
![Page 10: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/10.jpg)
InterfacesDene contracts between parts of an application
type Foo = number; type Bar = string; interface Foobar foo: Foo, bar: Bar const baz: Foobar = foo: 8, bar: "Lorem ipsum" ; // Ok const qux: Foobar = foo: "12", bar: "Lorem ipsum" // Error!
![Page 11: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/11.jpg)
Interfaces facilitate predictable behavior
interface Foobar foo: number, bar: string const waldo = doStuff: (things: Foobar): Foobar => ( foo: things.foo + 1, bar: `$things.bar!` ) ; waldo.doStuff( foo: 1, bar: "a" ); // Ok, foo: 2, bar: "a!" waldo.doStuff(1, "a"); // Error!
![Page 12: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/12.jpg)
Classesclass Waldo public doStuff(things: Foobar): Foobar ... private iterateNumber(num: number) return num + 1; private addExclamationPoint(str: string) return `$str!`; const testWaldo = new Waldo(); // Create a Waldo instance testWaldo.iterateNumber(2); // Error!
![Page 13: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/13.jpg)
ExtensionInterfaces can extend other interfaces or classesClasses can extend other classes and implement interfaces
interface Point x: number; y: number; interface Point3d extends Point z: number; class MyPoint implements Point3d x = 0; y = 0; z = 0; class My4dPoint extends MyPoint time = Date.now();
![Page 14: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/14.jpg)
Advanced types
![Page 15: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/15.jpg)
Union typesType something as one of multiple choices of a type
// Set a size as either a number, of a string like "1px", // "2em" etc function setSize(v: number | string) // ...
![Page 16: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/16.jpg)
Type guardsType guards allow TS to infer a specic type when a value maytake multiple types ( union )
Types are narrowed to a more specic set by type guards
Builtin type guards like typeof , instanceof or taggedunions
function foo(v: number | string) if (typeof v === "number") // TS infers that v: number return v + 1; else // TS infers that v: string return `$v + 1`;
![Page 17: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/17.jpg)
Type guardsTagged unions are very useful to discriminate unions ofinterfaces
interface Foo type: "foo"; foo: string; interface Bar type: "bar"; bar: string; function func(v: Foo | Bar) if (v.type === "foo") // TS infers that v: Foo return v.foo; else
![Page 18: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/18.jpg)
GenericsLike in C# or Java (not like metaprogramming with templates inC++)"Generalizes" types over type parameters
class List<T> constructor(private data?: T[]) find(f: (item: T) => boolean): T // ... // Fails const list = new List<number>(["1", "2"]); // OK const list = new List<number>([1, 2]);
![Page 19: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/19.jpg)
Async/awaitMakes asynchronous programming easy again (mostly)Internally based on promises
Typescript polylls async/await when targetting ES5
Code
![Page 20: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/20.jpg)
Development tooling
![Page 21: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/21.jpg)
Essentialstypescript: npm install savedev typescriptJS API 4.x typings: npm install savedev@types/arcgisjsapiJS API 3.x typings: npm install savedev@types/arcgisjsapi@3
![Page 23: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/23.jpg)
Setting Updevelopers.arcgis.com/javascript/latest/guide/typescript-setup
![Page 24: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/24.jpg)
Working with the API
![Page 25: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/25.jpg)
ImportsJS API is currently strictly AMDConventionally classes are exported directlyRequires the use of require style imports
import MapView from "esri/views/MapView"Or, use esModuleInterop with typescript 2.7.2
![Page 26: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/26.jpg)
Auto-castDue to nature of types, auto-cast does not type-check
get and set must have the same type
Auto-casting is supported in constructor signatures onlyStill helps in lots of casesFor setting properties, need to import the relevant modules
![Page 27: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/27.jpg)
Typing improvementsUse of generics where possible Collection<T>Strictly type events ( MapView.on("mousewheel",...) ))
"Advanced" auto-casts like colors ( "red" ), screen sizes
( "5px" ) and basemaps "streets"
![Page 28: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/28.jpg)
Advanced API concepts
![Page 29: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/29.jpg)
PromisesIn 4.7, promises are more compatible with native promisesReplaced then with when for esri/core/PromiseTypings are more compatible (although not fully compatible)General advice is to wrap API promises in native if needed untilJS API switches to native promises
![Page 30: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/30.jpg)
Writing Accessor based classesCan be useful to use Accessor based classes in your appAlso required for creating custom API based widgetsAPI classes are using dojo declare, requires some additionalwork to integrate with TSCode
![Page 31: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/31.jpg)
Multiple inheritanceMultiple inheritance possible with dojo declareSupported in typescript at runtime and strictly type-checkedUses declaration mergingCode
![Page 32: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/32.jpg)
Extending the API typingsAPI typings are not always as strict as they can beIn rare occasions typings are missing or impreciseTypings can be externally "patched" through declarationmergingCode
![Page 33: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/33.jpg)
![Page 34: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/34.jpg)
Questions?
Where can I nd the slides/source?
github.com/jkissling/presentations/EU-DevSummit
![Page 35: Using TypeScript with the ArcGIS API for JavaScript · 2018-11-06 · Typescript polylls async/await when targetting ES 5 Cod e. Development tooling. Essentials typescript: npm install](https://reader031.vdocument.in/reader031/viewer/2022013003/5f399f7e5d191537bc496202/html5/thumbnails/35.jpg)