By adding optional types, classes, async/await, and numerous other capabilities, Microsoft produced TypeScript, a typed superset of JavaScript that compiles to plain JavaScript. TypeScript was utilized as the main language to build Angular.

TypeScript introduction

A superset of JavaScript is TypeScript.

The foundation for TypeScript is JavaScript. You begin by writing the TypeScript code. The TypeScript code is then converted into standard JavaScript code using a TypeScript compiler.

Once you have the basic JavaScript code, you can use it anywhere JavaScript is supported.

Unlike JavaScript files, which end with.js, TypeScript files end with .ts.

In addition to using the JavaScript syntaxes, TypeScript also introduces new syntaxes to support types.

A TypeScript code is one that is written in JavaScript and doesn't have any syntax errors. This implies that TypeScript program  are TypeScript program  and vice versa. If you're converting an existing JavaScript codebase to TypeScript, this is really beneficial.

You can install it globally as

npm install -g typescript

Let's look at a straightforward TypeScript usage example.

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Sudheer";

document.body.innerHTML = greeter(user);

Only string types may be used as arguments in the greeting method.

Why Use TypeScript

TypeScript's primary objectives are:

  • Introduce JavaScript's optional kinds.
  • Add future JavaScript features, often known as ECMAScript Next or ES Next, to the existing JavaScript.

Features of TypeScript

  • Cross-Platform: Any platform that supports JavaScript also supports TypeScript. Any Operating System, including Windows, macOS, and Linux, can be configured to use the TypeScript compiler.
  • TypeScript is an object-oriented language with strong features including Classes, Interfaces, and Modules. For client-side and server-side development, you can write just object-oriented code.
  • Static type-checking is a feature of TypeScript. Annotations of the type are used for this. At compile time, it facilitates type checking. As a result, you may spot mistakes as you type the code rather than executing your script repeatedly. Additionally, if a variable is defined without a type, the type will be inferred based on the value of the variable using the type inference method.
  • Optional Static Typing: You can choose to utilize JavaScript's dynamic typing instead of TypeScript's static typing.
  • Manipulation of the DOM: TypeScript, like JavaScript, allows for DOM manipulation.
  • Features of ES 6: TypeScript contains the majority of ECMAScript 2015 (ES 6, 7) planned features, including class, interface, Arrow functions, etc.

Recommended Posts

View All

What is the difference between component and directive in Angular?


Learn the difference between Angular's components and directives. Discover their unique features and how to use them to build powerful web application...

What is Angular CLI and how to do I use it?


Angular CLI is a powerful tool for developing Angular applications. Learn what it is and how to use it to streamline your development process.

Building Professional UI Components using Angular Material Design


Learn how to build professional UI components using Angular Material Design in this comprehensive tutorial. Elevate your UI game today!

Angular 13 Data Binding Example Tutorial


The concept of data binding will be discussed. You'll also find out how to bind data in an Angular web application

Angular 13 Firebase Send Mail Example


Learn how to send a verification email to a new user in Angular, as well as how to prohibit users from accessing their accounts until the email has be...