TypeScript and How is it Different from JavaScript

TypeScript is a statically typed programming language that bills itself as an extension of JavaScript. Typescript code is compiled into JavaScript code that can be run both on the client side (browser) and on the server side (nodejs). The quality of the generated code is comparable to the code written by a professional developer with extensive experience.

The TypeScript multiplatform compiler is fast compilation and is distributed under the Apache license and contributors from all over the world, leading to the tradition of releasing a new version every two months.

Despite this periodicity, the versions remain compatible for a long time, and after a long time, the obsolete behavior remains available when special compiler flags are activated.

Therefore, you should not be afraid that the project would be deprived of new language features due to TypeScript versioning differences.

Well, many compiler developers means that with each new version, the compiler receives updates in all areas, be it syntax constructions or optimizing the compilation and assembly speed of the project.

Advantages of Typescript

Strong static typing

JavaScript is not strongly typed. TypeScript comes with an optional static typing and type inference system over TLS (TypeScript Language Service).

The type of variable declared without a type can be determined by TLS based on its value.

Improved OOP

Both JS and TS have support for object-oriented programming: classes, objects, inheritance. However, TypeScript has taken a step further and takes advantage of more of the OPP capabilities.

There are various capabilities, for example:

• Defining fields in the constructor
• Type conversion
• Abstract classes
• Generalization.

Compilation

JavaScript is an interpreted language. Therefore, it needs to be run to check that everything is working well. This means that you are coding without the ability to detect errors. Hence, you have to spend hours trying to find errors in your code.

The TypeScript transporter provides error-checking functionality. TypeScript will compile the code and generate compilation errors if it encounters any syntax errors. This helps to highlight errors before running the script.

TypeScript’s components

TypeScript is based on the following three components:

1. TypeScript Compiler – (TSC) converts instructions written in TypeScript to its JavaScript equivalent.
2. The language composed of type annotations, syntax and keywords.
3. Language Service. This component layer sits on top of the main TypeScript compiler and provides the functionality you need to work in IDEs and text editors: statement completions, code formatting and outlining, syntax highlighting, and more. The language service also provides code refactoring: variable renaming, debugging, and incremental compilation.

Basics of TypeScript

Well, let's take a look at the basic elements of TypeScript and explore them to understand how to work with this programming language.

Variables and constants

You can use the var keyword to define variables, just like in JavaScript. Another way to define a variable is to use the let keyword, added to JavaScript in ES 2015.

Using let is preferred because it avoids some problems associated with declaring variables. By using var, we can define a variable with the same name twice or more.

var x = "hi" 
console.log(x);
var x = "do";
console.log(x);

So, if the program is large, then we cannot track the fact that such a variable has already been declared, which is a source of potential errors. A similar problem can be solved with let, if the variable has already been declared, an error will be indicated.

let x = "hi";
console.log(x);
let x = "do"; // an error, variable x is already declared
console.log(x);

In addition to variables, TypeScript has constants, you can set a value for them only once. The const keyword is used to define constants:

const y = 1;
y = 2; // an error, you cannot change the value of the constant y

Access modifiers

Access modifiers allow you to hide the state of an object from external access and control access to that state. There are three modifiers in TypeScript: public, protected, and private.

If you do not assign any modifier, properties and functions are automatically determined to use the public modifier.

private. Elements with this modifier are available only from the class in which they are defined.

class Person { 
	private name: string;
	constructor(name: string) {
		this.name= name;
	}
	public print(): void {
		console.log(`Name: ${this.name}`);// cannot be accessed, cause name is private
	}
}
let bob = new Person("Bob");
bob.print();

The name property uses the private modifier, so we cannot use it outside the class, for example console.log (bob.name).

protected. Elements with this modifier are available from the class in which they are defined and from subclasses / derived classes.

Arrays

Arrays are defined using the [] expression and are strongly typed. That is, if initially the array contains strings, then in the future it will only be able to work with strings.

ReadonlyArray

TypeScript also allows you to define arrays whose elements cannot be modified. For this, the ReadonlyArray<> type is used, for which the type of array elements is indicated in angle brackets.

Unlike the Array type, for the ReadonlyArray type, we cannot accept a constructor. Instead, you need to pass the values as a regular array:

const colors: ReadonlyArray = ["Green", "Red"];

Tuples

With the tuple type, you can declare an array of known length with known types as its elements. When retrieving an element from such an array, TypeScript will automatically determine its type based on the description.

Unlike arrays, tuples can store values of different types.

The array syntax is used to define a tuple:

let user: [string, number]; // consists of a string and a number

Functions

TypeScript also defines a function using the function keyword, but it adds additional functionality for working with functions.

In particular, we can now determine the type of the passed parameters and the type of the return value.

function add(x: number, y: number){
let addition = x + y;
console.log(addition);
 }

Objects

An object is an instance that contains many key-value pairs. The values can be scalar values or functions, or even an array of other objects.

However, despite the fact that this is actually the same object that we could use in JavaScript, due to the strict typing of TS, we have limitations in this case. In particular, if we have the following code:

let cat = { name: "Bob", age: 4};
cat = { name: "Alex" };  // Error

TypeScript allows you to make properties optional. To do this, after the name of the property, you need to put “?”.

let cat : { name?: string; age: number }; // The name property is optional

Conclusion

If you haven't tried TypeScript yet, it is highly recommended that you give it a try. For JavaScript developers, it will provide many features that will simplify the work: you will save a lot of time and significantly reduce errors.