TypeScript 2.x By Example: Build engaging applications with TypeScript, Angular, and NativeScript on the Azure platform

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:

If there is one feature in TypeScript that stands out from its competitor, it is Type System, and how TypeScript uses types to help write better code. Types in TypeScript are one of the easiest features to understand and use, thus providing the maximum productivity boost for a new developer to TypeScript.

To develop any application with TypeScript, understanding types and their features is very important. Hence, we will look at the following topics in this section, which will then help us when we start working on our application:

If we are developing any application using TypeScript, be it a small-scale or a large-scale application, we will use classes to manage our properties and methods. Prior to ES 2015, JavaScript did not have the concept of classes, and we used functions to create class-like behavior. TypeScript introduced classes as part of its initial release, and now we have classes in ES6 as well. The behavior of classes in TypeScript and JavaScript ES6 closely relates to the behavior of any object-oriented language that you might have worked on, such as Java or C#.

It's time to jump in over our heads by building our first application. At the start of the chapter, we briefly discussed what the application is all about and how the finished product will look. We will be building this application gradually, starting in this chapter and then adding features to the application in Chapter 3, Sports News Combinator - Adding Features, and Chapter 4, Sports News Combinator - the Final Version. With each new feature, we will first discuss the feature and then implement it.

SNC is an SPA built with Angular and TypeScript. We will be using Angular 4 as our frontend framework, and all the code written in Angular will be in TypeScript. This book does not assume that the reader is proficient in Angular, and hence we will be explaining Angular concepts as we go along. 

In the second-half of this chapter, we will focus on the following items of our SNC application:

Before we start building our first component, let's first create our model. A model is an entity that represents some logical data. Here, in our case, we will have two primary models, namely news and articles. The article model represents the articles that are fetched from the specific website, and the news model is the enclosing model of articles that will contain the array of articles.

In this chapter, we are not making a live web service call to fetch the articles, but will just hardcode the data to show the initial binding aspect of the application. But it is useful to understand the data format from the web service response so that we can identify the model structure that needs to be created. The following is one such response from NFL news:

{
"status": "ok",
"source": "nfl-news",
"sortBy": "top",
"articles": [
    {
     "author": "Lakisha Jackson",
     "title": "Mike Williams denies report on season-
    ending surgery",
     "description": "Los Angeles Chargers...

Components are the building blocks of the Angular application. Each component represents some functionality of the application which, when combined with other components, provides a rich user experience. Angular components consist of four parts:

The following is a graphical representation of the composition of a component:

In this chapter, our focus was to start with our first application and, in doing so, go through some of the features of TypeScript and Angular. We learned about data types in TypeScript, and the type inference feature of TypeScript, which allows TypeScript to identify the types implicitly for the variable defined. Then we looked at the classes provided in TypeScript and how TypeScript provides us with the object-oriented feature to help produce better code. 

Our application is built with Angular and TypeScript, so it was necessary to have an understanding of Angular concepts, which was the next topic that we discussed. We looked at Angular architecture, and discovered what components are and how are they composed. We are building our application with Angular CLI, a command-line interface that provides the ability to create a barebone project with all the required configuration in place.

Then we started building our project by defining its high-level architecture and code setup. We...