TypeScript vs JavaScript: Which One Should You Use With Strapi?

Author: Ubaydah Abdulwasiu

JavaScript is widely known as the programming language of the web. It is used to build full-stack web applications, both client-side and server-side.

In 2012, Microsoft Corporation released another language called TypeScript, which adds static typing to JavaScript. Although it has been used by developers for many years, TypeScript is also becoming popular among developers due to its enhanced features that support building large-level applications.

Strapi is the leading open-source headless CMS. It has majorly supported JavaScript in previous versions, but in v4.3.0, TypeScript support was announced.

In this article, we will explore JavaScript and TypeScript, the differences between them, and the pros and cons of using them with Strapi.

What is JavaScript?

JavaScript is a dynamic scripting programming language also known as the language of the web. It is mainly used to develop the client and server-side of web applications. It adds interactivity, timely content display, image animations, etc, to web pages. Its uses have evolved over the years with different frameworks invented, and it is also used for mobile apps and games development.

What is TypeScript?

Due to some of the limitations of JavaScript over the years, such as building high-level applications, Microsoft developed TypeScript in 2012. TypeScript is an enhanced version of JavaScript that adds static typing to it; it is a superset of JavaScript and supports most of its libraries. It doesn’t run in a browser; hence, its codes is compiled into JS.

TypeScript vs JavaScript

JavaScript and TypeScript have some similarities and differences, depending on their use cases. While JavaScript is used to build dynamic and interactive web pages, TypeScript was introduced to overcome the complexity that comes with building large and medium-sized applications.

Below are some of the main differences between them:

Now, let’s see some of the difference by writing a simple function in both languages:

    let a = 10;
    let b = 5;
    function addNum(a, b) {
        return a + b
    }
    console.log(addNum(a, b))

    //output: 15

In the code above, I created a function addNum in JavaScript to add two numbers. Let’s replicate this in TypeScript.

    let a: number = 10;
    let b: number = 5;

    function addNum(a:number, b:number): number {
        return a + b
    }
    console.log(addNum(a, b))

    //output: 15

In the TypeScript code, I had to declare the types of each variable and also the types of the function parameters and its return value. In my JavaScript code, I can decide to reassign the variable a into another data type maybe string. For TypeScript , I can’t reassign directly to another type of data except with TypeScript assertion.

What is Strapi?

Strapi is an open source content management system that enables the development of websites, mobile applications, e-commerce sites, and APIs-REST and Graphql without knowing anything about the backend or database.

It is developer-friendly, simple, and easy to use. It supports both JavaScript and TypeScript. Strapi also supports JavaScript and TypeScript frameworks like React, Angular, Svelte, Vue.js, etc.

Pros and Cons of Using Strapi with JavaScript

Strapi was fully developed in JavaScript; hence, it has great support for it and its frameworks. It is used in building data models and generating CRUD APIs for JavaScript web and mobile apps.

Here are some of the advantages and disadvantages of using JavaScript with Strapi:

Advantages

1. Speed: JavaScript is a fast language that doesn’t need to be compiled, which makes development and debugging faster. Using it with Strapi for the client side of applications makes it easy to develop applications faster.

2. Frameworks Support: Strapi supports almost all JavaScript frameworks like React.js, Next.js , Vuej.s, Nuxt.js, etc. It makes it easy to easily Bootstrap your application with any framework of your choice without a need to worry about the backend.

3. Rich Interfaces: JavaScript provides an eye-catching appearance and rich interfaces for users to interact and engage. While Strapi gives you out-of-the-box documented REST and Graphql APIs, you can easily create rich client-side interfaces to integrate the APIs.

4. Popularity: JavaScript is popularly known and has a large community of developers. It makes it easy to get started with building with Strapi because of the tons of resources available online.

Disadvantages

1. Security: JavaScript mainly runs on the browser, which makes it accessible to anyone. The security of those codes is at stake and it can be exploited for malicious purposes.

2. Inconsistency in the browser: JavaScript code is interpreted differently on different browsers and this can lead to the users having inconsistent experience from the Strapi server.

3. Render Issue: JavaScript is a sensitive language, which means any small error in the code can crash the entire webpage and not render it at all.

Pros and cons of using Strapi with TypeScript

Strapi added TypeScript support for new projects on v4.3.0 and above. It makes it easy for developers to add TypeScript typings to JavaScript code. Old and existing JavaScript projects in Strapi can also use TypeScript through the conversion procedure.

Let's look at some of the advantages and disadvantages of using Strapi with TypeScript

Advantages

1. Static Typing: Unlike JavaScript, which is dynamically typed, using TypeScript with Strapi makes it easy to add types to declared variables. Static typing means a variable cannot be changed or given certain values once declared. For example, a variable declared as an integer cannot be used as a string or assigned to another data type. It results in fewer error codes in production and reduces type-related mistakes.

2. Data Binding: TypeScript makes it easy to know the data type and what form a component should expect. It makes it easy to define interactive applications and eases communication between the TypeScript code and the template that the user sees.

3. Enhanced Features: TypeScript has more features like interfaces, OOP, classes, etc. It makes it beneficial for large-scale projects and gives better app development. It also has rich IDE support with autocomplete and code-navigation features. Also, since TypeScript is a superset of JavaScript, every new JavaScript feature becomes its feature.

Disadvantages

1. Compilation Issue: TypeScript requires compilation each time to run properly, which can take a long time leading to a slower development process. Also, it can’t run on the browser directly; hence, it needs to be compiled into JavaScript before executing it in the browser.

2. Complicated Typing System: To use TypeScript effectively with Strapi, developers need to define types everywhere, which might become cumbersome for someone coming from a background in a dynamic language like JavaScript.

Conclusion

While JavaScript is still widely used in the developer's community, TypeScript is preferable for medium and large-sized projects due to its significant benefits. In this article, we have explored what TypeScript and JavaScript are, their main differences, and the pros and cons of using each with Strapi.