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).
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 |
| 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 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.
“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:
