Untyped imports

A TypeScript 2.1 feature that is very much appreciated is the ability to import a third-party module that doesn't have a TypeScript Declaration File.

So an import like the one below would cause an error in older versions of TypeScript if there are no TypeScript Declarations installed for PouchDB.

import * as PouchDB from 'pouchdb';

In the Ionic 2 starter templates there was a workaround introduced for this in the declarations.d.ts file, with the following line of code:

declare module '*';

This line of code basically tells TypeScript that it shouldn't check if any module you're importing is actually available in your app. This can be very annoying if your code is prone to typos and your editor doesn't notify you straight away that there is an error there.

So now in Ionic 3 apps we don't need this workaround anymore and you should remove this line if it's still included in your app.

Object Spread and Rest

These are new features in TypeScript 2.1 and are implemented following the ES2017 specification for Object Spread/Rest and are similar to Array Spread/Rest in ES2015.

Spread

Spread creates a shallow copy of an object. We can easily add new properties to the copy or override copied properties with a new value.

Async-Await

Async-Await was introduced in earlier versions of TypeScript, but could only be used with transpilation to ES2015 until TypeScript 2.1 which supports the use of it in applications that transpile to ES5.

Async-await uses Promises under the hood. It's only a different (easier to read) syntax for using Promises.

Let's say we are using the Ionic Platform service in our app to check when it's ready loading and we want to log to the console when that happens.

We'll create a wrapper method that calls platform.ready() which returns a Promise. Without async-await, it would look like this:

You can only use async-await with Promises, so if you want to use it with Observables, you'll have to call .toPromise() on the Observable.

Better checking for null/undefined

And lastly I wanted to mention this feature although it's not really usable in Ionic 3 apps at the moment because of an issue with Angular 4 that will hopefully be solved soon.

In TypeScript 2.2 the compiler will show you an error when you're trying to use nullable variables in the following situations (list taken from the release notes):

If either operand of a + operator is nullable, and neither operand is of type any or string.

If either operand of a -, , *, /, %, <<, >>, >>>, &, |, or ^ operator is nullable.

If either operand of a <, >, <=, >=, or in operator is nullable.

If the right operand of an instanceof operator is nullable.

If the operand of a +, -, ~, ++, or -- unary operator is nullable.

The compiler will only check this if you have strictNullChecks set to true in tsconfig.json.

So, for example, if we have a function that takes three parameters where the last one is optional and tries to multiply them, it will show an error during compilation.

function multiply(first: number, second: number, third?: number) {
return first * second * third;
}
// the line below will result in NaN because the third parameter is undefined,
// but now you will get an error at compile time
multiply(1, 2);

You can turn on strictNullChecks in your Ionic 3 app, but Angular 4 is not supporting it yet, so you'll see a bunch of errors during compilation. The ES5 code will still be generated, but it's not really a great developers experience.

There are many more features in TypeScript 2.1 and 2.2, but I can't cover them all in this blog post. Here is a complete list all new features. If you don't feel confident in your TypeScript skills, sign up for my upcoming course below!

Want to become proficient in TypeScript?

I'm currently working on a TypeScript course which I am planning to release in the coming months. If you're interested in this course, please drop your email here and I'll let you know when it's available.