What is TypeScript and understanding the benefits
Today, JavaScript is a universal web language, the language supported by each browser does not require special installation. Web development is not possible without using JavaScript, and JavaScript has moved not only to client-side development, but also to server-side development such as NodeJS. One of the most powerful functions of JavaScript is its dynamic type, in which we can assign anything to any variable, but this function becomes an obstacle in large-scale JavaScript applications. JavaScriptalso doesn’t have a good IntelliSense, and you very rarely detect compile-time errors, especially type errors.
As stated on the official TypeScript website, “TypeScript is a superset of Javascript (ES6) with optional static typing. These two features allow you to create large-scale applications, maintaining quality and simplifying development. TypeScript is not a substitute for JavaScript, and it does not add any new features to JavaScript. TypeScript provides developers with features such as type security, compile-time type checking, and object-oriented constructs on top of JavaScript, basically allowing developers to think in object-oriented terms when writing JavaScript. The most surprising thing about TypeScript is that it compiles to JavaScript, so we don’t need to support any new VM to run TypeScript, which can then be referenced on a web page that is used on the server side, as in NodeJS.
TypeScript is an open source code developed by Microsoft, but is in no way bound to the Microsoft platform and can be used anywhere in any environment where there is a need to write JavaScript. While Microsoft does provide excellent TypeScript support in Visual Studio, and we will use Visual Studio for our examples, but we can also use the typescript compiler from the command line to compile TypeScript into JavaScript.
Module
The module is similar to the namespace in the world .NET and can contain classes and interfaces. Modules don’t have their own functions; they just provide a container that can be used to structure code in logical form. Look at the module as a container for business logic.
Interface
The interfaces are exactly the same as the interfaces in .NET that provide a contract for implementing classes. TypeScript helps provide compile-time error checking for classes that implement these interfaces. If all methods were not implemented properly (including the method signature), TypeScript marks them both during development and at compile time. What’s interesting about interfaces is that they don’t exist in JavaScript and therefore when we compile a TypeScript file into JavaScript, the interfaces are omitted.
Classes
The concept of classes is again very similar to the .NET / Java world. Classes contain variables, properties, and methods that form a single logical entity. TypeScript also allows you to set the scope of a variable and function using keywords such as” private “and” public”, although this scope does not affect the generated JavaScript.
Functions
Functions are methods that implement logic. TypeScript provides compile-time support to make sure that anyone calling the specified function agrees with the input argument and the type of return value.
Variables
Variables are fields defined inside a class or function. TypeScript allows us to define a variable using the keyword “var” and assign it a data type. Once the data type is assigned, any further use of the variable must be with the same data type, otherwise TypeScript will generate an error during development and compilation. TypeScript is also smart enough to define the type of variable and then treat it as that type when declaring and initializing the variable. In cases where TypeScript cannot define a type, It assigns this type of variable “any”.
However, TypeScript is a typed superset, which means that it adds rules for using different value types. An earlier error related to obj.heigth was not a syntax error: it is an error of misusing some value (type).
As another example, this is JavaScript code that you can run in your browser and it will print the value:
console.log(4 / []);
This is syntactically legal, the program prints Infinity. TypeScript, however, considers dividing a number by an array to be a meaningless operation and returns an error:
console.log(4 / []);
The right-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type.
Perhaps you really intended to divide the number into an array, perhaps just to see what would happen, but in most cases this is a programming error. The TypeScript type checker is designed to allow you to fix programs while catching as many common errors as possible. (Later, we’ll learn about the settings that you can use to set up how strictly TypeScript checks your code.) If you move the code from a JavaScript file to a TypeScript file, you may see type errors depending on how the code is written. These may be legitimate code issues or typescript that is too conservative.
