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...

Angular Component Lifecycle Hooks Example


Learn about Angular component lifecycle hooks with our comprehensive example. Understand how they work and optimize your code for better performance.

Best Strategies for Building Enterprise Applications with Angular


Learn the best strategies for building enterprise applications with Angular. Discover tips and tricks to create scalable and maintainable apps.

Angular 13 Directives – Component, Structural & Attribute


Angular Directives tutorial, Directives in Angular is basically a TypeScript class. such as Component, Structural & Attribute.

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.