Hello, fellow coders, programmers, web developers, or whatever you prefer calling yourself. If you’ve been working on a website, it’s highly possible that you’ve been writing mainly in JavaScript, especially on the front-end side. If not, you will eventually. JavaScript is unescapable when it comes to the web; even if it’s not your chosen language for writing web applications, you’ll still end up using JavaScript libraries as you progress.

JavaScript has been the go-to programming language for creating interactive and dynamic websites. In fact, it’s one of the main languages of the browser, along with HTML and CSS. But one day, Microsoft introduced TypeScript, promising to solve all the problems with JavaScript, and developers started turning heads towards it. The popularity of this language has been steadily increasing among JavaScript developers, with its community continuing to grow.

A year ago, I myself was convinced to switch because of its promised benefits that plain JavaScript couldn’t provide. And as I use it, it helps me catch errors faster during development and provides better code organization in exchange for writing additional code. Additionally, modern IDEs and frameworks support it well. So, what’s not to love? It has indeed proven itself as a superset of JavaScript. But still, here I am, explaining why I’m switching back to JavaScript. So what happened? Why did I change my mind?

Before answering that, I will first talk about what makes TypeScript great and what convinced me to try it out. And later, I will show you how to acquire those TypeScript’s benefits by just using plain JavaScript, and no, there is no need for a library.

What makes TypeScript great?

const message = (name: string, age: number): string => {
  return `${name} is ${age} ${age === 1 ? 'year' : 'years'} old.`;
}

Static Typing

Having started with C and C++, static typing was convenient for me to use; it makes my code more readable and understandable, making it more self-explanatory. For me, it simply makes my code cleaner.

Enhanced Tooling and IDE Support

Modern IDEs support TypeScript out of the box, improving developers experience and productivity.

Improved Code Maintainability

When working with a team, having static types in your code can be very helpful. By passing your code to someone else to work with, you can confidently ensure that they can understand your code immediately. Types can serve as a guide or what you meant by your code.

With all that said, let’s go back to the question.

Why am I returning to JavaScript?

The more I used TypeScript, the more I started to suspect that these benefit discussions were just marketing schemes. Given the fact that TypeScript was created and distributed by Microsoft, it further supports my suspicion even more. TypeScript was overhyped and overadvertised. It tries to plant this idea subconsciously in web developers that JavaScript is an unstable and unreliable programming language, even though it’s clearly not.

1. Types were never a problem

JavaScript has been around for decades now, and it’s one of the fastest growing programming languages out there — so fast, in fact, that the browser had to rely on BabelJS for it to catch up. With all those years of development, why do you think the developers never bothered to add static types in JavaScript? Because in the first place, dynamic typing was never a problem in JavaScript, it was a feature.

Static types can only be useful in a compiled language because they tell the hardware how much memory and processing power it has to use when that code is built into an executable application. However, in an interpreted language like Javascript, Python, PHP, or Ruby, they were never really needed. The code will run in a controlled environment; in JavaScipt’s case, it’s the browser.

But even so, some compiled languages even added inferred variables to mimic dynamic typing in their language.

Go:

package main

import "fmt"

func main() {
    myvariable := "value"
    fmt.Println(myvariable)
}

C++:

#include <iostream>
using namespace std;

int main() {
    auto myvariable = "value";
    cout << myvariable << endl;
    return 0;
}

Rust:

fn main() {
    let myvariable = "value";  
    println!("{}", myvariable);
} 

They are not dynamic typing because you can’t declare a variable without an initial value. It just tells the compiler that whatever the type of the value assigned to it will determine the type of the variable.

“But TypeScript has inferred variable too, have you heard of ‘any’?”

Using “any” in TypeScript is problematic; first, it defeats the purpose of using TypeScript in the first place. Second, if you have ESLint setup, it will prevent you from using “any,” and you had to add a comment to tell ESLint to allow the next line to have “any” type.

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function myTypeScriptVariable(value: any) {
  console.log(`My TypeScript Variable: ${value}`);
}

It’s the same as this (but cleaner):

function myJavaScriptVariable(value) {
  console.log(`My JavaScript Variable: ${value}`);
}

2. It’s harder to read than JavaScript

TypeScript was supposed to make your code more readable. But this only applies to the basic form of TypeScript; the more complex code you get, especially when generics are involved, things get hard to read.

function reverseArray<ElementType>(array: ElementType[]): ElementType[] {
  return [...array].reverse();
}

Now, compare that to JavaScript version

function reverseArray(array) {
  return [...array].reverse();
}

3. Finding the right type is another problem

There will be a time that you will come across a problem where a certain “type” doesn’t work well with your intended solution. It felt like you’re dealing with a grammar-nazi, in programming. This can lead to frustration and the need to spend extra time debugging and troubleshooting.

4. It’s not JavaScript anymore; it’s C# in JavaScript’s skin.

Writing in TypeScript felt similar to writing in C#. This is because both languages were designed by the same person.

5. TypeScript in JS Frameworks are messy

Only Angular was the framework intended to be used with TypeScript; the others were forced to add support for it because of the hype.

Take a look at this React and TypeScript

import React, { useState } from 'react';

interface CounterProps {
  initialCount: number;
}

const Counter: React.FC<CounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState<number>(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Compare that to React and JavaScript

import React, { useState } from 'react';

const Counter = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

The Solution

We can actually use the discipline of TypeScript in JavaScript by implementing self-discipline. I’m not here to lecture you, but in order to be a better programmer, you have to be mindful of the specific types you are working with and how they interact with your code. Remember, a little extra attention to detail can go a long way toward improving your coding experience.

Name your variables properly

Make string your default type, and for the rest, if the type isn’t obvious in the name, you have to add a specification. Either add prefixes or suffixes to the variable name to help you easily identify types.

The variable name should be self-explanatory.

const name = 'Bruce Wayne';
const isBatman = true;
const isFriendWithGordon = true;

const usersObject = [
  { id: 1, name: 'John Doe', email: 'john@example.com', age: 25 },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 30 },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35 }
];

const colorsList = ['red', 'blue', 'green', 'yellow', 'orange'];
const expirationDate = new Date();
const randomNumberList = [58, 44, 714, 22, 6, 98, 455, 21];
const regexToSearch = /[a-z]+/;

const concatName = (firstname, lastname) => {
  return `${firstname} ${lastname}`;
}

const isEvenNumber = (number) => {
  return number % 2 === 0;
}

const [music, setMusic] = useState('');
const songId = ref(12345);

Will I still use TypeScript?

Yes, but I will treat it as a different language, not a superset of JavaScript.

Thank you for reading. Feel free to disagree with me if you love TypeScript.