hark logo

New Features in TypeScript 2.4

If you haven’t heard of TypeScript yet, TypeScript is a superset of JavaScript in which static typing is added directly in to the code, and transpiled down to ES2015, ES5 and even ES3.

If you’re wondering why this is important for software engineers, static typing helps on multiple fronts, including:

  • Proven ability to enhance code quality and design decisions, alongside understandability
  • Increased agility during refactoring and development stages. Errors are caught by the compiler before them failing at runtime
  • Including types directly in to your code results in a great base for documentation, and sometimes can be all of your documentation

TypeScript also means that our engineers can use modern ES6 (and further) language features, writing cleaner more modern code, future-proofing our applications.

With that brief introduction to TypeScript, let’s get in to the most interesting features that arrived in 2.4, announced on the 27th June 2017.

Dynamic Import Expressions

In most JavaScript applications, engineers make use of a module system in which files can be included and required from other files to enhance modularity and separation of concerns.

Before dynamic imports existed, you had to know what you were importing, therefore not being dynamic. This resulted in situations where you had to include a file, which imports every other file you need from a folder, to have access to the modules you wanted.

Dynamic imports eradicate the need for this file, and therefore means that we only download JavaScript the application needs, when the application needs it. Thus helping in reducing the initial load, and overall load, of JavaScript applications.

Our engineers devised a system in which this can be avoided, as dynamic importing is something our platform relies upon. However, now our engineers can use the following syntax to dynamically import a module:

 // Dynamic Import "Module"const module = await import('./Module');// When the file has been downloaded, our// engineers can use the module, as usual!module.invokeMethod();  

String Enums

Enumerated types, also known as enums is a data type which contains a set of known-elements, with a name and a value. In the past, TypeScript has had enums, but now includes the ability to have string enums.

For TypeScript developers this is a larger deal, as string base enums required a workaround previously. However, now, we can simply write the following:

enum RequestTypes {    POST = "POST",  GET = "GET",  PUT = "PUT",  DEL = "DELETE"};

Enums can then be used in certain situations, including:

interface IResponse { };// Simple generic function to make a HTTP request, given// a URI and request type. let makeRequest = <T>(uri: string, requestType: RequestTypes): Promise<T> =>    new Promise((resolve, reject) => {  });// Call the action with the given Response TypemakeRequest<IResponse>('', RequestTypes.DEL)  

Weak Types

Weak Types are a newly introduced feature in which types can weakly-implement interfaces, or other types. A weak type is defined as a type in which it contains nothing but all-optional properties.

For example, we can setup a weak type for a configuration:

interface IServiceConfig  {  host?: string;  dataFormat?: string;  authenticationMethod?: string;};

The following IServiceConfig type is a weak type, as all the properties are optional. The following items can be considered as an IServiceConfig:

const hostOneConfig = {    host : 'https://my.service.com/one',  dataFormat : 'JSON'};const anotherServiceConfig = {    dataFormat : 'JSON',  authenticationMethod : 'Basic'};const fullServiceConfig = {    host : 'https://my.service.com/one',  dataFormat : 'JSON',  authenticationMethod : 'OAuth2'};

These configurations can then be used and passed around as IServiceConfig types. However, if none of the properties exist on an object and a function expects a weak-type, TypeScript will throw an error at compile time. Take the following:

// Simple function that expects a weak-typelet constructService = <T>(config: IServiceConfig): T =>    new Service(config);// This config object includes NONE of the weak-type propertiesconst myServiceConfig = {    hosts: ['https://my.service.com/one']};// Therefore, writing the following will result in an errorconst service = constructService<any>(myServiceConfig);  

Finishing Up

TypeScript continues to be improved upon at an incredible rate and TypeScript 2.4 includes many more features than those described in this post, you can find out more information about in the announcement blog post and if you’d like to catch up on features introduced in TypeScript over time, you can read the What’s new in TypeScript document on GitHub.

If you’re interested in talking more about TypeScript, tweet @andrewhathaway on Twitter and if you’re interested in Hark’s technology consultancy services, you can read more information on the Technology Consultancy page.

Andrew Hathaway
Andrew Hathaway

Related Content

Welcome to The Age of The Smart Store

No cash, no cards – no tills? If you took this news to the middle ages, they’d have burned you at the stake. But here in the outrageous present tense, all is normal (well, kind of).

Read More

Would you like to find out more about the Hark Platform?

Subscribe to Our Newsletter

Stay up to date with the latest industry news, platform developments and more.