What is TypeScript and How to Use It

JavaScript is the primary programming language for building web interfaces on most websites. Despite its widespread use, not all developers appreciate its capabilities, and alternatives remain limited. Today, the only significant competitor to JavaScript is WebAssembly. However, during its existence, WebAssembly has failed to gain sufficient popularity among developers, which leaves JavaScript at the top of the web development technologies.

In the current situation, developers are faced with two main options.

Use JS with all its shortcomings.
Write code in another language and compile it to JS.

Numerous developers prefer the second solution. As a result, several build-on languages based on JavaScript have emerged in recent years. These languages extend the capabilities of JavaScript, simplifying development and improving code readability. Popular examples of such languages include TypeScript, CoffeeScript, and Dart, which offer new features and syntax, making the programming process more efficient.

Dart;
CoffeeScript;
ClojureScript;
TypeScript.

In this article, we will discuss the important aspects of TypeScript, which in 2019 took one of the leading positions among programming languages and entered the top 10 most popular ones. Developed by Microsoft, TypeScript offers static typing, which allows developers to detect errors at compile time, improving code quality and increasing productivity. Thanks to its compatibility with JavaScript and support for modern features such as classes, interfaces, and modules, TypeScript is becoming increasingly popular in the development of scalable applications. We'll look at its benefits and key usage aspects, as well as its impact on modern programming.

Source

Source

What is TypeScript

TypeScript is a modern programming language that addresses many of the shortcomings of JavaScript. Code written in TypeScript is similar to JavaScript, making it easier to learn for developers with frontend experience. Particularly convenient is the ability to use JavaScript code in TypeScript, making the transition to the new language smoother. TypeScript offers static typing, which allows for error detection at compile time, improving code reliability and quality. Using TypeScript is becoming increasingly popular among developers looking to improve their projects and simplify the development process.

TypeScript code compiles to JavaScript, making it universally applicable to developing various projects compatible with all browsers. Moreover, developers can choose the target JavaScript version to compile to, providing flexibility and adaptability to specific project requirements. TypeScript, with its static typing and modern features, significantly simplifies the process of developing and maintaining code, making it an excellent choice for building scalable applications.

TypeScript is an open-source project that is rapidly developing and actively updated. Many features introduced in TypeScript are subsequently integrated into JavaScript. These features include let and const, arrow functions, and other modern features. Using TypeScript helps developers create more reliable and scalable code, making it a popular choice for large projects.

Let's consider two main advantages of TypeScript over JavaScript. First, TypeScript provides static typing, which allows developers to catch errors at compile time, improving code quality and reducing debugging time. Secondly, TypeScript supports modern language features such as interfaces and classes, which promotes more structured and organized code. These advantages make TypeScript a preferred choice for developing large and complex applications. Problems in JavaScript often arise due to dynamic typing and the unusual behavior of data types. Dynamic typing allows variables to accept values of different types, which can lead to unexpected errors and make debugging difficult. For example, operations on different data types can produce unpredictable results, requiring developers to be attentive and understand the internal mechanisms of the language. Understanding these features will help you avoid common pitfalls and improve the quality of your JavaScript code.

TypeScript offers static typing, which avoids many of the problems associated with dynamic languages. This programming language includes basic data types such as numeric, string, and boolean, as well as the ability to create your own data types. One way to define custom types is to use enumerations, which helps improve code readability and maintainability. Using TypeScript, with its rich set of data types, helps make software more robust and predictable.

JavaScript and TypeScript both support object-oriented programming, including classes, objects, and inheritance. However, TypeScript offers more advanced OOP capabilities, including the use of interfaces. Interfaces in TypeScript allow you to define the structure of objects, ensuring strong typing and improving code readability. This makes development more efficient and makes applications easier to maintain and extend. These features make TypeScript a preferred choice for developers looking to leverage the benefits of an object-oriented approach in their projects.

One of the significant advantages of TypeScript is the presence of access modifiers. There are three main modifiers in TypeScript: public, private, and protected. Each of them plays an important role in controlling the visibility and access to class properties and methods. The public modifier makes elements accessible from anywhere, private restricts access only within the class itself, and protected allows access only within the class itself and its descendants. Using these modifiers helps create safer and more structured code.

There are many additional features.

defining fields in the constructor;
type conversion;
abstract classes;
genericization and so on.

In the future, these features may be implemented in JavaScript, but browsers will not support them anytime soon.

Cons of TypeScript

Developers value the TypeScript language highly, and large projects, such as the popular Angular framework, have already started using it. However, this is not enough for TypeScript to become as popular as JavaScript. The main reasons for this are that developing web applications in TypeScript is more expensive and time-consuming. Despite its advantages, such as static typing and improved tool support, TypeScript still faces barriers to widespread adoption.

When using libraries or frameworks that don't support TypeScript, developers must define signatures themselves, specifying data types for all functions and methods. This can be a labor-intensive process, especially given the scale of modern libraries. It's important to consider that proper typing contributes to improved code reliability and quality, but it requires a significant investment of time. Developers must be prepared for this challenge to ensure effective use with unported tools.

The barrier to entry for TypeScript is high. To effectively leverage its benefits, knowledge of data types and the fundamentals of object-oriented programming is required. This knowledge allows developers to create more reliable and maintainable code, making TypeScript a popular choice for developing complex applications.

Installing TypeScript

To get started with TypeScript, first install Node.js. You can find detailed installation instructions in our article. Once installed, open your console and enter the following command:

Install TypeScript globally using the npm command. This will allow you to use TypeScript in any project on your computer. To do this, run the following command in your terminal: npm install -g typescript. Global installation makes it easier to access the TypeScript compiler and allows you to easily manage projects that use this programming language. Make sure you have the latest version of Node.js and npm installed for the command to work correctly.

Create a file with the .ts extension in the scripts folder where you will write your code. To compile your TypeScript code, use the tsc command. To compile the app.ts file, run the following command:

The tsc app.ts command is used to compile a TypeScript file named app.ts into JavaScript. TypeScript is a strongly typed programming language that compiles to standard JavaScript, providing safer and more predictable programming. When you run this command, the TypeScript compiler parses your code, checks for errors, and creates a corresponding JavaScript file that can be used in web applications. It is important to ensure that you have TypeScript installed and the appropriate configuration file set up to optimize the compilation process. Proper configuration and use of the tsc command will help developers work effectively with TypeScript projects, improving code quality and speeding up the development process.

Once the process is successfully completed, the app.js file will be created in the folder. This file must be included in your web page for the application to function correctly. Make sure the path to the file is specified correctly to avoid loading errors. Properly including the app.js script will significantly improve the functionality of your website.

The tsconfig.json file allows you to customize the configuration, which will greatly simplify the TypeScript compilation process. Proper settings will help avoid errors and optimize the project build, making it more manageable and understandable. Make sure you specify all necessary parameters, such as the target JavaScript version, file paths, and other options, to ensure your compilation runs as efficiently as possible.

The compilerOptions object contains all the settings needed to customize the compiler. These settings determine how the code will be compiled, including aspects such as the target JavaScript version, type usage, source map generation, and other settings that affect the compilation process. Proper configuration of compilerOptions allows you to optimize your code, improve its performance, and ensure compatibility with different runtime environments.

target — the JS standard to which the code is compiled. ECMAScript 5 is specified here because it is supported by all modern browsers;
removeComments — this parameter determines whether comments should be removed;
outFile — the file where the JS code is saved.

Now you can simply enter the tsc command without any additional parameters to compile TypeScript. Keep in mind that the compiler will process all files with the .ts extension in the current directory, which simplifies the development process and allows you to quickly obtain compiled JavaScript code. This makes working with TypeScript more convenient and efficient, especially when dealing with multiple source files.

Writing an Application in TypeScript

Let's create a simple calculator and look at how the code for it differs in JavaScript and TypeScript. We'll start by developing the form structure.

The page contains two fields for entering numbers, a button for running the script, and an element for displaying the result. Users can enter the required values in the fields and then click a button to perform the calculation. The result will be displayed in a specially designated place on the page.

The TypeScript code is presented as follows:

The compiled JavaScript code for the calculator is presented below. This code provides the functionality of the calculator, allowing you to perform various mathematical operations. Optimized and structured code makes it easy to make changes and add new features as needed. Proper code organization also improves readability and maintainability.

Conclusion

TypeScript has a modern and user-friendly syntax, but JavaScript remains the leader in frontend development. Knowledge of JavaScript is essential, even if you prefer TypeScript. It's important to understand that despite the benefits of TypeScript, most libraries and frameworks are still based on JavaScript, making learning it essential for full-fledged web development.