Deciphering TypeScript: A Journey through the Nooks of the Language that Transforms JavaScript
Introduction With the increasing complexity of modern web applications, there is a need for more powerful tools for developers. In this context, TypeScript stands out as an extension of JavaScript that offers static types, making maintenance and error detection easier even before the code execution. Let’s explore the reasons why TypeScript has been rapidly gaining popularity and how it can significantly improve the development experience. What is the TypeScript? TypeScript is an open-source programming language developed by Microsoft. It’s an extension of JavaScript that adds static typing features to the code. In other words, TypeScript allows developers to specify the data type of variables, function parameters, and return values, which helps detect programming errors during development. Why use it? In large projects, TypeScript facilitates code maintenance by providing clear information about the types of data used. This makes the code more understandable, facilitates collaboration among developers, and reduces the risk of introducing errors during changes. Additionally, as mentioned in the introduction, TypeScript is compatible with the JavaScript ecosystem, which means you can easily integrate TypeScript code into existing JavaScript projects. Furthermore, with static types, refactorings can be performed more safely, especially in large projects where changes can have complex side effects. Main features of TypeScript TypeScript has several native features, here are some of them: Static Typing: TypeScript allows the definition of types for variables, function parameters, object properties, etc. This helps detect type errors during development, providing an additional layer of security. Type Inference: Even if you don’t explicitly specify types, TypeScript can infer types based on the context of the code. This reduces the need for verbose type declarations. Interfaces: TypeScript supports the creation of interfaces, which can be used to define contracts for objects. This is useful for ensuring that objects have the necessary properties. Enums: Enums allow the creation of named sets of constant values, which can make the code more readable and maintainable. Union Types and Intersection Types: TypeScript offers the ability to combine types using union (|) and intersection (&) types, allowing greater flexibility in data modeling. Generics: Generics allow you to create components and functions that can work with a variety of types, providing code reuse and greater flexibility. Namespaces and Modules: TypeScript supports code organization using namespaces and modules, helping to avoid naming conflicts and improve project structure. Decorators: Decorators are a way to add metadata to classes and members, allowing for extensibility and additional features, such as those used in frameworks like Angular. Mixins: TypeScript supports mixins, a technique for sharing functionality between classes in a flexible way. Strict Null Checks: When enabled, this option enforces null and undefined checks, helping to avoid many common errors in JavaScript. TypeScript Compiler (tsc): TypeScript has its own compiler (tsc) that converts TypeScript code into JavaScript, making it easy to integrate with existing projects. ES6/ESNext Support: TypeScript has support for the latest ECMAScript features, allowing the use of advanced JavaScript features. Integration with Development Tools: TypeScript is well integrated with various tools, such as code editors (VSCode, Atom, etc.) and build systems (Webpack, etc.). JavaScript Compatibility: TypeScript is backward compatible with JavaScript, meaning you can gradually add TypeScript to existing projects without the need for a complete rewrite. How is the syntax? The syntax of TypeScript is quite simple, just like JavaScript’s. I’ve developed a simple calculator to show you exactly how the syntax isn’t difficult. class Calculator { add(a: number, b: number): number { return a + b; } subtract(a: number, b: number): number { return a – b; } multiply(a: number, b: number): number { return a * b; } divide(a: number, b: number): number { if (b === 0) { throw new Error("Cannot divide by zero"); } return a / b; } } const calculator = new Calculator(); const sum = calculator.add(5, 3); console.log("Soma: ", sum); const difference = calculator.subtract(8, 4); console.log("Subtração: ", difference); const product = calculator.multiply(2, 6); console.log("Multiplicação: ", product); try { const quotient = calculator.divide(10, 2); console.log("Divisão: ", quotient); } catch (error: any) { console.error(error.message); } The syntax, as you can see, is simple. The biggest difference indeed is the typing, which more experienced programmers have already noticed. But if you don’t know much about programming, don’t worry. I’ll explain to you where these typings are. Notice that in the function parameters, inside the ‘Calculator’ class, we have: a: number, b: number This means that this function takes numbers as parameters. If when this function is called, there’s a string in the parameters, TypeScript itself recognizes it as an error and alerts you, not even allowing the code to be executed. How to run the code To run a TypeScript code, we need to compile it into JavaScript first. Although sometimes the name ‘compile’ may seem a bit intimidating, the process is quite simple. In your terminal, in the project folder, run the command tsc –init This will start the tsconfig, the TypeScript configuration file, which will take care of compiling our code. Now let’s compile the code itself by running the command tsc -w Note that now a ‘.js’ file has been created in your project folder, and it’s this file that we’ll actually run. Finally, let’s run what we’ve done. To do this is simple, but first, make sure you have NodeJS installed on your machine with the command node -v If you don’t have it, go to https://nodejs.org/en After Node is properly installed, you’re 100% ready to run the project. Just run (without ‘<‘ and ‘>’) node <meu-projeto>.js There you go, now you’ve run your first TypeScript project, and you’ve got a better understanding of what TypeScript is all about.