Introduction to TypeScript - GeeksforGeeks

12 Apr, 2021
TypeScript is an Open Source Object Oriented programming language developed and maintained by Microsoft Corporation. TypeScript is a strongly typed language and its first version was introduced in 2012. It is a Strict Super Set of JavaScript, which means anything that is implemented in JavaScript can be implemented using TypeScript along with the choice of 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.
TypeScript ===>>> JavaScript + Type + Some Added Features
What does TypeScript offer ?
Static Type Checking (Optional) – Like other high level programming languages like Java, C etc. TypeScript does provide static type checking unlike JavaScript. Although static typing requires some extra steps while writing code but it has its own advantages. With TypeScript, we can check and assign variables, parameters and function types. It is completely Optional and helps us find and prevent bugs. Also helps make code more readable and descriptive.Class Based Objects – Another huge advantage is the use of Classes which provides the ability to use true object oriented programming in our applications and prevents use of prototype based objects. It also provides encapsulation, inheritance and modifiers.Modularity – It helps make the code more modular.ES6 Features – Support for ES6 features is also one of the main reasons for its popularity.Syntax – TypeScript provides syntax which is closer to java and other high level languages (Syntactical Sugaring).
Static Type Checking (Optional) – Like other high level programming languages like Java, C etc. TypeScript does provide static type checking unlike JavaScript. Although static typing requires some extra steps while writing code but it has its own advantages. With TypeScript, we can check and assign variables, parameters and function types. It is completely Optional and helps us find and prevent bugs. Also helps make code more readable and descriptive.
Class Based Objects – Another huge advantage is the use of Classes which provides the ability to use true object oriented programming in our applications and prevents use of prototype based objects. It also provides encapsulation, inheritance and modifiers.
Modularity – It helps make the code more modular.
ES6 Features – Support for ES6 features is also one of the main reasons for its popularity.
Syntax – TypeScript provides syntax which is closer to java and other high level languages (Syntactical Sugaring).
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
JavaScript
Why is TypeScript gaining popularity ?
JavaScript was initially developed to be a light weight easy to learn language mainly focusing on simple DOM manipulations but the standards changed with time and that is where TypeScript came into picture as it adds enhanced features to JavaScript.
The support for Classes and Objects is also one of the main reasons for its increasing popularity as it makes it easier to understand and implement OOPS concepts as compared to the standard prototype based implementation provided by native JavaScript.
Also the use of TypeScript in popular JavaScript Frameworks like Angular has helped TypeScript gain interest.
Why do we use TypeScript ?
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.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.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 .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.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.
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.
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.
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 .
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.
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).
Example:
 
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>
types.ts
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: 
Picked
TypeScript
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?