Learn Angular for Back-End Developer (Part 2) -TypeScript Fundamentals
An easy guide to learn TypeScript quickly to be comfortable with Angular applications
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 ?
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 typescriptTo check the TypeScript version run the following command:
tsc --versionTo compile TypeScript file, run the following command:
tsc myFile.tsThe compiler generates a new JavaScript file myFile.js, this file can be executed with node like this:
node myFile.jsType 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 variables can be declared using: var, let, and const
The var keyword declares a globally-scoped or function-scoped variable, example:
The let keyword declares a block-scoped variable, example:
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.
Arrow Functions
Arrow function is called a lambda function in other languages. It respects the syntax below:
(param1, param2, ..., paramN) => expression
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.
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:
Then, I implement this interface in a class like this:
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:
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:
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.
Properties
TypeScript uses get and set keywords to define properties, as shown in the code below:
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:
Wherever we need to use module classes, we need to import them, like in the code below:
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:
Thanks for reading.
