Mastering TypeScript: Your Journey from JavaScript

Introduction

Over the years, JavaScript has gone through a remarkable transformation. It is the language of the web and has evolved from its early days as a scripting language that was primarily used for simple interactions on the client side. Now, it is a powerful and versatile tool that can be used to develop complex web applications. However, as projects become more intricate and larger, a more structured and robust approach to development is required.

Introducing TypeScript: Typescript is not just your typical programming language, but rather a superior version of JavaScript that incorporates powerful tooling and static typing. For programmers who are already well-versed in JavaScript, embracing TypeScript could prove to be a game-changing experience.

The following article is a transition from the realm of JavaScript to that of TypeScript. We will investigate the reasons for TypeScript's recent growth in popularity among programmers, as well as the advantages it provides. Furthermore, we will explore practical measures to transition from JavaScript to TypeScript with ease. If you are well versed in JavaScript, this guide will provide you with the necessary knowledge and resources to confidently embrace TypeScript.

Understanding TypeScript

Typescript is a superset of Javascript that fills the gaps in Javascript. The creation of TypeScript was primarily motivated by JavaScript's deficiency in having strong typing. In JavaScript, the type of variables can change dynamically during runtime, which can result in unexpected results and debugging complications. TypeScript brings a solution to this by introducing Static typing, which permits developers to specify the types of variables, function parameters, and return values.

• What is Static Typing?

  Static typing is a programming concept that ensures the data type of a variable­ is determined at compile­-time and remains constant throughout the runtime. This means that when a variable is declare­d, its specific type, such as number, string, or boole­an, must be explicitly specifie­d. Once defined, it cannot hold value­s of other incompatible types. By performing this early type checking during compilation, many common runtime­ errors are preve­nted. An example is given below how variables are declared with their types in Typescript.

  

• Type inference

  TypeScript can often infer types based on how you use variables and functions, reducing the need for explicit annotations while still providing strong typing. Even when we don't provide type to a variable explicitly, Typescript automatically takes care of assigning types at runtime. This is known as Type inference. In the example below, we've x as a variable but when x is assigned a number value, It throws an error.

  

• Explicit type declaration

  In Typescript, explicit type declarations are a fundamental aspect of the language, as TypeScript is designed to be statically typed. Statically typed means that you must explicitly declare the data types of variables, function parameters, and function return types. This helps catch type-related errors at compile-time rather than at runtime.

  • Variables:

    Variables are declared using their particular types:

    

    Types of variables:

    • Number

    • String

    • Boolean

  • Objects:

    The Object declaration is also simple and uses an Object type to declare.

    

    Note that in the above example, we've passed an array and in JS arrays are objects themselves.

    We can also declare the structure of the Object before assigning it any value to make sure that the object should have a particular structure only. Given below:

    

  • Functions:

    To declare a new function with type we do it using Function keyword:

    

    Declaring parameters type:

    We can also pass the types of parameters that the functions will accept.

    Here, We can pass optional arguments using `?` before declaration to mention it as an optional argument.

    Declaring the return type of a function:

    

    A function that does not return anything:

    

• Type Alias:

  Type alias is a way to store a sequence of types to enhance code reusability and clean code.

  

  Now we can pass this variable without having to define the same parameter again and again.

Deriving class properties in Typescript:

There are basically 3 types of properties in Typescript.

• Public:

  By default all the properties in TS are Public. That means they can be accessed/modified outside the class.

• Private:

  Properties declared as Privates can not be accessed and modified outside the class.

• Read Only:

  Read Only properties are the properties that can be accessed from within the class and from outside but can not be modified from within the class and outside the class.

Examples:

Throughout our transition from JavaScript to TypeScript, we have embarked on a journey towards producing code that is more resilient, maintainable, and scalable. TypeScript provides us with a comprehensive toolkit that ranges from static typing to intelligent code analysis, which ultimately enhances our development experience by minimizing the occurrence of errors. It is important to note that TypeScript is more than just a programming language. It is a mentality and a commitment to writing code that is both functional and dependable. Whether you are experienced in JavaScript or new to web development, TypeScript is an invaluable asset in creating high-quality and trustworthy software. Incorporate it into your workflow, experiment with it, and allow it to propel your programming journey to new heights.

---

Thanks for joining me on this TypeScript adventure! Give a thumbs-up if the blog added value in your knowledge.

Till next time. Happy coding! 🚀📝