Announcing: mapguide-react-layout 0.11.2

This is another small bugfix release that updates OpenLayers to 4.6.5 and fixes the following:

• More scalable vertical text CSS for sidebar template
• Fix QuickPlot not working without toggling print box first

Project Home Page
Download
mapguide-react-layout on npm

Making Immutable.JS objects easier to work with in TypeScript: TypeScript 2.8 edition

TypeScript 2.8 was released today and one of the new touted features is conditional types.

With the introduction of condition types, it was worth revisiting an older post of mine about making immutable.js easier to use in TypeScript and see how one would solve this problem with TypeScript 2.8.

For reference, consider these interfaces:

1 2 3 4 5 6 7 8 9 10

interface IGeographicCoordinate { lat: number; lng: number; } interface IPlacemark { id: number; coordinate: IGeographicCoordinate; name: string; }

At the time of that post (this was before the revolutionary TypeScript 2.0 release), this was the best I could do to work with the immutable.js versions objects that adhered to the shape of the above interfaces.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

type GeographicCoordinateProperties = "lat" | "lng"; type PlacemarkProperties = "id" | "coordinate" | "name"; interface IGeographicCoordinateImmutable { get(key: GeographicCoordinateProperties): any; get(key: "lat"): number; get(key: "lng"): number; } interface IPlacemarkImmutable { get(key: PlacemarkProperties): any; get(key: "id"): number; get(key: "coordinate"): IGeographicCoordinateImmutable; get(key: "name"): string; }

Notice we had to manually write "immutable" equivalents of every interface and we didn't have constructs like keyof to auto-deduce all the allowed property names. We also had to manually spell out all the specific return types for each property name due to mapped types not existing yet at that point in time.

With TypeScript 2.8, we can leverage conditional types and features from earlier versions of TypeScript to create this majestic piece of generic and type-safe beauty:

1 2 3 4 5 6 7 8 9 10 11

interface ImmutableObject<T> { get<P extends keyof T>(key: P): T[P] extends Array<infer U> ? ImmutableList<U> : T[P] extends object ? ImmutableObject<T[P]> : T[P]; } interface ImmutableList<T> { count(): number; get(index: number): T extends object ? ImmutableObject<T> : T; } // The immutable.js fromJS() API declare function fromJS<T>(obj: T): ImmutableObject<T>;

So how does this work? To illustrate, lets update our example interfaces to include a 3rd interface

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

interface IGeographicCoordinate { lat: number; lng: number; } interface IPlacemark { id: number; coordinate: IGeographicCoordinate; name: string; } interface ISearchResult { query: string; results: IPlacemark[]; }

Then let's start with the get method of ImmutableObject<T>

The fragment P extends keyof T describes the type placeholder P on this method that is any variable that is a valid member name of type T. Using our above interfaces as an example, keyof IPlacemark is the type equivalent of:

 "id" | "coordinate" | "name"

The type of key parameter of the get method is constrained to any of the member names in T (auto-deduced via the keyof operator), thus you cannot plug in names of members that are not part of T.

The return type T[P] is a mapped type that gives the corresponding type based on the value you put in for the key parameter. If we use IPlacemark as an example:

• Calling get with "id" will deduce T[P] to the type: number
• Calling get with "coordinate" will deduce T[P] to the type: IGeographicCoordinate
• Calling get with "name" will deduce T[P] to the type: string

We then leverage the new conditional types feature to conditionally deduce the appropriate return type based on properties of T[P] that we can ask of through the conditional types feature:

• If the mapped type is an array (T[P] extends Array) resolve the return type to ImmutableList of the inferred type U. The infer U fragment defines an ad-hoc type placeholder U that will resolve to the item type of the array.
• Otherwise, if it is an object (T[P] extends object) resolve the return type to ImmutableObject of the mapped type
• Otherwise, it will resolve the return type to the mapped type.

To illustrate with ISearchResult as an example:

• Calling get with "query" will deduce a return type of: string
• Calling get with "results" will deduce a return type of: ImmutableList<IPlacemark>

Now on to the get method of ImmutableList<T>

ImmutableList<T> is a immutable collection wrapper. The get method here simply returns the item of type T at the specified index. Once again we leverage conditional types to ask some questions of the type T to deduce the correct return type.

• If T is an object (T extends object), resolve the return type to: ImmutableObject<T>, making this mapped type fully recursive all the way down however many levels it needs to go
• Otherwise T must only be a primitive type, so resolve the return type as-is.

Now how do we know this actually works and is not some abstract piece of theory?

See for yourself on the TypeScript playground (NOTE: If the code fragment doesn't load in the playground, you can copy/paste the code from this gist I've prepared earlier)

No red squiggles! Also, put your mouse over every variable, you will see the type matches the type specified in the respective end-of-line comment.

Hopefully this post has shed some light on how powerful this new conditional types feature of TypeScript 2.8 really is

Announcing: MapGuide Open Source 3.1.1 Release Candidate

I am pleased to announce the release candidate of MapGuide Open Source 3.1.1 is now available.

Of the ton of bug fixes and minor enhancements since the 3.1 release, the key changes of note in 3.1.1 are:

• Bundling a GDAL FDO provider that is built against GDAL 2.2.3, what this means is you should now be able to swap our GDAL dlls with more feature-rich dlls from gisinternals once again for support for ECW, etc.
• The bundled Fusion now has the Bing Maps changes integrated.
• Updated bundled versions of Apache httpd, PHP and Tomcat.

Have a gander at the full list of changes for more information.

This is a release candidate, and not the final release as it's been so long since the 3.1 release that I want to make sure our release process is still sound after such a long break between releases. Barring anything of a show-stopping nature, the final release of 3.1.1 will drop one week from now.

Download/Release Notes

A TypeScript-powered moment of clarity

Today was a case where I forgot about one of the major strengths of TypeScript: The type-safety that it provides you and the features available to allow for writing code with maximum type-safety.

Consider this simple utility function in TypeScript

1 2 3

export const strIsNullOrEmpty(str: string | null | undefined): boolean { return str == null || str == ""; }

The function does what it says on the tin: Checks if the given string is null (or undefined) or an empty string and returns true if that's the case or false otherwise.

There's no problems with using this function, until you turn on null checks or use this function in a TS code-base with null checks enabled.

And if I hover over the red squiggly, I see this:

But how is that possible? I know that by calling this function, there's no way that the variable str could be null or undefined.

This is indeed the case ... at runtime.

At compile-time TypeScript does not know that. So short of spamming exclamation points all over your code, how can we tell TypeScript that the string we passed in cannot be null or undefined if we just checked for it?

The key is to change the function from the above example into this:

1 2 3

export function strIsNullOrEmpty(str: string | null | undefined): str is null | undefined { return str == null || str == ""; }

And the red squiggle goes away.

This is feature of TypeScript known as type guards. It's a way to write functions that evaluate to true/false at runtime, but at compile time allows you to make some assertions about the type of the variable you passed in to the TypeScript compiler. In our case, passing in a variable that could be a string or null or undefined has to be either null or undefined if this function returns true. If it returns false, then it has to be a non-null string, which TypeScript knows then to strip of the null | undefined on any subsequent if block following that function call. This is what's known in TypeScript as type narrowing.

Type guards have been in TypeScript for a long time, but it took today for me to realise that some of my utility functions (like this example) should've been written as type guards, especially with the advent of TypeScript 2.0 and its powerful null checking capabilities.

Now to double check places in my code where I've been sprinkling ! operators all over the place.

Announcing: mapguide-react-layout 0.11.1

This is a small bugfix release that fixes the following:

• Tiled base layer group initial visibility is now respected 

Project Home Page
Download
mapguide-react-layout on npm