TypeScript Definitions for Bing Maps V8 Released on GitHub

Previously, we announced the general availability of the Bing Maps V8 web control. Today, we are happy to announce that we have released of TypeScript Definitions for Bing Maps API. These provide intellisense and richer error catching functionality to your development environment. If you haven’t used TypeScript before we highly recommend you give it a try as it fills a lot of gaps that you wished JavaScript supported and makes development easier. In fact, we wrote the Bing Maps V8 web control using TypeScript.

Bing Maps V8 is rapidly growing with new features and functionalities. These definitions only contain the features which are in the main release branch. As such the Bing Maps API Team felt it made sense to make these TypeScript definitions open source on GitHub so that anyone can download and modify these as they see fit. If you are using the experimental branch and want to start developing against a new feature before it’s in the main release branch, you can easily add in the new features that you need to the definitions. Additionally, to make it easier to add these TypeScript definitions to your application we also made them available as a Nuget package.

Bing Maps V8 TypeScript Intellisense
Intellisense TypeScript feature for Bing Maps API
 

What is TypeScript?

When developing large web apps, JavaScript can easily become difficult to manage and maintain. If you create a function that is only meant to accept a string, but pass a number into it, the error won’t be visible until you run your code… if you are lucky.

TypeScript is a superset of JavaScript and provides static typing, classes and interfaces for mapping APIs. It transcompiles into JavaScript which your application uses. One of the biggest benefits is when you use it in an IDE such as Visual Studio. This is because IDEs are able to identify a lot more errors in your code before you run your app. TypeScript definitions for IDEs also incorporate intellisense and autocomplete.

When creating a mapping function in TypeScript, you specify the type of each argument that can be passed into it. If you create a function that only takes in a string but write a line of code that passes in a number, Visual Studio will highlight it as an error. If you miss this and try to run your app, the debugger will catch this as well.

In short, TypeScript is JavaScript that scales for mapping APIs.

Creating mapping apps with TypeScript definitions

Bing Maps API supports a range of developer-friendly data formats like JSON, as well as popular languages like TypeScript and C++. Extensive support for multiple languages lowers the entry barrier for newer developers and shortens development cycles for experienced ones.

To make development with V8 Web Control even easier, we’ve created an interactive SDK that lets developers experiment with a language of their choice in a controlled environment. Whether you’re interested in spatial data modules or just basic data visualization, the interactive SDK allows you to experience the best of Bing Maps API with TypeScript.

For more TypeScript mapping guidance, developers can have a look at our detailed repository of code samples. Our samples portal brings together samples from multiple platforms all into one place for easy accessibility. From using Autosuggest features to manipulating animated tile layers, it’s a great launchpad for your next project.

Do more with less

What makes the release of these TypeScript definitions for V8 Web Control so exciting are the limitless possibilities this unlocks for businesses and developers. Bing Maps API stands out with the ability to do more with less, allowing for more functionality with less TypeScript code.

Create light and feature-dense mapping experiences across multiple platforms, including PCs, Macs, and mobile devices. V8 integrates smart data visualization through heatmaps and animated tile layers, as well as exciting dynamic features like Streetside and real-time traffic data.

IDEs like Visual Studio make development even easier with intuitive features like intellisense. These features reduce the scope for TypeScript errors and create an error-free API mapping experience.

https://www.microsoft.com/en-us/maps/web
Real-time traffic data in Bing Maps V8 Control

This latest release of TypeScript definitions takes these features up a notch by integrating Bing Maps API modules such as Autosuggest and Spatial Data Services. Now, developers can make a reference to these modules with a single line of code. 

/// <reference path="types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />

Keep in mind that this isn’t the actual API code, and loading the functional API will require a reference to V8 Web Control in your application.

<script 
type='text/javascript' 
src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[Your_Bing_Maps_Key]' async defer>
</script>

Create a seamless mapping experience on a platform of your choice by getting a free Bing Maps API key. To learn more about TypeScript development with Bing Maps API, head over to our Developer Resources. 

- Bing Maps Team

FAQ

How can these TypeScript definitions help developers?
As versatile as JavaScript is, using it as a tool for larger programs can quickly become cumbersome. TypeScript can speed up development with Bing Maps API by offering intuitive features like autocomplete. The ability to see a handy list of supported events, for example, saves you the work of having to go back and verify names.

Will these definitions be updated in the future?
We’re going to be expanding our list of TypeScript definitions as map features move from the experimental to the main V8 release branch. Keep an eye on new features and updates with our V8 documentation page.

How can I get the definitions?
There are 3 ways to get the new TypeScript definitions:

  1. NuGet package manager in Visual Studio (or a command line!)
  2. Using the Bing Maps V8 npm package.
  3. Downloading and copying the types folder into your project.

Importing the new TypeScript mapping API definitions takes seconds. For more details on how to download the definitions, visit our GitHub page