{"id":317602,"date":"2018-10-16T07:25:12","date_gmt":"2018-10-16T14:25:12","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=317602"},"modified":"2018-10-15T11:18:10","modified_gmt":"2018-10-15T18:18:10","slug":"using-typescript-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","title":{"rendered":"Using TypeScript with the ArcGIS API for JavaScript"},"author":7451,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[27491,34861],"industry":[],"product":[36831,36601],"class_list":["post-317602","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-jsapi4","tag-typescript","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn how to get started using TypeScript with ArcGIS API for JavaScript. ","flexible_content":[{"acf_fc_layout":"content","content":"<p>Recently, Rene and I delivered a <a href=\"https:\/\/www.esri.com\/en-us\/landing-page\/product\/2018\/geodev-webinar-series\/using-typescript-with-the-arcgis-api-for-javascript\">webinar<\/a> about using <a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/index.html\">ArcGIS API for JavaScript<\/a>. There is also a follow-up <a href=\"https:\/\/community.esri.com\/groups\/geodev\/blog\/2018\/10\/13\/geodev-webinar-using-typescript-with-the-arcgis-api-for-javascript\">GeoDev Webinar Blog<\/a> that contains all the questions from the participants with some helpful answers. We received such positive feedback that we wanted to write a blog on the same topic so that we can share this information with a wider audience.<\/p>\n<p>In this blog, you&#8217;ll learn how to get started using TypeScript with the\u00a0ArcGIS API for JavaScript, and what the benefits are to using TypeScript for building your web applications. We\u2019ll cover how to migrate an app from JavaScript to TypeScript, the API typings, and how to use our typings to help you build your own applications. Then we will end with some resources for custom widget development, which requires TypeScript.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>TypeScript Development Resources<\/h3>\n<p>There are a lot of resources to help you on your way. This section will assume that you have already found places to learn the ins and outs of TypeScript itself.<\/p>\n<p>The best place to start is with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/typescript-setup\/index.html\">TypeScript Setup<\/a> guide page. Here you can learn about prerequisites, installing TypeScript and the <a href=\"https:\/\/github.com\/Esri\/jsapi-resources\/tree\/master\/4.x\/typescript\">ArcGIS API for JavaScript Typings<\/a>, and a walk-through about how to write your first TypeScript application. We recommend a couple of blogs for more background information:<\/p>\n<ul>\n<li><a href=\"https:\/\/odoe.net\/blog\/using-typescript-esrijs-4\/\">Using TypeScript With EsriJS 4<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/creating-a-custom-tile-layer-with-typescript\/\">Creating a custom tile layer with TypeScript<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/introducing-a-cli-for-the-arcgis-api-for-javascript\/\">Introducing a cli for the ArcGIS API for JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/improved-typescript-development-with-arcgis-api-for-javascript\/\">Improved TypeScript development with ArcGIS API for JavaScript<\/a><\/li>\n<\/ul>\n<p>There have also been a couple of recorded sessions about Using TypeScript with the ArcGIS API for JavaScript, one from the\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=09GtEgyINdo\">2017 Esri Developer Summit<\/a> and one from the\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=DC0FtArC0Vo&amp;index=13&amp;list=PLaPDDLTCmy4aA6oxJVe1YsJlxJO_0psyv&amp;t=0s\">2018 Esri Developer Summit<\/a>. There are enough differences between the two sessions that is well worth your time to watch both.<\/p>\n<p>Lastly, here is the recent webinar recording about <a href=\"https:\/\/www.esri.com\/en-us\/landing-page\/product\/2018\/geodev-webinar-series\/using-typescript-with-the-arcgis-api-for-javascript\">Using TypeScript with the ArcGIS API for JavaScript<\/a>, with the associated <a href=\"https:\/\/NoashX.github.io\/presentations\/Esri_GeoDev_Webinar\/TypeScript\/TypeScript_GeoDev_Webinar_09262018.pdf\">webinar slides<\/a> and the <a href=\"https:\/\/github.com\/odoe\/ts-webinar-examples\">TypeScript examples<\/a> that Rene demoed.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>What is TypeScript?<\/h3>\n<p><a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> is a superset of JavaScript that adds optional static typing. Thus, existing\u00a0JavaScript applications are also valid TypeScript applications.\u00a0While JavaScript is a loosely typed language, TypeScript offers the benefits of a strongly typed language, which can be compiled into JavaScript.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":318372,"id":318372,"title":"TypeScript_Superset_JavaScript","filename":"TypeScript_Superset_JavaScript.png","filesize":14575,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/typescript_superset_javascript","alt":"","author":"7451","description":"","caption":"TypeScript is a superset of JavaScript","name":"typescript_superset_javascript","status":"inherit","uploaded_to":317602,"date":"2018-09-14 18:02:24","modified":"2018-09-14 18:35:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1219,"height":724,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","thumbnail-width":213,"thumbnail-height":127,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","medium-width":439,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","medium_large-width":768,"medium_large-height":456,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","large-width":1219,"large-height":724,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","1536x1536-width":1219,"1536x1536-height":724,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","2048x2048-width":1219,"2048x2048-height":724,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","card_image-width":783,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TypeScript_Superset_JavaScript.png","wide_image-width":1219,"wide_image-height":724}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Why use TypeScript?<\/h3>\n<p>There are countless blogs and articles about how exciting TypeScript is, like this <a href=\"https:\/\/www.sitepen.com\/blog\/2013\/12\/31\/definitive-guide-to-typescript\/\">blog post from Sitepen<\/a> detailing some of the language&#8217;s main features. Internally, we use it a lot (at the time of writing, approximately 88% of our API is written in TypeScript). Here we will distill the hype into three main bullet points:<\/p>\n<p>1. TypeScript adds <code>type<\/code>\u00a0support to JavaScript<\/p>\n<p>With TypeScript, you have the option to add <code>type<\/code>\u00a0support to your code. This allows you to specify the type of value a variable can hold. Adding types to your code makes it easier to maintain and easier to read. In the code snippet below, the function accepts two parameters. The first must be of type <code>string<\/code>, and the second must be of type <code>boolean<\/code>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":335372,"id":335372,"title":"addFeatureLayer_TS","filename":"addFeatureLayer_TS.png","filesize":10397,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/addfeaturelayer_ts","alt":"","author":"7451","description":"","caption":"type support","name":"addfeaturelayer_ts","status":"inherit","uploaded_to":317602,"date":"2018-10-02 20:11:30","modified":"2018-10-02 20:13:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":769,"height":227,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","thumbnail-width":213,"thumbnail-height":63,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","medium-width":464,"medium-height":137,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","medium_large-width":768,"medium_large-height":227,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","large-width":769,"large-height":227,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","1536x1536-width":769,"1536x1536-height":227,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","2048x2048-width":769,"2048x2048-height":227,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","card_image-width":769,"card_image-height":227,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS.png","wide_image-width":769,"wide_image-height":227}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>2. Enhanced IDE support<\/p>\n<p>While there are several IDEs that can be configured to work with TypeScript, we use <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a>\u00a0for our code examples in this blog. In the example above, we passed the appropriate types to the function. However, if we did not pass the appropriate types to the function, our IDE would give us a compile-time error indicating that an invalid type was passed to the function (we tried to pass off an\u00a0<code>integer<\/code>\u00a0for a <code>string<\/code>). This typed environment also allows IDEs to perform refactoring and other productivity operations.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":335382,"id":335382,"title":"addFeatureLayer_TS_error","filename":"addFeatureLayer_TS_error.png","filesize":8029,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/addfeaturelayer_ts_error","alt":"","author":"7451","description":"","caption":"IDE support","name":"addfeaturelayer_ts_error","status":"inherit","uploaded_to":317602,"date":"2018-10-02 20:12:24","modified":"2018-10-02 20:14:13","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":777,"height":233,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","thumbnail-width":213,"thumbnail-height":64,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","medium-width":464,"medium-height":139,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","medium_large-width":768,"medium_large-height":230,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","large-width":777,"large-height":233,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","1536x1536-width":777,"1536x1536-height":233,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","2048x2048-width":777,"2048x2048-height":233,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","card_image-width":777,"card_image-height":233,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/addFeatureLayer_TS_error.png","wide_image-width":777,"wide_image-height":233}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Fun fact: the compiler that gives us this TypeScript intellisense in our IDE is itself written in TypeScript.<\/p>\n<p>3. Makes use of the latest JavaScript features<\/p>\n<p>Lastly, TypeScript makes use of the latest features of JavaScript, such as <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\">classes<\/a>,\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function\">async<\/a>\/<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await\">await<\/a> functions, <a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/11\/dynamic-import\">dynamic imports<\/a>\u00a0(aka. lazy loading), and more.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>Setting Up TypeScript<\/h3>\n<p>There is some basic setup required to get started with TypeScript. Our\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/typescript-setup\/index.html\">TypeScript Setup<\/a> guide does a good job of detailing the necessary steps. Here we will cover the highlights, but for more detailed steps, please refer back to the guide.<\/p>\n<p>First, you will need to install <a href=\"https:\/\/nodejs.org\/\">node and npm<\/a> on your machine. Once you have done that you will want to set up a basic folder that may look something like this.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":333042,"id":333042,"title":"3","filename":"3.png","filesize":7373,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/3-5","alt":"","author":"7451","description":"","caption":"","name":"3-5","status":"inherit","uploaded_to":317602,"date":"2018-09-28 22:41:40","modified":"2018-09-28 22:41:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":321,"height":341,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","thumbnail-width":188,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","medium-width":246,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","medium_large-width":321,"medium_large-height":341,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","large-width":321,"large-height":341,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","1536x1536-width":321,"1536x1536-height":341,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","2048x2048-width":321,"2048x2048-height":341,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","card_image-width":321,"card_image-height":341,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/3.png","wide_image-width":321,"wide_image-height":341}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This folder structure represents the minimum to get started writing a TypeScript application. The second step is to install the the ArcGIS API for JavaScript Typings by\u00a0running the following commands in the root of your application:<\/p>\n<p><code>npm init --yes<br \/>\nnpm install --save @types\/arcgis-js-api<\/code><\/p>\n<p>The first command will create a\u00a0<code>package.json<\/code>\u00a0in your folder. The second command will install the typings for the JavaScript API from\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/@types\/arcgis-js-api\">npm<\/a> into a\u00a0<code>node_modules<\/code>\u00a0folder. We\u2019ll take a closer look at actually writing TypeScript in a moment, but first, we\u2019ll take a look at the <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/tsconfig-json.html\">tsconfig.json<\/a>. This file will tell the TypeScript compiler how to compile your code to JavaScript.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":333052,"id":333052,"title":"4","filename":"4.jpg","filesize":7390,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/4-5","alt":"","author":"7451","description":"","caption":"","name":"4-5","status":"inherit","uploaded_to":317602,"date":"2018-09-28 22:42:07","modified":"2018-09-28 22:42:07","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":234,"height":220,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","medium-width":234,"medium-height":220,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","medium_large-width":234,"medium_large-height":220,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","large-width":234,"large-height":220,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","1536x1536-width":234,"1536x1536-height":220,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","2048x2048-width":234,"2048x2048-height":220,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","card_image-width":234,"card_image-height":220,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/4.jpg","wide_image-width":234,"wide_image-height":220}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This is the bare minimum configuration you would need to compile TypeScript for use with the ArcGIS API for JavaScript. In this configuration we are doing a few things.<\/p>\n<ol>\n<li>Telling the compiler to output the JavaScript as <a href=\"https:\/\/en.wikipedia.org\/wiki\/Asynchronous_module_definition\">AMD modules<\/a>, that can be consumed by the ArcGIS API for JavaScript.<\/li>\n<li>We want the output JavaScript to <a href=\"http:\/\/kangax.github.io\/compat-table\/es5\/\">es5<\/a> for optimal browser compatibility.<\/li>\n<li>Turn on esModuleInterop so that you can write your import statements for modules in the JavaScript API as <code>import WebMap from \u201cesri\/WebMap\u201d<\/code> instead of <code>import WebMap = require(\u201cesri\/WebMap\u201d)<\/code>.<\/li>\n<li>Finally, you want to tell the compiler where your TypeScript files are located.<\/li>\n<\/ol>\n<p>If you wanted to use more advanced features, you could update your configuration.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":333062,"id":333062,"title":"5","filename":"5.jpg","filesize":18016,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/5-4","alt":"","author":"7451","description":"","caption":"","name":"5-4","status":"inherit","uploaded_to":317602,"date":"2018-09-28 22:44:03","modified":"2018-09-28 22:44:03","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":352,"height":359,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","thumbnail-width":196,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","medium-width":256,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","medium_large-width":352,"medium_large-height":359,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","large-width":352,"large-height":359,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","1536x1536-width":352,"1536x1536-height":359,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","2048x2048-width":352,"2048x2048-height":359,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","card_image-width":352,"card_image-height":359,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/5.jpg","wide_image-width":352,"wide_image-height":359}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>This configuration is more typical of what you would use for an application.<\/p>\n<ol>\n<li>List of library files to include your compiled code. This is useful if you want to use features like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">Promise<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\">Geolocation<\/a>.<\/li>\n<li>Source maps are useful during debugging, so that you can debug the source TypeScript files instead of the compiled JavaScript.<\/li>\n<li>The <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/basic-types.html\">any type<\/a> is useful when you do not know the type for a variable or when working with dynamic content. This tells the compiler, they are allowed, but you must declare them.<\/li>\n<li>This goes hand in hand with the next option, which will allow to index objects that have not been explicitly typed.<\/li>\n<li>These final options for JSX and decorators are used when you build <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/custom-widget\/index.html\">custom widgets<\/a> with the JavaScript API.<\/li>\n<\/ol>\n"},{"acf_fc_layout":"content","content":"<h3>Migrate an app from JavaScript to TypeScript<\/h3>\n<p>As was previously discussed, TypeScript is a superset of JavaScript. This can ease the transition for developers that want to begin writing TypeScript today.<\/p>\n<p>Here is a small sample of a basic application written in JavaScript using the ArcGIS API for JavaScript. This may be familiar to many of you already building apps with the API. We use a require function to load modules of the API as needed.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":333022,"id":333022,"title":"1","filename":"1.jpg","filesize":16789,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/1-6","alt":"","author":"7451","description":"","caption":"","name":"1-6","status":"inherit","uploaded_to":317602,"date":"2018-09-28 22:40:05","modified":"2018-09-28 22:40:05","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":463,"height":427,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","thumbnail-width":213,"thumbnail-height":196,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","medium-width":283,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","medium_large-width":463,"medium_large-height":427,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","large-width":463,"large-height":427,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","1536x1536-width":463,"1536x1536-height":427,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","2048x2048-width":463,"2048x2048-height":427,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","card_image-width":463,"card_image-height":427,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/1.jpg","wide_image-width":463,"wide_image-height":427}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Below is a sample of the same code above, but in TypeScript.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":333032,"id":333032,"title":"2","filename":"2.jpg","filesize":17385,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\/2-5","alt":"","author":"7451","description":"","caption":"","name":"2-5","status":"inherit","uploaded_to":317602,"date":"2018-09-28 22:40:32","modified":"2018-09-28 22:40:32","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":463,"height":427,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","thumbnail-width":213,"thumbnail-height":196,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","medium-width":283,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","medium_large-width":463,"medium_large-height":427,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","large-width":463,"large-height":427,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","1536x1536-width":463,"1536x1536-height":427,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","2048x2048-width":463,"2048x2048-height":427,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","card_image-width":463,"card_image-height":427,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/2.jpg","wide_image-width":463,"wide_image-height":427}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The main difference in this code snippet is that instead of using the require method to load modules as needed, we can now use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">import statement<\/a> to load modules. The other difference is that we now use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\">const<\/a> keyword instead of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var\">var<\/a> keyword. You could also use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\">let<\/a> keyword here. The main difference is that const must be initialized with a value and you cannot change that value, whereas let does not need to be initialized with a value and you can change its value.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>Widget Development<\/h3>\n<p>Not only does TypeScript improve the readability and scalability of your code, it is also required for <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/custom-widget\/index.html\">creating custom widgets<\/a> with the ArcGIS API for JavaScript. While custom widget development is beyond the scope of this blog, we would like to share some resources with you to help you on your way.<\/p>\n<p>The best place to start is to look at the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/custom-widget\/index.html#development-requirements\">Widget Development Requirements<\/a> guide. Here you can learn about prerequisites, like installing the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/typescript-setup\/index.html#install-the-arcgis-api-for-javascript-typings\" target=\"_blank\" rel=\"noopener\">ArcGIS API for JavaScript Typings<\/a>, and getting familiar with <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/jsx.html\">JSX<\/a> and the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/implementing-accessor\/index.html\">Accessor<\/a> class.<\/p>\n<p>We recommend that you review or bookmark some documentation and a couple of tutorials that will help get you started:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/custom-widget\/index.html\">Guide:\u00a0Widget Development<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/implementing-accessor\/index.html\">Guide: Implementing Accessor<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Widget.html\">API Reference: Base Widget Class<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-core-accessorSupport-decorators.html\">API Reference: Decorators module<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-custom-widget\/index.html\">Tutorial 1: Create a Custom Widget<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-custom-recenter\/index.html\">Tutorial 2: Custom Recent Widget<\/a><\/li>\n<\/ul>\n<p>There have also been a couple of recorded sessions about widget development that we highly recommend as well:<\/p>\n<ul>\n<li><a href=\"https:\/\/youtu.be\/UdI6xS33E_Q\">Building Your Own Widget with the ArcGIS API for JavaScript<\/a> (Dev Summit 2018)<\/li>\n<li><a href=\"https:\/\/www.esri.com\/en-us\/landing-page\/product\/2018\/geodev-webinar-series\/building-a-widget-using-the-arcgis-api-for-javascript\">Building a Widget Using the ArcGIS API for JavaScript<\/a> (GeoDev Webinar 2018)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=3CPPKyR3HCE\">ArcGIS API for JavaScript: Customizing Widgets<\/a> (UC 2018)<\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"<h3>Conclusion<\/h3>\n<p>TypeScript is an exciting programming language that adds a lot of value to web development. Internally, we use TypeScript heavily in developing the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/release-notes\/index.html\">ArcGIS API for JavaScript<\/a>. This blog explained\u00a0how to get started using TypeScript with the\u00a0ArcGIS API for JavaScript, and what the benefits are to using TypeScript for building your web applications. Stay tuned for more exciting developments!<\/p>\n"}],"authors":[{"ID":7451,"user_firstname":"Noah","user_lastname":"Sager","nickname":"Noah Sager","user_nicename":"noah-sager","display_name":"Noah Sager","user_email":"NSager@esri.com","user_url":"https:\/\/www.noahsager.net\/","user_registered":"2018-03-21 18:21:19","user_description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"},{"ID":7531,"user_firstname":"Rene","user_lastname":"Rubalcava","nickname":"r.rubalcava","user_nicename":"r-rubalcava","display_name":"Rene Rubalcava","user_email":"RRubalcava@esri.com","user_url":"http:\/\/odoe.net\/","user_registered":"2018-03-21 18:21:22","user_description":"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks.\r\n\r\nI blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava\r\n\r\nI write code, sometimes it even works.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":320782,"post_author":"4271","post_date":"2018-09-27 10:23:08","post_date_gmt":"2018-09-27 17:23:08","post_content":"","post_title":"ArcGIS API 4.9 for JavaScript: What\u2019s new (September 2018)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"jsapi-4-9","to_ping":"","pinged":"","post_modified":"2018-10-01 16:14:00","post_modified_gmt":"2018-10-01 23:14:00","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=320782","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":80201,"post_author":"5981","post_date":"2017-10-27 19:00:59","post_date_gmt":"2017-10-27 19:00:59","post_content":"","post_title":"Creating a custom tile layer with TypeScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"creating-a-custom-tile-layer-with-typescript","to_ping":"","pinged":"","post_modified":"2018-04-17 16:42:15","post_modified_gmt":"2018-04-17 16:42:15","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/creating-a-custom-tile-layer-with-typescript\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":80971,"post_author":"5981","post_date":"2017-12-14 10:58:13","post_date_gmt":"2017-12-14 10:58:13","post_content":"","post_title":"Improved TypeScript development with ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"improved-typescript-development-with-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2018-03-26 21:15:49","post_modified_gmt":"2018-03-26 21:15:49","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/improved-typescript-development-with-arcgis-api-for-javascript\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/TS_JS_Card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/TS_Background_Project_Resized_Updated.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using TypeScript with the ArcGIS API for JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using TypeScript with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"Using TypeScript with the ArcGIS API for JavaScript\",\"datePublished\":\"2018-10-16T14:25:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"TypeScript\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\",\"name\":\"Using TypeScript with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-10-16T14:25:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using TypeScript with the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\",\"name\":\"Noah Sager\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"caption\":\"Noah Sager\"},\"description\":\"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.\",\"sameAs\":[\"https:\/\/www.noahsager.net\/\",\"https:\/\/www.linkedin.com\/in\/noah-sager\",\"https:\/\/x.com\/noashx\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using TypeScript with the ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Using TypeScript with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"Using TypeScript with the ArcGIS API for JavaScript","datePublished":"2018-10-16T14:25:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","TypeScript"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","name":"Using TypeScript with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-10-16T14:25:12+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Using TypeScript with the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068","name":"Noah Sager","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","caption":"Noah Sager"},"description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","sameAs":["https:\/\/www.noahsager.net\/","https:\/\/www.linkedin.com\/in\/noah-sager","https:\/\/x.com\/noashx"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager"}]}},"text_date":"October 16, 2018","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-typescript-with-the-arcgis-api-for-javascript","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/10\/TS_Background_Project_Resized_Updated.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":34861,"name":"TypeScript","slug":"typescript","term_group":0,"term_taxonomy_id":34861,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2698,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/317602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7451"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=317602"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/317602\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=317602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=317602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=317602"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=317602"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=317602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}