Functions are the building blocks of the JavaScript programming language, which allow us to write readable, maintainable, and reusable code. Functions define the action to be performed. If you have done any JavaScript development you would have written functions. TypeScript functions are not very different from JavaScript functions, with the addition of some new features that allow us to write code that is more understandable and error-free.

Here is an example of how a TypeScript function is defined:

function printFullName(firstName:string,lastName:string):string{
 return firstName + " " + lastName;
}

This example shows how a function is defined in TypeScript. We have a function keyword, which is prefixed to the function name, followed by a list of parameters. In TypeScript, we mostly use functions inside classes as methods, with one difference that the function...

Classes have been some of the most sought-after features of TypeScript. Classes and interfaces are the cornerstones of writing object-oriented code. Object-oriented programming provides the following features:

• Inheritance
• Polymorphism
• Encapsulation
• Abstraction

In this section, we will look at classes in TypeScript and see how we can write code in an object-oriented fashion. We will start by looking at what classes are and how they are defined in TypeScript. Then, we will look at a special keyword called constructor, which is used to initialize the properties of a class. From there, we will look at how we can write and access the properties and methods of a class. To cement our understanding of classes, we will create an example of a class and see all the features in it.

Classes in TypeScript have additional features, such as declaring static properties...

Interface is a TypeScript concept and there is no alternate version in JavaScript; hence, when we write an interface, it does not get transpiled into JavaScript. Interfaces play an important role in TypeScript of providing us with a contract that can be enforced in a class. In TypeScript, interfaces allow us to create our own custom types and provide compile-time checks to make sure the types are used correctly.

An interface is a collection of properties and methods but with no implementation. Its basic purpose is to provide the shape of an object. This means that we can have an interface that defines a couple of properties and a method that accepts one parameter. This interface will not specify how this method is implemented, just the method signature. The implementation will be the responsibility of the class implementing this interface.

In the previous chapter, we started with our Sports News Combinator application, created one component, and populated the data in it. We are using Angular and TypeScript for our application built with Angular CLI (command-line interface). The following is the Sports News Combinator architecture, which we defined in the previous chapter:

In the previous chapter, we developed News Component and App Component. In this section, we will refactor our existing code to add features that you learned in this chapter, such as interfaces and functions to make the app more robust. We will also add a couple of components for header and footer to provide a better look and feel to our application. From Angular perspective, we will also look at binding and interpolation techniques.

In this chapter, the focus was on learning some new concepts of TypeScript and Angular. We looked at functions, classes, and interfaces in TypeScript, and templates and interpolation in Angular. We enhanced the user interface of our application by adding headers and footers, and made our code more object-oriented by using interfaces and modifying the code structure in our class. At this time, you have enough knowledge to create web applications with TypeScript and Angular, apart from features such as making web service calls and routing.

In the next chapter, we will add more features to our Sports News Combinator application, including making a web service call to fetch the sports news. You will be reading about decorator patterns and how they are used in Angular; then, we will also learn about the HTTP module and routing in Angular.