TypeScript Development Resources
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.
- Using TypeScript With EsriJS 4
- Creating a custom tile layer with TypeScript
What is TypeScript?
Why use TypeScript?
There are countless blogs and articles about how exciting TypeScript is, like this blog post from Sitepen detailing some of the language’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:
1. TypeScript adds
With TypeScript, you have the option to add
type support 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
string, and the second must be of type
2. Enhanced IDE support
While there are several IDEs that can be configured to work with TypeScript, we use Visual Studio Code for 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
integer for a
string). This typed environment also allows IDEs to perform refactoring and other productivity operations.
Fun fact: the compiler that gives us this TypeScript intellisense in our IDE is itself written in TypeScript.
Setting Up TypeScript
There is some basic setup required to get started with TypeScript. Our TypeScript Setup 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.
First, you will need to install node and npm on your machine. Once you have done that you will want to set up a basic folder that may look something like this.
npm init --yes
npm install --save @types/arcgis-js-api
The first command will create a
import WebMap from “esri/WebMap”instead of
import WebMap = require(“esri/WebMap”).
- Finally, you want to tell the compiler where your TypeScript files are located.
If you wanted to use more advanced features, you could update your configuration.
This configuration is more typical of what you would use for an application.
- List of library files to include your compiled code. This is useful if you want to use features like Promise or Geolocation.
- The any type 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.
- This goes hand in hand with the next option, which will allow to index objects that have not been explicitly typed.
Below is a sample of the same code above, but in TypeScript.
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 import statement to load modules. The other difference is that we now use the const keyword instead of the var keyword. You could also use the let 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.
We recommend that you review or bookmark some documentation and a couple of tutorials that will help get you started:
- Guide: Widget Development
- Guide: Implementing Accessor
- API Reference: Base Widget Class
- API Reference: Decorators module
- Tutorial 1: Create a Custom Widget
- Tutorial 2: Custom Recent Widget
There have also been a couple of recorded sessions about widget development that we highly recommend as well: