How To Get The Most Out Of TypeScript

How To Get The Most Out Of TypeScript

I love TypeScript. I’ve been using it for over 2 years in various projects, and the more I use it the less compelling I find vanilla Javascript.

I love TypeScript. I’ve been using it for over 2 years in various projects, and the more I use it the less compelling I find vanilla Javascript.

Not that there is nothing wrong with vanilla Javascript (my blog is vanilla!), but I think that when it comes to medium to large projects, Typescript makes a lot of things easier.

Among the many good things Typescript offers, I’d like to address one that, in my experience, has saved me quite a few bugs.

Let’s start with an example first.

The code will contain React components, but the general principle stays the same with other frameworks as well.

Let’s say we have a very rudimentary loading indicator in our app:

import React from "react";

type RequestStatus = "PENDING" | "SUCCESSFUL" | "FAILED";

interface RequestLoadingIndicatorProps {
  state: RequestStatus;
}

const styles: Record<RequestStatus, React.CSSProperties> = {
  PENDING: {
    backgroundColor: "blue",
    borderRadius: "50%",
    width: "50px",
    height: "50px",
  },
  FAILED: {
    backgroundColor: "red",
    borderRadius: "50%",
    width: "50px",
    height: "50px",
  },
  SUCCESSFUL: {
    backgroundColor: "green",
    borderRadius: "50%",
    width: "50px",
    height: "50px",
  },
};

export const RequestLoadingIndicator: React.FC<RequestLoadingIndicatorProps> = ({
  state,
}) => {
  return <div style={styles[state]} />;
};

typescript javascript learning-to-code

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Learning to Code: How to Boost Up the Process?

Learning to Code: How to Boost Up the Process? I also often recommend different online and offline resources to my students to make their learning process easier, more effective, and faster. And in this post, I will share a few tips with you.

Learn JavaScript - Full Course for Beginners. DO NOT MISS!!!

In this video tutorial, we'll learn Learn JavaScript - Full Course for Beginners. This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language. DO NOT MISS!!!

Learning JavaScript: Working with Strings

Strings are the second most common data type used in JavaScript, and in many cases, since JavaScript is so widely used for web applications, it is the prominent data type.

Learning JavaScript: Statements, Arithmetic, and Math

In this article I will discuss how to perform arithmetic and more advanced mathematical operations in JavaScript. First, though, I need to discuss how statements are formed and used in JavaScript.

Learning JavaScript: Computing with Object Methods

JavaScript has a set of built-in methods you can use with your user-defined objects. In this article I’m going to discuss several of these methods and how you can use them in your JavaScript programs.