In this article we are going to learn about Angular, the role of TypeScript in Angular Applications, and how an Angular compiler works. So, let’s start with the first understanding of Angular.
Table of Contents
What is Angular?
Angular is a framework for building client-side applications in HTML, CSS, and JavaScript/TypeScript. It allows you to create reactive Single-Page-Applications (SPAs) which means, there’s only one HTML file and a bunch of JavaScript code that we get from the server. Every change that happens like when a user navigates to a different page, the content that gets visible to the user is rendered in the browser. It gives the user a very reactive user experience (UX). JavaScript is much faster than reaching out to a server for every page change and every new piece of data you want to display. Therefore this approach allows you to create web applications that look and feel like mobile applications i.e. very fast!. If you do need some data from a server, you simply load it in the background so that the user never leaves this experience of having a reactive web application to use. Well, how this is done is that JavaScript changes the DOM, changes whatever is displayed here (in the browser), by changing the HTML code during runtime and only the currently-loaded page is changed.
Angular has a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more. Angular allows writing static HTML code and dynamic things. It is a component-based framework for building scalable web applications. A component always has a template, the HTML code, possibly has some styling in CSS file and importantly it has a Typescript (.ts) file and it also contains the definition of the component. This is what will be converted to normal JavaScript by the build workflow.
An angular framework is built entirely in TypeScript, and as a result, using TypeScript with Angular provides a seamless experience. TypeScript is a primary language for Angular application development. So, an understanding of TypeScript is also necessary to develop Angular applications. So, now we let’s move on to discuss some details of TypeScript.
TypeScript:
Typescript really is just a superset of Javascript. Any valid JavaScript code is also a valid TypeScript Code. It offers more features than vanilla JavaScript like classes, interfaces, and very important which gives it the name, types; strong typing. So you define in Typescript if a certain variable is a number, a string, or something else. You don’t do this in vanilla Javascript. In JavaScript, there is dynamic typing where the interpreter assigns variables a type at runtime based on the variable’s value at the time. You can have a string variable and then can assign a number and that’s totally fine. That won’t work in typescript. It will give you an error and therefore it allows you to write much more robust code which gets checked at the time you write it and not just at the time you run it. This is a great enhancement.
Example:
let val = 123; // In JavaScript (JS) val = 'abc' // JS will allow to assign same variable a different type
let val:number = 123; // In TypeScript (TS) val = 'abc' // In TS this line will cause an error
However, TypeScript doesn’t run in the browser, so it is compiled to JavaScript in the end. Now this compilation is really fast and therefore, in the end, JavaScript is going to run in the browser. We are not writing the Angular app in JavaScript, though, because, technically, that won’t be fun. A lot of the features really only exist in TypeScript and Angular is meant to be used together with TypeScript. It is also less error-prone and easier. We can assign types to variables and properties for class members.
Advantages of TypeScript:
-Strong Typing
-Object-oriented features
-Compile-time errors
-Great tooling
Looking to Hire Angular Development Team?
Share the details of your request and we will provide you with a full-cycle team under one roof.
Why do we need Angular?
As our application gets more complex, vanilla JavaScript or Jquery code becomes hard to maintain, we need a way to structure our application properly. Therefore, the Angular framework helps in creating complex Web Applications with a neat structure using components.
Benefits:
-Gives our applications a clean structure that is easy to understand and maintain.
-Includes a lot of re-usable code.
-Makes our applications more testable so it will make your life easier.
Angular Compiler:
The Angular compiler is the tool used to compile Angular applications and libraries. The compiler is built on the TypeScript compiler and extends the process of compiling TypeScript code to add additional code generation related to Angular’s capabilities.
In this way, the Angular compiler can be considered as an extended TypeScript compiler that also knows how to “execute” Angular decorators, applying their effects to the decorated classes at build time (as opposed to run time).
The main goal of the Angular compiler is to compile TypeScript code while transforming recognized Angular decorated classes into more efficient representations for run time. As browsers can’t execute TypeScript directly. Typescript must be “transpiled” into JavaScript using the TypeScript compiler (tsc), which requires some configuration. The tsconfig.json file in the Angular project contains the typescript compiler settings and based on these settings, it converts TypeScript code to JavaScript which browsers can understand. The tslint.json file includes a number of settings for tslint. Tslint is a static analysis tool for TypeScript code so it checks the TypeScript code for readability, maintainability, and functionality errors. The tsc compiler is better described as a Transpiler. The difference between transpiler and compiler is subtle and a transpiler can be thought of as a type of compiler; but a (pure) compiled language is (usually) turning a high-level language into a low(er) level language (nearer to machine code), like the C# example. A transpiler turns a high-level language into a similar level (of abstraction) language (also high level).
In the Angular project, this compilation is handled by the Angular CLI. The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. This is one of the reasons why we need a project management tool like the CLI. This is the recommended and the best way of creating Angular projects because there are a couple of files that need to be converted before they can run in the browser and the CLI does all of that and it also heavily optimizes our code so that we ship a highly optimized code version to the browser once we finally deploy our app. The Angular CLI can be installed using the below command:
npm install -g @angular/cli
Furthermore, Node.js needs to be installed before this. It’s a server-side language and it will be used behind the scenes by the CLI to bundle and optimize our project. We’ll use Node Package manager to manage the different dependencies an Angular project has. Dependencies are things like the Angular framework itself but also some other libraries that the framework uses. The important goals of the Angular compiler are listed below:
Compiler Goals:
-Apply TypeScript’s type-checking rules to component templates.
-Compile Angular decorators, including components and their templates.
-Re-compile quickly when the developer makes a change.
So, in this article, we learned briefly about Angular, the role of TypeScript in Angular applications, and what happens during the compilation phase of our Angular application. To learn more about how to write code in Angular, the official documentation tutorial can be followed on this link: https://angular.io/start where there is a step-by-step guide to building a project in Angular.