Open In App

Introduction to TypeScript

Improve
Improve
Like Article
Like
Save
Share
Report

TypeScript is an open-source, object-oriented programming language developed and maintained by Microsoft Corporation. Its journey began in 2012, and since then, it has gained significant traction in the developer community. It is a Strict Super Set of JavaScript, which means anything implemented in JavaScript can be implemented using TypeScript along with adding enhanced features (every existing JavaScript Code is a valid TypeScript Code). As TypeScript code is converted to JavaScript code it makes it easier to integrate into JavaScript projects. It is designed mainly for large-scale projects.

Key Features of TypeScript

1. Static Type Checking (Optional)

TypeScript allows you to check and assign types to variables, parameters, and function return values. While this step requires a little more effort, it significantly improves code quality. Optional static typing helps prevent bugs and makes your code more readable.

2. Class-Based Objects

One of TypeScript’s standout features is its support for classes. Unlike JavaScript’s prototype-based approach, TypeScript lets you write true object-oriented code. You can create classes, define constructors, and use inheritance and access modifiers (public, private, protected).

3. Modularity

TypeScript promotes modularity. By using modules, you can organize your code into smaller, reusable pieces. This modularity enhances maintainability and collaboration among team members.

4. ES6 Features

TypeScript embraces ECMAScript 6 (ES6) features. If you’re familiar with ES6 syntax (arrow functions, template literals, destructuring, etc.), you’ll feel right at home with TypeScript.

5. Syntactical Sugaring

TypeScript’s syntax is closer to that of high-level languages like Java. It’s like a sweetener for developers—more concise and expressive.

Structure of TypeScript

TypeScript Code cannot be interpreted by the Browser directly so there is a need to compile the TypeScript code into plain JavaScript Code, for this purpose we need the TypeScript Compiler (tsc).

TypeScript Compiler (tsc)

  • Written in TypeScript itself.
  • Compiles .ts files to .js files.
  • Installed as an NPM package (NodeJS).
  • Supports ES6 syntax.

TypeScript Vs. JavaScript

TypeScript

JavaScript

It is an Object Oriented Language (Class based) It is an Object Based Language (Prototype based)
Statically Typed language Dynamically Typed language
Supports Modules Does not Support Modules
Provides Errors at Compile time / during development Doesn’t provide Compile time errors
Takes more time as the code needs to be Compiled No need of compilation

Why TypeScript is Gaining Popularity ?

  • Initially, JavaScript was designed for lightweight, simple DOM manipulations. However, as web applications grew in complexity, developers needed more robust tools. TypeScript stepped in to address these needs.
  • Classes and Objects: TypeScript’s support for classes and objects simplifies implementing object-oriented concepts. It’s easier to reason about and maintain code when you have proper class-based structures.
  • Frameworks and Libraries: TypeScript’s adoption by popular frameworks like Angular has contributed to its rising popularity. Developers appreciate the enhanced features and the ability to write cleaner, safer code.

Why Do We Use TypeScript ?

  1. Better developer experience – One of the biggest advantages of TypeScript is to enable IDEs to provide a richer environment for spotting common errors as you type the code. For a large scale project adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run.
  2. Code quality – Defining data structures in the beginning, using types and interfaces, forces you to think about your app’s data structure from the start and make better design decisions.
  3. Prevents bugs – TypeScript won’t make your software bug free. But it can prevent a lot of type-related errors. Along with the Clever IntelliSense many browsers and IDEs support direct debugging through Source Maps.
  4. Active community – TypeScript is getting more and more popular. It’s used by the top tech companies like Google, Airbnb, Shopify, Asana, Adobe, and Mozilla so we can assume that it reaches their expectations in terms of scalability – as they are developing large and complex applications.
  5. TypeScript Is Just JavaScript – TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.

“Often the way TypeScript ends up being adopted — in enterprises and start-ups and individual developers — is that you try it on one project and you say ‘wow, this is great!’ and then you start evangelizing and it grows locally in your sphere of influence.”— Anders Hejlsberg (Core Developer TypeScript).

Basic Example of TypeScript

index.html




<!DOCTYPE html>
<html>
 
<body>
    <h2>Welcome To GFG</h2>
 
    <p>
        Default code has been
        loaded into the Editor.
    </p>
 
    <script src="types.js"></script>
</body>
 
</html>


Javascript




let myString: string;
 
myString = 'Hello from ts'
 
console.log(myString);


After Saving the above files we need to transpile the TypeScript Code

In the terminal, type the following command:

tsc types.js (syntax : tsc filename). 

On successful compilation a JavaScript file with the same name and .js extension will be created i.e. types.js containing the transpiled code in the same directory. Now on running the index.html the below  output can be seen.  As discussed above TypeScript code is transpiled into standard JavaScript Code.

Generated JavaScript Code in types.js File:

Javascript




var myString;
myString = 'Hello from ts';
console.log(myString);


Output: 



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads