Book Image

TypeScript 2.x By Example

By : Sachin Ohri
Book Image

TypeScript 2.x By Example

By: Sachin Ohri

Overview of this book

The TypeScript language, compiler, and open source development toolset brings JavaScript development up to the enterprise level. It allows you to use ES5, ES6, and ES7 JavaScript language features today, including classes, interfaces, generics, modules, and more. Its simple typing syntax enables building large, robust applications using object-oriented techniques and industry-standard design principles. This book aims at teaching you how to get up and running with TypeScript development in the most practical way possible. Taking you through two exciting projects built from scratch, you will learn the basics of TypeScript, before progressing to functions, generics, promises, and callbacks. Then, you’ll get to implement object-oriented programming as well as optimize your applications with effective memory management. You’ll also learn to test and secure your applications, before deploying them. Starting with a basic SPA built using Angular, you will progress on to building, maybe, a Chat application or a cool application. You’ll also learn how to use NativeScript to build a cool mobile application. Each of these applications with be explained in detail, allowing you to grasp the concepts fast. By the end of this book, you will have not only built two amazing projects but you will also have the skills necessary to take your development to the next level.
Table of Contents (11 chapters)

Sports News Combinator (SNC)

SNC is a single-page web application that provides a unified interface to view the latest sports news from various news outlets. We will be fetching news from NFL, Fox Sports, ESPN, and BBC Sport. We will have four tabs in SNC, each providing the top 10 articles from the respective news outlet. When the user clicks on any of the article links, SNC will redirect the user to the respective website.

This application will be large enough to showcase application features, and small enough not to distract us with the intricacies of applications, and will help us learn the fundamental concepts of TypeScript and Angular.

The following screenshot shows the final version of our application:

Downloading the code

The code for SNC can be downloaded from GitHub at https://github.com/sachinohri/SportsNewsCombinator.git. We will build our application incrementally, with each chapter adding features while discussing the concepts of TypeScript and Angular. So, it makes sense that we provide code for each chapter as well, apart from the final application. To achieve this goal, we have created multiple folders under the main master branch, with each folder providing the final code, which we will create at the end of each chapter. The naming convention for each folder is based on the chapter number.

For this chapter, you can find the code in the Chapter 02 folder, as shown in the following screenshot:

The feature set of SNC

In this chapter, we will be focusing on creating the bare minimum of our application to showcase the features of TypeScript and Angular. SNC will have the following functionalities by the end of this chapter:

  • The application will have just one tab to show the news from the NFL network.
  • Data in this tab will be hardcoded just to show how data binding works. We will be making a live web service call in Chapter 4, Sports New Combinator - the Final Version.
  • We will design a single component for our application, which will host the main content.