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

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

What is Typescript ?

TypeScript logo
npm install -g typescript
tsc --version
tsc myFile.ts
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
Typescript is a typed language like C# and Java
Type Annotations
var keyword declares a globally-scoped or function-scoped variable
var keyword declares a globally-scoped or function-scoped variable
var keyword
let keyword declares a block-scoped variable
let keyword declares a block-scoped variable
let keyword

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 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 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
Interface is a shap
TypeScript Interface usage
TypeScript interface with function signature
TypeScript class

Constructor and Access Modifiers

Let’s simplify our Person class like this:

Constructor and access modifiers
Constructor with optional parameters
Refactoring Person Class by adding access modifiers in the constructor

Properties

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

Getter and setter

Modules

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
Module  group classes, interfaces, functions into one unit
Create a new module
Import/Export Typescript Module
Import/Export Typescript Module
import Person module

Conclusion

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:

Learn More / Resources

Senior Full Stack .Net / Angular Developer, Cloud & Azure DevOps, T-Shirt Designer, Husband, and Father.