ES6+ and TypeScript: What You Need to Know

This is the example repository used during the live coding section of the Enterprise JavaScript Summit talk

ES6+ and TypeScript: What You Need to Know.

Example Overview

In this exercise, we start out with a straightforward, working, vanilla JavaScript/ES5 application that is using the Asynchronous Module Definition (AMD) module system. This application renders a button that when pressed, fetches a list of articles from https://newsapi.org and then renders them, along with an image and the publish date relative to the user. Specifically, we start out with the following files:

• index - The main entry point into the application. First, this instantiates a new ArticlesService class that will be used to fetch the article's data from the Internet and then sets up an event listener for the "Load Articles" button that will create a new ArticlesComponent and render the articles to the page after the content is fetched.
• util - This file contains a simple utility to convert an ISO Date string into a relative date string.
• ArticlesService - This module contains a straightforward class that accepts a NewsAPI API key and provides a method, getArticles, which accepts a news source and success and error callbacks. This module also exports a newsSource object, which serves as a sort of enum providing predefined constants for the types of news sources.
• ArticlesComponent - This is a straightforward Component class that provides a render method that will take a provided list of articles and render them to the page.

The goal of the exercise is to convert this project over to TypeScript and to utilize ES2015+ features along the way.

Getting Started

In this exercise, we will convert this ES5/AMD application to TypeScript and utilize new syntax and features available in ES6+ to simplify and modernize the code. To get started, simply install the dev dependencies.

npm install

This application is completely standalone and has no production dependencies. The build tools included will compile the AMD application into a Webpack bundle and generate the HTML output. The package.json file defines several scripts which will simplify the tools needed to run this application in its ES5/AMD form and along the transformation to TypeScript.

Scripts

• npm run start - As this main script for development, this script will run the clean script and then run the watch and serve scripts in parallel.
• npm run build - This is simply an alias to run webpack, which will build the application bundles and place them in the dist/ directory.
• npm run clean - This script removes the dist/ directory.
• npm run test - This script will start a test server which can be accessed at http://localhost:9000/__intern/ to view the output from the test suite.
• npm run watch - This watches for JavaScript and TypeScript changes and automatically runs the webpack build when files are changed, added, or removed.
• npm run serve - This script will start a simple HTTP server and serve up the dist/ directory at http://localhost:8080/.

Features Covered

The following ES2015+ and TypeScript features are covered and discussed as part of the conversion exercise.

• ES Modules - We will convert the AMD modules to ES Modules.
• let and const - We'll convert var statements to these block-scoped declaration statements.
• Types - We'll utilize strict TypeScript typings, adding type annotations to our code where the type cannot be inferred.
• Advanced Types - We'll see how union types can help us better describe our code.
• Enums - Utilizing this TypeScript data structure, we'll define a set of named constants for our news sources.
• Interfaces - We'll define an interface to describe the data coming back from NewsAPI in a typesafe way.
• Classes - JavaScript's class syntax makes working with classes much simpler, cleaning up our code.
• TypeScript Classes - We'll go beyond ES classes and utilize wonderful TypeScript class features including modifiers and non-method properties.
• Template Literals - We will utilize template literals to remove ugly concatenation and utilize it for generating multi-line templates.
• Arrow Functions - We'll simplify inline functions with this smaller syntax.
• Promise - Using Promises will allow us to encapsulate asynchronous actions and work with them in a much simpler way.
• Asynchronous Functions - This syntactic sugar further simplifies the asynchronous code by making it look synchronous.
• Fetch API - We'll ditch the XMLHttpRequest (XHR) object and really simplify our request code using the superior fetch method.
• Definite Assignment Assertions - We'll see how the TypeScript complier helps us to avoid unused/unnecessary code by alerting us to unused and unassigned class properties.
• Decorators - We'll introduce a deprecated decorator when we add a new method to the service that utilized Promises over XHR and callbacks.

Licensing Information

New BSD license.