DEV Community: mktoho

Simplifying Union Types and Arrays in TypeScript

mktoho — Sat, 12 Oct 2024 05:31:01 +0000

When working with TypeScript, you might find yourself needing to define a union type and an array containing all of the possible values of that type. A common approach is to write something like this:

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

At first glance, this seems fine. However, there's a hidden problem here: every time you want to change or add an option, you need to update both the Taste union type and the tastes array. This duplication of effort can lead to mistakes and makes maintaining the code more tedious.

Luckily, there's a way to simplify this by reducing redundancy. By using the as const assertion and typeof in TypeScript, you can consolidate the definition of both the union type and the array into one place. Here's how you can refactor the above code:

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

This approach has several benefits:

Single Source of Truth:

You only define the list of values once, in the tastes array. The Taste type is automatically derived from this array, so if you ever need to update the list, you only have to do it in one place.
Type Safety:

By using as const, TypeScript treats the tastes array as a tuple with literal types instead of just a string array. This ensures that the Taste type remains accurate and aligned with the values in tastes.
Better Maintenance:

Since the Taste type is generated from the array, there’s no risk of mismatch between the type and the actual values. This reduces the potential for bugs and makes the code easier to maintain.

Example Use Case

Now, whenever you use the Taste type in your code, it’s guaranteed to match the values in the tastes array:

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

This pattern not only improves your code’s readability but also ensures that it’s less error-prone, especially when dealing with multiple values that need to be kept in sync.

By embracing this strategy, you can make your TypeScript code more maintainable and scalable. This is particularly useful when you're dealing with large sets of values or when your codebase grows over time.

How to use authenticated proxy with Node's fetch

mktoho — Sat, 15 Oct 2022 06:10:53 +0000

The fetch API is now available in node18. However, I was having trouble figuring out how to use a proxy.

Finally, we were able to use fetch through a proxy with the following code.

import { ProxyAgent, setGlobalDispatcher } from "undici"
import { Base64 } from "js-base64"

const agent = new ProxyAgent({
  uri: "http://yout-proxy-host:8080",
  auth: Base64.encode("username:password"),
})

setGlobalDispatcher(agent)

const main = async () => {
  const response = await fetch("https://api.example.com/super-cool-api")
  const json = await response.json()
  console.log(json)
}

main()

I am not good at English so I leave you only with the successful code 🎮

mapping javascript object values

mktoho — Wed, 14 Sep 2022 05:55:41 +0000

A method that maps only the values of a javascript object, which is a set of key/value pairs, like the map function of an array.

const entriesMap = (object, callbackfn) => {
  const entries = Object.entries(object).map(e => callbackfn(e))
  return Object.fromEntries(entries)
}

const valuesMap = (object, callbackfn) =>
  entriesMap(object, ([k, v]) => [k, callbackfn(v)])

export { entriesMap, valuesMap }

The project created by "yarn create next-app" does not recognize eslint

mktoho — Wed, 13 Oct 2021 18:45:38 +0000

Problem

As of October 13, 2021, the project created by yarn create next-app fails with yarn lint.

yarn create next-app my-app
cd my-app
yarn lint

error - ESLint must be installed: yarn add --dev eslint

However, eslint is listed in the dependencies of the generated package.json.

  "devDependencies": {
    "eslint": "8.0.0",
    "eslint-config-next": "11.1.2"
  }

Solution

I changed the eslint version to 7.x and it worked!

yarn add --dev eslint@7.32.0
yarn lint

I did it!

テスト

mktoho — Thu, 16 Nov 2017 13:53:42 +0000

こんにちは！！

話題になってたので何か書いてみようと思いました！
よろしくお願いします┏○ﾍﾟｺｯ