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.