Learn Angular for Back-End Developer (Part 2) -TypeScript Fundamentals

An easy guide to learn TypeScript quickly to be comfortable with Angular applications

Abdelmajid BACO
5 min readNov 5, 2020

Back-End developers are familiar with type-safe Object-Oriented language like C# or Java, but JavaScript, the most popular client-side language is a scripting language and this is the biggest challenge for back end developers.
Fortunately, Angular framework uses a superset of JavaScript called TypeScript, which is an Object-Oriented Programming language, it simplifies JavaScript code and makes it easier to read and debug.

This article is the continuation of the first one already published here:

In this article, I’m going to introduce the fundamentals of TypeScript in order to be comfortable with Angular framework.

What is Typescript ?

TypeScript logo

As I said in the introduction, TypeScript is a superset of JavaScript, any valid JavaScript code is also a valid TypeScript code. However, TypeScript has additional features known as Static typing, Object-Oriented concepts like Interfaces, Classes, Constructors, Access modifiers and compile-time errors. In addition, TypeScript provides tools like IntelliSense and parameter info.

Most browsers don’t understand TypeScript, so we need a compiler that can compile or more precisely transpile TypeScript code to JavaScript code that browsers can understand.

When we build an Angular app, Angular CLI calls TypeScript compiler under the hood to transpile all the TypeScript code.

To install TypeScript compiler independently of Angular, open a terminal window and run the following command:

npm install -g typescript

To check the TypeScript version run the following command:

tsc --version

To compile TypeScript file, run the following command:

tsc myFile.ts

The compiler generates a new JavaScript file myFile.js, this file can be executed with node like this:

node myFile.js

Type Annotations

TypeScript is a typed language. We can specify the type after the name of the variable. TypeScript includes primitive types, array type, object type and type any used with dynamic content.

Typescript is a typed language like C# and Java
Type Annotations

TypeScript variables can be declared using: var, let, and const

The var keyword declares a globally-scoped or function-scoped variable, example:

var keyword declares a globally-scoped or function-scoped variable
var keyword

The let keyword declares a block-scoped variable, example:

let keyword declares a block-scoped variable
let keyword

The const keyword declares a block-scoped variable like let, the value of a constant can’t be changed or redeclared.

Type Assertions

Type assertion is similar to type casting in other languages like C# and Java.

Type assertion similar to type casting in other languages like C# and Java
Type assertion

Arrow Functions

Arrow function is called a lambda function in other languages. It respects the syntax below:

(param1, param2, ..., paramN) => expression
Arrow function is called a lambda function in other languages.
Arrow function/ Old function declaration

Interfaces and Classes

The following example shows a simple Interface, which is a shape of Person, this interface is used as a type and passed to an arrow function.

Interface is a shap
TypeScript Interface usage

In this implementation I’m trying to get person full name with standalone function, but in the real world the full name must be a part of Person structure because they are highly related. So, I can do this:

TypeScript interface with function signature

Then, I implement this interface in a class like this:

TypeScript class

Beautiful, with TypeScript I can write code like C# and Java.

Note here that TypeScript uses Pascal Naming convention to declare Interfaces and Classes. And Camel case convention for variables, functions, methods, attributes and properties.

Constructor and Access Modifiers

Let’s simplify our Person class like this:

Constructor and access modifiers

By default, all members of a class in TypeScript are public. Like other languages we use private access modifier to ensure access only within the class and protected access modifier to ensure access within the class and its child classes.

In TypeScript, the constructor method is always defined with the name constructor. Multiple constructor implementations are not allowed. We can specify optional parameters with "?" like the example below:

Constructor with optional parameters

This constructor assigns parameter values to the class fields, we have redundant code here. In TypeScript we can prefix constructor parameters with an access modifier, and the compiler will generate fields with the same name and initialize those fields as well.

Refactoring Person Class by adding access modifiers in the constructor


TypeScript uses get and set keywords to define properties, as shown in the code below:

Getter and setter


Modules are used to group classes, interfaces, functions into one unit, it’s a way to organize code written in TypeScript. To declare a module we use the export keyword as shown in the code below:

Module  group classes, interfaces, functions into one unit
Create a new module

Wherever we need to use module classes, we need to import them, like in the code below:

Import/Export Typescript Module
import Person module


That’s the end of this article, in which I’ve covered the basics of TypeScript needed for an Angular developer. In my next article, I’ll show you the fundamentals of Angular:

Thanks for reading.

Learn More / Resources



Abdelmajid BACO

Senior Full Stack .Net / Angular Developer, Cloud & Azure DevOps, Carrier Manager, Husband, and Father.