What is TypeScript? 

TypeScript is a lot like JavaScript, but with more. It offers better tooling, it can run anywhere that JavaScript runs, and it can even add extra syntax to JS.

Whether you are a computer science student or a non-techie who has aspirations to become a web developer, you probably have heard of frontend and backend languages. Frontend languages are HTML, CSS, and JavaScript, while backend languages are Java, PHP, and many more. 

And now you are suddenly introduced to a new language called TypeScript which not only in name but also in functions is similar to JavaScript. So, it is bound to have created some confusion.

Why Use TypeScript? 

Initially, JavaScript, like HTML and CSS, was regarded solely as a client-side programming language. However, HTML, CSS, and JS are still considered the popular frontend trinity, and learning them is a requirement for anyone aspiring to be a web developer.

As time went by, JavaScript’s multiple features let developers realise that this language can also be used as a server-side language. 

However, as JavaScript became more widely used, its failure to meet the requirements of object-oriented programming became increasingly apparent to programmers.

Since JavaScript is beneficial as a server-side language but lacks the aspects of building a robust program, the same development team developed another programming language similar to JavaScript but offered more features. Welcome to TypeScript.

Aside from its superiority as an object-oriented alternative to JavaScript, the other reasons why one should use TypeScript are:

  • It helps in avoiding errors in the code.
  • Has code structuring and object-oriented programming techniques.
  • Can be easily converted into plain JavaScript code.
  • Supports ES6.
  • It offers rich IDE with autocomplete and code navigation features.
  • Interfaces, sub-interfaces, classes, and subclasses are all supported.
  • Offers scalable HTML5 client-side development.
  • Itmakes use of data structures to the fullest. Thus providing a better web page design and organization of data.
  • Supports JS libraries & API Documentation.
  • It’s portable, meaning it can operate on any device, browser, or operating system that supports JavaScript.
  • It does not require a specific runtime environment to execute.
  • It has a large active community developing programming language and is used by Silicon Valley corporations such as Google, Adobe, and others.

Also, JavaScript files end with the extension ‘.js’ while the TypeScript files end with ‘ts.’

Components of TypeScript

Before starting to use TypeScript, there are a few essential components you need to know, they are:

  • Language
  • TypeScript compiler
  • TypeScript language service

The language comprises the core concepts of the language, such as syntax, keywords, and type annotations.

The TypeScript compiler (tsc) is responsible for converting the code written in TypeScript to converted to its JavaScript equivalent.

The TypeScript Language Service (TLS) is a unique component that performs editor-like applications. With this feature, developers can expect typical editor operations like statement completion, signature help, code formatting and outlining, colourization, etc. the TLS also comes with optional features such as static typing and a type inference system. 

How to Use TypeScript?

Since we know what TypeScript is, the next concern should be installing it. To install JavaScript, you must first install Node.js on your computer.

After installing Node.js, the next thing is installing TypeScript using NPM or Node Package Manager. Using the following command:

npm i -g TypeScript

Using the above command, it will be installed on your computer globally (we used the –g command to install TypeScript globally).

After installing it, you can start working on your code.

Let’s say you are working with an ‘index.html’ and ‘main.ts’ file on the same folder. In the HTML program, you will connect the code to ‘main.js’ and not to ‘main.ts.’ This is because browsers do not recognize TypeScript code. 

Also, if you are wondering how the compiler interprets the TypeScript program as a JavaScript program, it is simple. The compiler will create a new file containing the same TypeScript program in a different extension called ‘.js.’ 

After completing the program, you will compile the code. To run the TypeScript compiler, developers type the following code.

tsc main.ts

By the above code, the compiler is told to compile the code in the main.ts file and create a new file under the name main.js. If the code works right, you will see a new main.js file in the folder you have been working on.

The code should be compiled after every time you have made changes to the code. But since that is quite a tedious task, you can simply add a -w to simplify the compiling process:

tsc main.ts -w

The -w refers to watch mode, which specifies that the compiler will run in watch mode and automatically compile the code whenever the file is saved.

TypeScript vs JavaScript

Since TypeScript is a subset of JavaScript, they have an equal number of similarities and differences. 

  • The first and foremost difference between TypeScript and JavaScript is that TypeScript is an object-oriented language, and JavaScript is a scripting language.
  • It is a statically typed language, which means that the type is checked during the compile time, while JavaScript is a dynamically typed language whose style is checked during the run time.
  • It supports modules, while JavaScript, on the other hand, does not support modules.
  • As TypeScript requires to be compiled, it spends more time compiling than JavaScript, which does not need to be compiled.
  • It has a feature of prototyping while JavaScript doesn’t.

Since TypeScript is not recognized by any browsers, converting the .ts file into .js is necessary. So it starts and ends with JavaScript.

Conclusion

To create innovative and interactive web pages, developers must learn JavaScript and TypeScript. We hope you have gained some understanding of how it works and how it is different from JavaScript. With the increasing level of competition for developer jobs, having an additional unique skill will enhance your resume, so we hope you give it a try and benefit from its diverse functions.

Learn some basic JavaScript for free

Apart from Code Institute’s Full Stack Software Development programme, we also offer a free 5 Day Coding Challenge. In this short course, you can learn the basics of HTML, CSS and JavaScript. Register now through the form below. 

Best Way To Make Time To Study

Learning is a continuous process. Learning something new is never too late or too early, and when it comes to programming, the process of learning is simply endless. Every now and then, something new emerges in the tech sector, and to be the perfect programmer, you must be well-versed in the most recent concepts and […]

Python Cheat Sheet

Python is one of the most popular programming languages. It currently takes first place both in the Tiobe index and the PYPL index and has been named Language of the Year in 2007, 2010, 2018, 2020, and 2021. This popularity stems both from Python’s versatility and ease of use. Python can be used for Web […]

Git Stash

Git Stash is a built-in command that temporarily stores all of the most recent modifications to the code. That is, the modifications are stored, and the code is reset to its previous state. Git is software that allows a group of developers to keep track of changes and alterations to a source code throughout the […]