4.x SDK and TypeScript

JordanBaumgardner

I've been enjoying TypeScript and have been using it more and more in our projects. I've had to look up how to add a TS class to my projects several times now so I thought I'd place it here.

There are two key things that I keep forgetting.

1) It must be compiled in the correct format:

&nbsp; <SPAN class="string token">"compilerOptions"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"es5"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"module"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"amd"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"moduleResolution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"node"</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

and you must create your class correctly with the export on the last line.

<SPAN class="keyword token">import</SPAN> EsriView <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">class</SPAN> <SPAN class="token class-name">EventCreatorModule</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">public</SPAN> mapView<SPAN class="punctuation token">:</SPAN>EsriView<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">export</SPAN> <SPAN class="operator token">=</SPAN> EventCreatorModule<SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Note: The following will NOT work

<SPAN class="comment token">// THIS WILL FAIL</SPAN>
<SPAN class="keyword token">import</SPAN> EsriView <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">export</SPAN> <SPAN class="keyword token">class</SPAN> <SPAN class="token class-name">EventCreatorModule</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">public</SPAN> mapView<SPAN class="punctuation token">:</SPAN>EsriView<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">// THIS WILL FAIL</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

This is my boilerplate

\tsconfig.json

<SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="string token">"compilerOptions"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"target"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"es5"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"module"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"amd"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"moduleResolution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"node"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"noImplicitAny"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"removeComments"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"preserveConstEnums"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"sourceMap"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"jsx"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"react"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"jsxFactory"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"tsx"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"experimentalDecorators"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="string token">"suppressImplicitAnyIndexErrors"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">"include"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp; "Scripts<SPAN class="comment token">/**/</SPAN><SPAN class="operator token">*</SPAN>"
&nbsp; <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; <SPAN class="string token">"exclude"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
&nbsp; <SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

[Empty Class]

<SPAN class="keyword token">class</SPAN> <SPAN class="punctuation token">[</SPAN>MyClass<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">constructor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">export</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>MyClass<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>