Features of TypeScript

TypeScript has various advantages that make it a better option for Angular development:

Static typing: TypeScript mandates static typing, which aids in identifying problems during the development process and offers enhanced tools assistance.
Classes and interfaces: TypeScript adds classes and interfaces to support the paradigm of object-oriented programming. Better code organization and reusability are made possible by this.
Code navigation and Intellisense: Better IDE support, such as code navigation and IntelliSense, is offered by TypeScript. Developers can now comprehend and work with big codebases more easily.
Advanced JavaScript features: The most recent ECMAScript standards are supported, along with all the features of JavaScript, by TypeScript. It also offers more functionality, such as decorators and generics.

Example in TypeScript:

Create a new Directory for the typescript project by following command:

mkdir typescript-project

Enter your project directory now:

cd typescript-project

After creating your project directory, install TypeScript:

npm i typescript --save-dev

Once TypeScript is installed, use the following command to initialize your TypeScript project:

npx tsc --init

When starting your project you can set it up by making a tsconfig.json file in the directory of your typescript project project using the –init option in the command mentioned. You have the flexibility, to tune and customize how TypeScript and the tsc compiler collaborate by editing this tsconfig.json file. Inside this file you’ll find settings that’re adjustable – allowing you to include exclude or change them according to your requirements.
Create two new files called index.html and index.ts and paste the below code snippet.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="greeting"></h1>
    <script src="index.js"></script>
</body>

</html>

JavaScript

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greetingContainer = document
    .getElementById("greeting");
if (greetingContainer) {
    var greeter = new Greeter("w3wiki");
    greetingContainer
    .textContent = greeter.greet();
}

Compile the TypeScript code by following command:

npx tsc index.ts

After compiling your code a new file will be created called index.js which will generate below code snippet

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greetingContainer = document.getElementById("greeting");
if (greetingContainer) {
    var greeter = new Greeter("w3wiki");
    greetingContainer.textContent = greeter.greet();
}

dependencies:

//package.json

{
  "dependencies": {
    "typescript": "^5.4.2"
  }
}

Output in Ts :

Ts Output

Why TypeScript is Preffered in Angular Rather than JavaScript ?

Angular has become widely popular in the field of web development for its capacity to create adaptable applications. A major reason behind Angular’s success is its reliance on TypeScript as the programming language.

TypeScript, which extends JavaScript by adding typing and extra functionalities is favoured for building Angular applications. This piece will delve into the reasons why TypeScript is favoured over JavaScript in Angular development and compare the distinctions, between the two languages.

Table of Content

TypeScript
Features of TypeScript
Javascript
Features of JavaScript

Tags:

#AngularJS-Basics #JavaScript #TypeScript #Web Technologies

TypeScript

Javascript

Features of TypeScript

dependencies:

Why TypeScript is Preffered in Angular Rather than JavaScript ?

Similar Reads

Contact Us