Why we want TypeScript?

As you know, TypeScript is a statically-typed language that is used to develop large projects. TypeScript can help you catch many errors in your code during the development phase. Using TypeScript as a superset of JavaScript with types is not the only option for creating safe code, although it is the most beautiful one. So, in this topic, let's look at options for creating statically-typed code.

JSDoc

There exist tools called type guards. One such tool is JSDocs, which is mainly used to generate documentation for JavaScript. In our case, it can be used to control the types of variables, return values, and function arguments. You can use special JSDocs type annotation in many IDEs and even online interpreters without installing additional tools.

Let's take a look at the following snippet:

//@ts-check

/**
 * @type {string}
 */
let word = 'Hello'

At first glance, you can see a strange construction of comments. The commented lines of code are functional, that is, they are not ordinary comments. The line //@ts-check specifies that errors should be displayed in this file, examples of which we saw when using TypeScript. For example, if you assign a numeric value to word variable, the following error will occur:

Type 'number' is not assignable to type 'string'.

Moreover, you can use many features of TypeScript like union types and special types for arrays. For example:

//@ts-check

/**
 * @type {string | number}
 */
let word = 5 //Without error

word = 'something' //Without error

word = true //Type 'boolean' cannot be assigned to type 'string | number' - error

Intuitively, union type makes it possible to specify a limited set of variable types. An error is thrown when a type that was assigned to a variable is not explicitly allowed.

It's worth noting that JSDocs and TypeScript work in a similar way. Because we only use it during development to catch errors. A browser or Node.js work with pure JavaScript. Now, let's look at how you can use TypeScript instead of JSDoc.

TypeScript syntax

You should already have an idea of what TypeScript looks like. Let's compare two similar code snippets. In one case we use JSDoc to keep track of types. In the other, we use TypeScript. Let's start with JSDoc.

//@ts-check

/**
 * @param {number[]} arr
 * @returns {number}
 */
function sumOfArray(arr) {
    let sum = 0
    for (let el of arr) {
        sum += el
    }
    return sum
}

The code snippet above explicitly specifies that the type of the arr function argument is an array of numbers. Along with this, it is also clear that the return value is a number data type.

function sumOfArray(arr: number[]): number {
    let sum = 0
    for (let el of arr) {
        sum += el
    }
    return sum
}

In the example above, the code functions in the same way. But it uses TypeScript to do so. Notice that the code looks a lot better and cleaner. Unlike TypeScript code, type parameters in special JSDoc use comments that look cumbersome and unnatural.

It's worth noting that TypeScript and JSDoc help the IDE determine the possible methods for variables. Because while using them, the types are explicitly defined. The development environment also marks methods that do not exist for variables of specific data types.

let word: string = "hello"

console.log(word.toUpperCase()) //HELLO - correct output

let count: number = 50

console.log(count.toUpperCase()) //Property 'toUpperCase' does not exist on type 'number' - error

Even without specifying an explicit count type in the example above, the development environment understands that count is a number and will display a method non-existence error.

Conclusion

You have looked at two ways to make JavaScript code type-safe. JSDoc and TypeScript are different syntactic add-ons for JavaScript that perform similar functions. Moreover, both tools are used during code development. However, only pure JavaScript is launched at runtime. Both these tools help you catch errors during development. Along with this, TypeScript can also help you clean up your code.

Read more on this in Why Bother Learning TypeScript When JavaScript Rules the Scene? on Hyperskill Blog.