DEV Community: Kento Honda

What is "User-Defined Type Guard" in TypeScript?

Kento Honda — Wed, 08 May 2024 02:17:24 +0000

Intro

Currently, I'm using Next.js with TypeScript on a project that I've worked on in my workplace. One day, my senior front-end developer in my team reviewed my pull request and suggested that it'd be better to utilize User-Defined Type Guard than to use type assertion to make the type guard more secure.

When I received this feedback, I was trying to remember what User-Defined Type Guard was in TypeScript. At the time, I successfully managed to fix my pull request by replacing type assertion with User-Defined Type Guard. Then, I decided to write an article illustrating the meaning of User-Defined Type Guard in detail.

So now is the time to look into what exactly User-Defined Type Guard is and how we should use it properly.

What is "User-Defined Type Guard" all about?

"User-Defined Type Guard" is a TypeScript's special syntax for functions returning a boolean, and they also include the indication of whether an argument has a particular type or not. It is useful when developers would like to implement different codes based on the type of the argument of functions.

Here is a simple code snippet of using User-Defined Type Guard. I'll explain it in detail.

// Function returning boolean to judge if the typeof argument is string or number
function isNumberOrString(value:unknown): value is string | number {
    return !!['number','string'].includes(typeof value);
}

function logStringOrNumber (value:number | string | null | undefined) {
    if(isNumberOrString(value)) {
        console.log(value)
        // typeof value: string | number
        return value.toString();
    } else {
        // typeof value: null | undefined
        return 'The value is neither string nor number'
    }
}

In this code snippet, there are two functions; isNumberOrString and logStringOrNumber. logStringOrNumber returns the string value of its parameter only if typeof value (this function's parameter) is string or number, but the type of parameter contains any possibilities (null, undefined, and so on) in addition to string or number.

To narrow down the value type, isNumberOrString is executed to make sure it is string, number, or others.

The return type of isNumberOrString is defined as value is string | number by using is keyword. This return type tells TypeScript that if value is number | string is true, blocks of code inside logStringOrNumber function must have a value of type number | string. At the same time, if value is number | string is false, they must have a value of null | undefined.

So that means if I remove value is string | number return type from isNumberOrString, the type error would appear on the code line return value.toString(); like below.

// User-Defined Type Guard
function isNumberOrString(value:unknown) {
    return !!['number','string'].includes(typeof value);
}

function logStringOrNumber (value:number | string | null | undefined) {
    if(isNumberOrString(value)) {
        console.log(value)
        // Error: 'value' is possibly 'null' or 'undefined'.
        return value.toString();
    } else {
        return 'The value is neither string nor number'
    }
}

That is because without return type using is keyword, isNumberOrString function just returns the boolean and does not narrow down the type of value (parameter of isNumberOrString).

Another Example of "User-Defined Type Guard"

export type Colors = "RED" | "GREEN" | "GOLD" | "BLUE" | "PURPLE";

const COLORS_ARRAY = ["RED", "GREEN", "GOLD", "BLUE", "PURPLE"];

const COLOR_ICON_PATH_MAP: Record<Colors, string> = {
  RED: "/assets/images/red-color-icon.png",
  GREEN: "/assets/images/green-color-icon.png",
  GOLD: "/assets/images/gold-color-icon.png",
  BLUE: "/assets/images/blue-color--icon.png",
  PURPLE: "/assets/images/purple-color-icon.png",
};

// User-Defined Type Guard: Function returning boolean to judge if the typeof argument (colorName) has a corresponding color name in `Colors`type.
const isColorIconName = (colorName: string): colorName is Colors => {
  return !!COLORS_ARRAY.includes(colorName);
};

const ColorIcon = ({ colorName }: { colorName: string }) => {
  // This constant variable has the image path of color icon
  const colorIconPath = isColorIconName(colorName)
    ? COLOR_ICON_PATH_MAP[colorName]
    : "/assets/images/plain-color-icon.png";

  return (
    <Image
      src={colorIconPath}
      alt="color-icon"
      width={24}
      height={24}
    />
  );
};

const UserPageSection:FC = ({ userId }: { userId: string }) => {
  // Obtain user color from API
  const userColor:string = getUserColor(userId);

  return (
    <div>
      <h2>User Page</h2>
      <div>
        <ColorIcon colorName={userColor} />
      </div>
    </div>
  );
}

Let's say each user in a Next.js application has a different color icon on their user page. UserPageSection component has ColorIcon component that displays the image of colorIcon with Image component from next/image.

To display corresponding color icon based on the current user, ColorIcon component has a constant variable whose name is colorIconPath that contains the image path of the color icon. But the type of argument colorName in ColorIcon is string, not Color because the parameter of it is obtained from the API call in the parent component (UserPageSection).

So it is necessary to ensure if colorName is included in Colors type or not in order to return the correct color icon path. If colorName is RED, isColorIconName returns true, and colorIconPath gets the image path as /assets/images/red-color-icon.png from the result of COLOR_ICON_PATH_MAP[colorName].

That is because RED is certainly one of the elements of Colors type. If the parameter of colorName is BLACK, colorIconPath will get /assets/images/plain-color-icon.png because isColorIconName function returns false.

Use Case with plain JavaScript Objects

User-Defined Type Guard also has advantages for plain JavaScript Objects. What exactly does it mean?

Let's say there are two types defined with JavaScript Object and a function with an argument whose type is one of these two types. If you want to identify the type of argument in this function, you can also take advantage of the User-Defined Type Guard like the code sample below;

type Cat = {
    name: string;
    age: number;
    run:() => void;
}

type Bird = {
    name: string;
    age: number;
    fly:() => void;
}

// User-Defined Type Guard
function isCat(arg: any): arg is Cat {
    return !!('run' in arg);
}

function checkAnimal(animal:Cat | Bird) {
    if(isCat(animal)) {
        // Type of animal: Cat
        animal.run() // Ok
    } else {
        // Type of animal: Bird
        animal.fly() // Ok
    }
}

const cat:Cat = {
    name:'Test cat',
    age:3,
    run:() => console.log('Test cat is running!')
}

// The results of log: "Test cat is running!"
checkAnimal(cat);

Throughout the code snippet above, isCat function has the roll as User-Defined Type Guard so that checkAnimal function has no type errors because of the correct type checking.

In this case, it is unable to use typeof operator like typeof animal === Cat instead of the condition isCat(animal) in checkAnimal function because typeof operator only interprets the type of animal argument as object. So there is no meaning of doing type check with typeof here.

(The code typeof animal === Cat also returns an error from TypeScript)

Point of Caution

Although User-Defined Type Guard is a powerful tool for developers, there is a precaution about its usage. When User-Defined Type Guard function returns true, that also means you'll have some risks of getting type error in the false cases.

// User-Defined Type Guard
function isValueGreaterThan10(val: any): val is number {
    return !!(val > 10)
}

function checkValueNumber(num: number | null) {
    if(isValueGreaterThan10(num)) {
        console.log('The num is greater than 10')
        // Type of num: number
        return num.toString() // Ok
    } else {
        console.log('The num is less than 10 or null')
        // Type of num: null
        return num?.toString() // Error: Property 'toString' does not exist on type 'never'.
    }
}

The error above on num?.toString() implies the fact that if the num is less than 9, isValueGreaterThan10 returns false and then the type of num is recognized as null. Therefore TypeScript cries with the code line num?.toString().

We should carefully use User-Defined Type Guard not to cause unexpected type errors like in this case. It could be better to avoid introducing User-Defined Type Guard when it is unnecessary.

Conclution

Through writing this article, I could interpret the concept of User-Defined Type Guard more clearly. User-Defined Type Guard enables us to secure type guard if we utilize it correctly. But at the same time, there is a scenario defining the wrong User-Defined Type Guard, and it will result in implementing codes wrongly. I hope this article is helpful for TypeScript learners well!

References

Constrained Generic Types in TypeScript

Kento Honda — Sat, 17 Jun 2023 20:33:57 +0000

Intro

It has been a while since I wrote an article regarding the basic concepts of TypeScript because I have started a new job working as a Front-End Developer for a startup company.

Then finally, I could read through the chapter of learningTypeScript talking about generic types, which are one of the most important features of TypeScript. To get a deeper understanding of generic types, I repeatedly read sections written about the fundamentals of generic types.

Also, I could notice and learn informative and useful tips on generic types, especially constrained generic types.

Having a correct understanding of generic types would allow us to level up as TypeScript learners and expand the usage of TypeScript in more complex type definitions such as in professional environments.

So this time, I only focus on covering constrained generic types but reviewing all aspects of generic types in TypeScript is pretty worth it for improving our TypeScript skills.

Now let's dive into the topic!

To begin with, what are generic types all about?

To put generic types in a word, that is "type parameter".

So what does type parameter stand for? Type parameter

// In general, we can set type parameter as T
function printValue<T>(value:T) {
  console.log(typeof value)
  return value
}

printValue(123) // Output of console.log: number
printValue('Sample') // Output of console.log: string
printValue(false) // Output of console.log: boolean

As you can see in the code snippet above, generic types are useful when it is uncertain that we could not identify the type value of parameters such as those for functions.

Thanks to generic types, we could pass different type values but still, the type safety is secured. However, the basic usage of generic types like the code sample above is not perfect to handle more complex type definitions.

Accepting any type value as a type parameter includes the possibility of getting type errors based on actual arguments you pass and the pitfall that type checking implemented by TypeScript does not work properly.

Then, constrained generic types play their roles in complementing this shortcoming of generic types. Let's see how constrained generic types work in the next section.

Constrained generic types

TypeScript gives us the option to handle the cases such as some functions only working with a specific, limited set of types.

For example, TypeScript complains about the type error because of passing a non-specified type value as the type parameter in the code snippet below.

function printArrayLength<T>(array: T){
    return array.length // error: Property 'length' does not exist on type 'T'.
}

So in this case, the printArrayLength function expects to receive any kind of array and then, return the length of the array passed as the parameter.

But since generic type T accepts any type values which are not limited to the array, a type error appears (some arguments whose types are number, boolean, and so on don't have length property in it.

So, in order to fix the problem, we can limit the assignable values to generic type by using extend keyword together.

function printArrayLength<T extends U[],U>(array: T){
    return array.length
}
console.log(printArrayLength(['a','b','c'])) // OK, Output: 3
console.log(printArrayLength([1,2,3,4,5])) // OK, Output: 5

As you can see in the code sample above, we don't have error anymore. Thanks to the power of constrained generic type, we could successfully set the limitation for generic type T (Now we cannot pass any type values except for array).

In this case, I use two generic types as T and U. We can define generic types whatever we want, but it is common that we should avoid using more than three generic types at the same time.

T extends U[] means that I specify the type value of T as U[], and now it is possible to pass any type of array (such as an array with string, number, boolean, and so on) because the generic type U accept any possible types.

Another useful case of Constrained generic types

Constrained generic types are helpful to prevent from having the situation that TypeScript didn't implement type checking properly.

Let me get this straight now. In the code below, TypeScript doesn't show any errors, but still, arguments passed to the function and its return value are not exactly the same as we expect.

function combineTwoObj<T,U>(firstObj:T,secondObj:U) {
    return {
        ...firstObj,
        ...secondObj
    }
}
console.log(combineTwoObj({name:'Tom',age:22},10)) 
// Output: { "name": "Tom", "age": 22} But this output is not an expected one.

In this scenario, what we would like to implement with the combineTwoObj function is to combine two objects passed as parameters and return a new object containing all key-value pairs of them.

However, it also works when not passing exactly two objects (one of them is just a number in this case). So this means limiting the type of generic type is needed to get the ideal result of combineTwoObj function.

What we can do to achieve that goal is to add extends keyword after T and U.

function combineTwoObj<T extends object,U extends object>(firstObj:T,secondObj:U) {
    return {
        ...firstObj,
        ...secondObj
    }
}
console.log(combineTwoObj({name:'Tom',age:22},10))  // Argument of type 'number' is not assignable to parameter of type 'object'.
console.log(combineTwoObj({name:'Tom',age:22},{hobby: 'running', isAdult: true})) // Ok, Output: { "name": "Tom","age": 22,"hobby": "running","isAdult": true }

In addition, utilizing keyof operator with generic types is also useful when it is necessary to get the value of object with the type-safe.

function printObjValue<T,U extends keyof T>(obj:T,key:U) {
    return obj[key]
}
console.log(printObjValue({name:'Tom',age:22},"name")) // Ok, Output: "Tom"
console.log(printObjValue({name:'Tom',age:22},"height")) // Error: Argument of type '"height"' is not assignable to parameter of type '"name" | "age"'.

In this code snippet above, generic type U is specified as the type keyof T. Because of this type of specification, we can safely apply key value to the object.

If you are not familiar with keyof operator in TypeScript, you can refer to this link to the official document of TypeScript demonstrating about keyof operator.

Keyof Type Operator

Conclusion

Throughout this article, I could realize that taking advantage of generic constraints significantly improves the quality of type safety in TypeScript.

Understanding generic types in TypeScript seems to be one of the challenging parts for TypeScript learners looking to advance to the next level. I am also still on the process of mastering generic types in TypeScript, so let's keep learning TypeScript together to get a comprehensive understanding of it!

References

3 principles of OOP in JavaScript

Kento Honda — Wed, 12 Apr 2023 00:21:26 +0000

Intro

As I always mention, I am reading a great book for TypeScript learners, learning TypeScript, for the sake of my goal of polishing the skills of TypeScript as a well-rounded Front-End Developer.

Last week, I have covered the chapter of Class in this book. It contained more than 30 pages and also I was required properly understand the concepts of class in JavaScript.

Since I have almost forgotten everything regarding the principles of JavaScript class in my mind, I have decided to relearn its basic concepts of it. In doing so, I have noticed that interpreting OOP (Object-Oriented Programming) correctly is essential as the first thing to do.

Then, in this article, I am going to dive into 3 must-know principles of OOP with simple words and JavaScript code samples so everyone can understand easily. So let's get into it!

What is OOP in simple words?

First of all, OOP stands for "Object-Oriented Programming". OOP is the idea of using "Objects" to represent and interact with data.

When managing data in OOP, we can utilize objects that are the instances of "Class", meaning blueprints for creating objects and containing properties and methods in it.

Class objects are reusable, able to inherit both properties and methods and allowed to keep the same methods but execute them differently by following the idea of Polymorphism.

Making use of class in OOP optimizes code structures that result in improving the modularity and readability of codes.

In order to understand the logic of OOP more, let's move on to the main topic of this article; 3 principles of OOP - Encapsulation, Inheritance, and Polymorphism!

1. Encapsulation

Encapsulation stands for creating a capsule that holds properties and methods inside to protect them from unexpected accesses from outside of it.

Encapsulation allows us to make code structures simple and easy to maintain to keep good maintainability of them.

It also enables us to implement codes without exposing them outside of classes, which results in preventing bugs and errors.

Here is a simple code sample describing Encapsulation.

// Declare a class whose name is Fruit
class Fruit {
  name: string;
  color: string;

  // Initialize properties of Fruit class
  constructor(name:　string,　color:　string) {
    this.name = name;
    this.color = color
  }

  // Declare a describeFruit method
  describeFruit() {
    console.log(`The color of ${this.name} is ${this.color}.`);
  }
}

const apple = new Fruit("Apple","red")

// We can access and implement properties and methods capsuled in Fruit class
console.log(apple.color) // Output: "red"
apple.describeFruit() // Output: "The color of Apple is red."

// When trying to access non-existing instances, TypeScript complains that and gives us an error 
console.log(apple.size) // Error: Property 'size' does not exist on type 'Fruit'.

2. Inheritance

Inheritance in OOP means the process of creating new classes that inherit one or more than one properties and methods from existing classes.

Inheritance contributes to reducing code lines because we do not have to write duplicated code every time a new value that inherits a parent class at all.

Here is a code snippet for the explanation of Inheritance.

// Declare Parent class
class Parent {
    firstName: string;
    lastName: string;
    age: number;

    constructor(firstName:　string,　lastName:　string,　age:　number) {
        this.firstName = firstName
        this.lastName = lastName
        this.age = age
    }
    greeting() {
        console.log(`Hi, my name is ${this.firstName} ${this.lastName}, and I'm ${this.age} years old!`)
    }
}

// Define Child class that inherits Parent class
class Child extends Parent {
    // Type definition for the property that does not exist in Parent class
    isAbleToDrink: boolean

  constructor(firstName:　string,　lastName:　string,　age:　number,　isAbleToDrink:　boolean) {
        // super is a special keyword referring to instances that extended class has
        super(firstName,　lastName,　age);
        this.isAbleToDrink = isAbleToDrink;
    }
    buyBeverage() {
        console.log(this.isAbleToDrink ? `${this.firstName} can buy a Coke` : `${this.firstName} can a glass of beer`)
    }
}

const dad = new Parent("Mike", "Trout",32)
console.log(dad.age) // Output: 32
dad.greeting() // Output: "Hi, my name is Mike Trout, and I'm 32 years old!"

const son = new Child('John', 'Trout',12, false);
console.log(son.isAbleToDrink) // Output: false

// Thanks to inheritance, we can access the method that is defined in Parent class
son.greeting() // Output: "Hi, my name is John Trout, and I'm 12 years old!"
son.buyBeverage() // Output: "John can buy a Coke"

3. Polymorphism

Polymorphism is the feature allowing objects to take multiple different forms respectively.

In other words, child classes that inherit methods from parent classes still can implement them with the same names but differently.

This principle allows us to have some flexibility in child classes especially the results of methods are depending on codes written in them respectively.

This code example below illustrates the concept of Polymorphism in saySomthing method.

// Declare Animal class as the parent class
class Animal {
  nickname:string;

  constructor(nickname:string) {
    this.nickname = nickname;
  }

  saySomething() {
    console.log(`${this.nickname} says something.`);
  }
}

// Each sub class (Dog, Cat, and Cow) has same method (saySomething) as Animal class has but outputs from it are different respectively
class Dog extends Animal {
  saySomething() {
    console.log(`${this.nickname} barks.`);
  }
}

class Cat extends Animal {
  saySomething() {
    console.log(`${this.nickname} meows.`);
  }
}

class Cow extends Animal {
  saySomething() {
    console.log(`${this.nickname} moos.`);
  }
}

new Dog("Zoy").saySomething() // Output: "Zoy barks."
new Cat("Mike").saySomething() // Output: "Mike meows."
new Cow("John").saySomething() // Output: "John moos."

Conclusion

3 concepts of OOP (Encapsulation, Inheritance, and Polymorphism) are definitely vital for improving your understanding of class in JavaScript (as well as other Object-Oriented Programming languages) and for empowering the performances of your code by applying JavaScript classes.

Actually, I am still not 100% comfortable with using class in JavaScript for my real projects.

Thus, the next step for me is to introduce class to one of my personal projects with TypeScript to understand it more, including a better understanding of 3 principles of OOP.

References

Index signature in TypeScript

Kento Honda — Fri, 24 Mar 2023 21:06:03 +0000

Intro

Last week, while reading Chapter 7. in Learning TypeScript, I could meet another unfamiliar topic in TypeScript for me - "Index signature".

Then, I realized that this concept might be useful when we declare Type aliases or Interfaces as objects with key-value pairs that are not 100% sure ahead of time.

However, generally speaking, we should avoid using index signatures as much as possible because of the insecure safety of value types for key values (I will talk about that later in this article).

So let's dive into this topic.

What is Index Signature?

Index signature is a special syntax to enable us to assign uncertain key values to object type definitions.

Basically, when we declare Type aliases or Interfaces as objects to apply specified type values to variables, filling out all names of keys and those of value are required to make Type guard in TypeScript work correctly.

Thanks to type definitions following this way, we can prevent referring to wrong values in objects beforehand because TypeScript tells us incorrect value references. Here is a code snippet describing a normal object without index signatures.

// Declare an interface 
interface Animal {
    species: string;
    name: string;
    age: number;
}

// Apply this interface to a new constant variable with an object
const animalObject: Animal = {
    species: "dog",
    name: "John",
    age:3,
}

console.log(animalObject.name); // Output: "John" 
console.log(animalObject.age); // Output: 3
console.log(animalObject.weight) // Error: Property 'weight' does not exist on type 'Animal'.

But what about this situation? Let's say now I need to memorize all items to buy in the grocery shopping.

I have come up with an idea for storing all shopping items in an object with multiple key-value pairs. Each key represents the genre of items, and its corresponding value is an array that includes the names of items.

However, sometimes it may be necessary to purchase something that was not planned in advance. In such cases, I cannot write down everything I need to buy before going grocery shopping.

But, by taking the power of index signatures, I can create a code sample like this;

// Declare key-value pair with index signature (key name with its type value and wrapping it by the square bracket
interface ItemList {
    [gerne: string]: string[]
}

// key values (genre) could be anything unless they are string
// In this case all keys (fruits, vegetables, and meat) are ok as they are all string values.
const shoppingList: ItemList = {
    fruits: ['apple', 'banana', 'orange'],
    vegetables: ['onion', 'potato'],
    meat:['beef', 'pork'],
}

As you can see, the index signature (in this case, [genre: string]) allows any string key even if it is uncertain about the name of the keys unless their value type is string.

Meanwhile, the code snippet implies the code smell in TypeScript and does not secure the safe type guard. So let's move on to the next topic about type safety in index signatures.

Type Safety of Index signature

Although index signatures sound useful when we assign values to an object, we should keep in mind there is no guarantee for type-safe.

In the code sample below, TypeScript does not detect the type error ahead of runtime so we can even access non-exist values by referring to keys defined by index signatures.

interface Song {
    [title: string]:{year: number, groupName: string}
}

const myBestSong: Song = {
    usAndThem:{year: 1972, groupName: 'Pink Floyd'}
}
myBestSong.year // Type: number
// It is obvious to us that title key does not have the salesRecord value in it (That should be undefined)
myBestSong.salesRecord.toString() // But still no error until the runtime.
console.log(myBestSong.salesRecord.toString()) // Runtime Error: Cannot read properties of undefined (reading 'toString')

This example represents the insecure type safety when using index signatures. For the sake of stronger type guards in TypeScript, we should refrain from utilizing index signatures as much as possible.

An alternative way of index signatures is to make use of Map method.

// Declare a new Map with type
const mapFoo: Map<string,{year: number, groupName: string}> = new Map();

// Add an entry to mapFoo
mapFoo.set('usAndThem', {year: 1972, groupName: 'Pink Floyd'})

// Access to the entry that I added above
// The get method in the Map method returns type with | undefined so we could notice beforehand when we try to access non-exist key values.
mapFoo.get('usAndThem')  // Type: (method) Map<string, { year: number; groupName: string; }>.get(key: string): {year: number; groupName: string;} | undefined

mapFoo.get('usAndThem')?.year // Ok
mapFoo.get('usAndThem')?.salesRecord // Error: Property 'salesRecord' does not exist on type '{ year: number; groupName: string; }'

Now we could prevent accessing a key that does not exist in an object. That provides us safer type guards in TypeScript.

Conclusion

An index signature stands for a way to define the shape of fields such as objects if the values of keys in objects are uncertain ahead of time.

A possible case for using index signatures is when we fetch data from API with objects which are not sure about their contents of them beforehand.

At the same time, since index signatures are flexible, meaning any names of values are assignable for keys in objects unless value types are matched. So avoiding the use of index signatures in TypeScript as much as we can is desirable to pursue stronger type protections.

References

What is Tuple in TypeScript

Kento Honda — Wed, 15 Mar 2023 18:13:13 +0000

Intro

As I have mentioned multiple times in my previous articles that I have been learning TypeScript with the great book, "Learning TypeScript".

And during my journey to review and learn TypeScript, I could meet an unfamiliar topic in TypeScript; Tuple. With the motivation to understand unknown things more clearly, I determined to write a new article about the fundamentals of Tuple.

What is Tuple all about?

Tuple is a special method in TypeScript to specify the pre-defined lengths of arrays as well as the type of each element in arrays. All values in arrays with Tuple type are assigned value type based on the index of Tuple arrays.

For example, in the code snippet below, personNameAndAge variable has an array with two values that have designated types based on the index number of that array respectively.

That means it is mandatory for us to pass exactly two elements to personNameAndAge variable. Otherwise, TypeScript will complain about wrong number of values in fixed length of array (Array with Tuple type).

// Declare a variable with Tuple type
// personNameAndAge must have two values; 
// The first one (index 0) is string type and the second one (index 1) is number type
let personNameAndAge:[string, number]

personNameAndAge = ["Jason Adam", 33]  // Ok
personNameAndAge = ["Mark DeRosa"]  // Error: Type '[string]' is not assignable to type '[string, number]'. Source has 1 element(s) but target requires 2.
personNameAndAge = ["Lance Lynn", 20, "male"]  // Error: Type '[string, number, string]' is not assignable to type '[string, number]'. Source has 3 element(s) but target allows only 2.

We can also use Tuple type for the parameters of functions. Here is a simple code snippet describing it.

// Declare a function returning three animal names
// The parameter of this function (animals) has fixed lengths (3)
function getThreeAnimals(animals: [string, string, string]): string {
  return `1: ${animals[0]}, 2: ${animals[1]}, 3: ${animals[2]}`;
}

const printedThreeAnimals = getThreeAnimals(['cat', 'dog', 'seal'])
console.log(printedThreeAnimals);  // Output: "1: cat, 2: dog, 3: seal"

Assignability of Tuple

In addition to checking the fixed lengths of values in an array, Tuple type in TypeScript identifies type assignability and complains about it when a different value type is assigned to one of the elements or more in an array.

let personNameAndAge:[string,number]
personNameAndAge = ["David Bednar", false]  // Error: Type 'boolean' is not assignable to type 'number'.

We have another case regarding the assignability of Tuple for variables. It could be confused when we use both an array with multiple value types and that with Tuple.

Since Tuple type narrows down the possibility of values in an array compared to a general array without Tuple, we cannot assign a variable defined as a regular array to another one declared with Tuple type.

In other words, in terms of regular arrays, it is possible to have the number of elements in them whatever we want, while arrays with Tuple type are allowed to possess the exact number of elements that equals to the length of Tuple type.

// Tuple is more specific than a regular array (It is impossible to assign Tuple type to a variable length array)
// In this case, personNameWithAge is recognized as a general array so TypeScript complains about the assignability
const personNameWithAge = ['Nick Martinez',40]
const newPersonNameWithAge:[string, number] = personNameWithAge  // Error: Type '(string | number)[]' is not assignable to type '[string, number]'. Target requires 2 element(s) but source may have fewer.

// anotherPersonNameWithAge variable with Tuple has a fixed length of array (It is more specific than a variable length array)
const anotherPersonNameWithAge:[string, number] = ['Nick Martinez',40]
const anotherNewPersonNameWithAge:[string, number] = anotherPersonNameWithAge  // Ok

Read-only Tuple

Tuple type is beneficial for inferring an array literal as the read-only values. Generally, we can use “a const assertion” syntax replaced after declared variables to imply that they have the "readonly" prefix.

This "readonly" keyword in TypeScript infers us that variables with it are accessible but cannot be mutated at all.

// Declare a general variable length array 
const generalArray = ['a','b',1,2]  // Type: (string | number)[]
// We can change the value of elements in this array
generalArray[1] = 'c';
console.log(generalArray);  // Output: ['a','c',1,2] 

// Define an array with a constant assertion (assigning Tuple type)
const readonlyArray = ['a','b',1,2] as const  // Type: readonly ['a', 'b', 1, 2]
readonlyArray[3] = 5  // Error: Cannot assign to '3' because it is a read-only property.

Conclusion

Tuple type in TypeScript is a method to pre-define fixed lengths of arrays. It also strictly specifies the order of type values in an array by index number. (Tuple type makes sure that every value in an array has a corresponding value type in Tuple)

A useful case for Tuple is to create an array of a read-only, unchangeable variable. With the constant assertion (as constant) to regular arrays, we can restrict mutations to them (we can only refer to values in arrays).

References

Void and Never in TypeScript

Kento Honda — Fri, 10 Mar 2023 18:46:31 +0000

Intro

Currently, I am learning TypeScript by reading the book, "Learning TypeScript" (written by Josh Goldberg), to comprehend TypeScript and to gain in-depth knowledge for it.

In Chapter 5 of this book, I reviewed how void and never types work in TypeScript function types and how they are properly distinguished from each other.

Many beginners learning TypeScript may not have a solid understanding of these two return types: void and never. Therefore, I have summarized the fundamental concepts of these types briefly in this article.

Before diving into main topic...

In TypeScript, we can declare types of functions to them as same as type annotations to variables. They are called Function types and include the types of their arguments and those of their return value.

Function types are generally defined as callback functions. Here is a code snippet showing an example of Function type.

// Declare a Function type with two parameters having number type, and a returned value having number type as well 
type SumOfTwoNumbers = (num1:number,num2:number) => number

Because of the declaration of Function type (in this case, twoSumOfNumbers type), we could easily interpret what types of value should we pass to the function with twoSumOfNumbers type. We could also guess what type of value will be returned from that function.

When it comes to void and never, they have been recognized the part of Return types in Function types and are necessary in some cases of them for the sake of explicit return types.

So now, let's get started.

Void type

Void type (void return) stands for the absence of return value in a function. In other words, functions with void type as Return type imply that they have no value to return.

That also means void type ignores any returned value from a function.

// Declare a Function type with void
let printString: (str:string) => void;

// This function returns nothing
printString = (str) => {
  console.log(str)
}
printString("Return string")  // Output: "Return string"

Difference between void and undefined

When talking about void type, it is unavoidable to see the difference between void and undefined in terms of return types. That is because both of them seem to be working the same, but technically not.

// a function with void return type
function sampleFuncWithVoid(str:string): void {
  return; // OK
}

// a function with void return type and return string type
function sampleFuncWithVoidAndReturnVal(str:string): void {
  return str;   // Error: Type '"Return something"' is not assignable to type 'void'
}

// a function with undefined return type
function sampleFuncWithUndefined(): undefined {
  return;   // OK
}

// a function with undefined return type and return string type
function sampleFuncWithUndefinedAndReturnVal(str:string): undefined {
  return str;    // Error: Type '"Return something"' is not assignable to type 'undefined'
}

As you can see from the codes above, the way to work for void type and undefined type looks the same.

But the truth is that void ignores the return value coming from the callback function, while undefined is literally one of the return types in the function.

// Declare a variable with a function type returning undefined
let createAnimalArr:(arr:string[]) => undefined;

/* Error: Type '(arr: string[]) => number' is not assignable to type '(arr: string[]) => undefined'. */
createAnimalArr = (arr:string[]) => {
   // unshift method in JavaScript returns the value with number type
   return arr.unshift('Seal')
}

Let's replace undefined type to void type and see how it goes. I use the same function above and turn out to work fine. That is either because void type does not use any returned value at all or because it allows having any type values to return values from functions (finally they are all ignored).

// Declare a variable with a function type having void return
let createAnimalArr:(arr:string[]) => void;

// Ok: void type ignore returned value (number)
createAnimalArr = (arr:string[]) => {
   return arr.unshift('Seal')
}

// Ok: number value is allowed in createAnimalArr but is ignored in the end
createAnimalArr = (arr:string[]) => {
   arr.unshift('Seal')
}

Never type

Never type (never return) refers to the type indicating that as the name suggests, functions with never type as Return type never return value. (e.g. a function throws an exception, or that enters an infinite loop)

// Declare a Function type with never
type NeverFunc = (str:string) => never;

// A function that throws error so return type should be never
function neverPrint(str:NeverFunc) => {
  throw new Error(`Never returns ${str}`)
}

In general, Never type is not used in professional TypeScript settings. So we do not have to care about it too much, but it is worth it to comprehend the correct meaning of Never return.

Conclusion

In summary, void type is utilized for functions that do not return a value because void ignores any returned values at all, while functions that never complete normally or for values that can never exist use never type.

Writing this article allowed me to dive deeper into the concepts of TypeScript's return types in functions. However, I found it challenging to interpret the precise differences between void and undefined as return types.

Moving forward, I plan to experiment with more possible use cases for void and never types to become more comfortable using them.

References

Usage of useMemo hook in React

Kento Honda — Thu, 09 Mar 2023 00:59:01 +0000

Intro

Throughout my experience working on various projects at my current company, I have gained a wealth of knowledge about React.js, which is undoubtedly one of the most popular JavaScript frameworks used for front-end development nowadays.

Many programming learners, like myself, have already delved into learning React.js, especially those aspiring to become front-end developers.

However, I have noticed that the useMemo hook is not always utilized as much as the useState or useEffect hooks in web development, although it does depend on the specific project requirements.

Therefore, I have decided to write an article introducing the basic usage of the useMemo hook, a built-in React hook, for those who may not be familiar with it.

What is useMemo hook in React.js

useMemo is a React hook memorizing the result of a function call (returned value from a function). And this memorization is helpful for optimizing the performance of web applications.

useMemo wraps a function in it and that function is not triggered until the value defined at dependencies of useMemo has been changed.

In other words, useMemo computes only when one of its dependencies is updated in order to avoid unnecessary calculations.

How useMemo works

To demonstrate the mechanism of useMemo hook, here is a sample code snippet;

// Child component

import { useMemo } from "react";

const Child = ({ a:number, b:number }) => {
  // Callback function returning the sum of a and b
  const sum = useMemo(() => {
    // Check if Child component is rendered
    console.log("Child component is rendered");
    return a + b;
  // array of dependencies ([a,b])
  }, [a, b]);
  return <div>No. {sum}</div>;
};

export default Child;

As you can see, there are two React function components whose names are Parent and Child. In the Child component, useMemo is used and has the following two arguments;

Callback function that returns the sum of two parameters ('a' and 'b')
Array of dependencies ([a,b]) that specify when useMemo should be fired

Now that we have these two arguments in useMemo, it is possible to memorize the value returned from the callback function until one of the value dependencies defined in useMemo has been changed.

As a result, thanks to the effects of useMemo hook, we could optimize performances in our React applications.

Let's compare the cases with and without useMemo hook

In the previous section, we could briefly learn the basics of how useMemo hook works. So let's dive into a little deeper side of useMemo hook to understand more about the benefit of using it.

Here is another code snippet with a component whose name is Parent component, containing the Child component.


// Parent Component

import Child from "./Child";
import { useState } from "react";

const Parent = () => {
  // Declare React state for the counter
  const [count, setCount] = useState(0);

  // Define two constant variables that have numbers respectively
  const numA = 3;
  const numB = 40;

  // A function that is triggered by onClick event in button component and increment the number of counter by 1
  const handleAddCount = () => {
    setCount((prevState) => prevState + 1);
  };

  // Check if Parent component is rendered
  console.log("Parent component is rendered");

  return (
    <>
      <div style={{ paddingTop: "2rem" }}>
        <p>Number in Child component</p>
        {/* Pass two variables (numA and numB) as props to the Child component */}
        <Child a={numA} b={numB} />
      </div>
      <div style={{ paddingTop: "4rem" }}>
        <p>Count number: {count} counts</p>
        {/* Set onClick event to increment the counter by 1 */}
        <button onClick={handleAddCount}>ADD</button>
      </div>
    </>
  );
};

export default Parent;

In the Parent component, there is a counter implemented by counter state and setCounter function with React state. So every time I click the "ADD" button, the number of counter displayed will be incremented by 1.

Case1: With useMemo hook

And the Child component in Parent component is the same component that is defined above.

// Child component (with useMemo)

import { useMemo } from "react";

const Child = ({ a:number, b:number }) => {
  // Callback function returning the sum of a and b
  const sum = useMemo(() => {
    // Check if Child component is rendered
    console.log("Child component is rendered");
    return a + b;
  // array of dependencies ([a,b])
  }, [a, b]);
  return <div>No. {sum}</div>;
};

export default Child;

So now, let's say I click the ADD button in the Parent component, and what will happen in the console?

As you can see the screenshot below, the counter is incremented to 5. At the same time, thanks to the effect of useMemo hook, even though every time the ADD button is clicked (to update the React state of counter in the Parent component), only the Parent component is rendered. (Child component is not re-rendered at all).

Case2: Without useMemo hook

Now that we could make sure the advantage of using useMemo hook to avoid re-rendering in Child component.

So what if I modify the portion of codes in Child component and remove useMemo hook in it, what will happen?

If the useMemo hook is removed in Child component, it would look like this;

// Child component (without useMemo hook)

const Child = ({ a:number, b:number }) => {
  const sum = a + b;
  // Check if Child component is rendered
  console.log("Child component is rendered");
  return <div>No. {sum}</div>;
};

export default Child;

And then, when I did the same thing in Case1 (Clicking the ADD button in parent component), the result of console is in this screenshot.

Now it turned out that without useMemo hook in Child component, Child component is always re-rendered when the counter state in Parent component is updated.

Considering better performances in React applications, it is sure that we should utilize useMemo hook effectively.

Conclusion

The useMemo hook plays a crucial role in optimizing React applications by memorizing values and preventing unnecessary renderings.

As a Front-End Developer specializing in React.js, effectively utilizing the useMemo hook has helped me advance my skills. I plan to explore it further and integrate it into my personal projects during refactoring.

Additionally, there is another React hook, useCallback, which serves a similar purpose. In the near future, I intend to write an article summarizing the basic usage of the useCallback hook as well.

What is Enum in TypeScript

Kento Honda — Sat, 04 Mar 2023 04:37:25 +0000

Intro

Currently, I am learning TypeScript by reading the book, "Learning TypeScript" (written by Josh Goldberg), and joining a private book club with highly motivated TypeScript learners.

While I am participating in this book club, sometimes I have heard the term "enum" in the explanation of something in TypeScript by other participants.

Even though I have recognized that I will learn and cover this topic later on, I decided to write an article describing the fundamental concepts of "enum" in TypeScript because I am very curious about it.

So, now is the time to get started!

What is Enum in TypeScript?

Enum in TypeScript is one of TypeScript's built-in features that allows us to declare a set of constant variables. In other words, TypeScript gives us a special syntax to create an object containing string type or number type value.

Here is a sample code of Enum; we can specify all the possible variables in Enum. In this case, we have four constant values as the name of animals.

enum Animals {
  Dog,
  Cat,
  Fox,
  Seal,
}

What the code snippet above does is define a new Enum named Animal with four possible values.

And one of Enum's key features is that Enum assigns a number to each value with auto-incrementation by 1, starting from the first value with 0.

To explain that, I put another code sample;

enum Animals {
  Dog, // Dog has　the number 0 
  Cat, // Cat has the number 1
  Fox, // Fox has the number 2
  Seal, // Seal has the number 3
}

let myFavoriteAnimal: Animals = Animals.Cat;
console.log(myFavoriteAnimal) // 1 is outputted

myFavoriteAnimal = Animals.Seal;
console.log(myFavoriteAnimal) // 3 is outputted

This sample code describes one of the benefits of using an enum in TypeScript.

Instead of using numeric values directly in your code, declaring constant variables in an enum is much easier to understand and improves the readability of your code.

String Enum

Here is another type of Enum so-called "String Enum". Each variable that is defined in a string enum has string literal type as their value type.

(FYI, you can check about 'what is Literal Type in TypeScript from Literal Type)

enum Direction {
  North = "North", // (enum member) Direction.North = "North"
  East = "East", // (enum member) Direction.East = "East"
  South = "South", // (enum member) Direction.South = "South"
  West = "West", // (enum member) Direction.West = "West"
}

Based on this code snippet, we can utilize string enum like the additional code sample below;

enum Direction {
  North = "North",
  East = "East",
  South = "South",
  West = "West",
}

function getDirection(d: Direction): string {
  switch (d) {
    case Direction.North:
      return 'The right direction is North';
    case Direction.East:
      return 'The right direction is East';
    case Direction.South:
      return 'The right direction is South';
    case Direction.West:
      return 'The right direction is West';
    default:
      throw new Error('Invalid direction');
  }
}
console.log(getDirection(Direction.North)); // Output: "The right direction is North"
console.log(getDirection(Direction.West)); // Output: "The right direction is West"

In this case, the getDirection function has a switch statement that makes us get different returned values based on the direction given to this function as a parameter.

Except for the case that an invalid parameter does not exist in the Direction Enum, we could get the exact expected return value from the getDirection function by passing one of constant values (like Direction.North) in it.

Conclusion

In summary, Enum in Typescript is a special type allowing us to have constants with an assigned number incremented by 1 from 0. That results in making our codes easier to follow for others and improving their maintainability.

However, I have heard differing opinions on the use of Enum in TypeScript such as using Enum in TypeScript is not a good case for developers. So probably my next article could be the one talking about if we should avoid using Enum or not in TypeScript!

References

Unions and Narrowing in TypeScript

Kento Honda — Sat, 25 Feb 2023 20:55:49 +0000

Intro

This is my first memorable article to publish on the DEV community.

Currently, I am relearning TypeScript using the book "Learning TypeScript" by Josh Goldberg to gain a clear understanding of its core principles.

During my TypeScript learning journey, I found myself confused and mixing up two important concepts - "Unions and Narrowing".

As a result, I have decided to write an article to review what I have learned and share it with others who are also learning TypeScript like me.

What are the concepts of Unions and Narrowing?

Firstly, I summarized shortly about Unions and Narrowing in TypeScript below;

Unions:
Allowing us to assign two or more types of values to a variable that results in defining possible types of it
Narrowing:
Specifying value's allowed type by implementing conditional checks, typeof checks, logical operators, and so on

TypeScript is a powerful tool for declaring variable types, allowing us to receive notifications when attempting to insert variables into values of different types.

However, in some cases, we may need to allow variables to have multiple possible value types. In these scenarios, Unions are a useful feature for developers.

Sample codes for Unions and Narrowing

Here are some samples codes demonstrating the concepts of Unions and Narrowing;

Unions

From this section, I use the term "Union Type", implementing the concepts of Unions in codes. Variables that have Union Type have multiple (two or more) potential types.

Example 1

// Declaring Union Type

let union: string | number

// We can insert values with number type or string type to this union variable

union = 28  // ok, 28 is a number
union = "Gold"  // ok, Gold is a string

// Also, Union Type only allows us to assign values with types declared in it (In this case, we can only assign values with number type or string type)

union = false  // Error (Because boolean type does not exist in Union Type above)

Example 2

// The variable "randomValue" has two possibilities of types; string or number 

(based on the result of Math.random() method)

let randomValue = Math.random() > 0.8 
? 28  // number
: "Gold"  // string

Narrowing

Example 1: conditional check

// This variable has string value or number value

let randomValue = Math.random() > 0.8 
? 28  
: "Gold"

// Define a function returning the value type of parameter

function sampleFuncForRandomValue(value:string | number) {
 if(value === 28) {
  return "Value has number type"
 }
 else if(value === "Gold") {
  return "Value has string type"
 }
 else return "Nothing"
}

// Implement this function for checking the type of value for the randomValue variable

sampleFuncForRandomValue(randomValue)  // returns "Value has number type" or "Value has string type" based on the value type of randomValue variable

Example 2: typeof check

// Declare the union variable

let union: string | number

// Define a function returning the value type of parameter

function sampleFunc(value:string | number) {
 if(typeof value === "number") {
  return "Value has number type"
 }
 else {
  return "Value has string type"
 }
}

// Let's play around sampleFunc function!

union = 28  // typeof union === "number"
sampleFunc(28)  // returns "Value has number type"

union = "Gold"  // typeof union === "string"
sampleFunc(union)  // returns "Value has string type"

Example 3: Logical operators


let union: string | undefined;

// Currently, the type of value for the union variable is undefined.

union?.toLowerCase()  // returns "undefined"
union && toLowerCase()  // returns "undefined"

// Now, insert "GOLD" (string) into the union variable, and implement the same steps above. Let's see how it goes.

union = "GOLD"
union?.toLowerCase()  // ok, returns "gold"
union && union.toLowerCase() // ok, returns "gold"

Conclusion

In conclusion, unions and narrowing are powerful and important concepts that TypeScript developers should know to write safer and more efficient code.

Union types allow for increased flexibility in the types of variables and parameters that can be accepted, while narrowing can help to ensure that code behaves as intended types of value.

At the end

Through writing this article, I have reviewed and improved my understanding of TypeScript by carefully ensuring the accuracy of my content.

Furthermore, I have come to realize that creating programming articles is an effective way to showcase and enhance my technical skills.

I am excited to continue writing and exploring new topics, even though I am not yet certain what my next article will be about!

References

Learning Typescript