Programming on Commentary of Takao

Strict Type Guarding using TypeScript's NoInfer Utility

Wed, 10 Jun 2026 00:00:00 +0900

The Widening Problem

When TypeScript infers types from multiple call-site arguments, it often widens the inferred type to accommodate all candidates. This is usually helpful, but in certain generic scenarios it produces types that are too loose, letting invalid states slip through.

Consider a function that accepts a default value alongside a specific key:

function createState<T extends string>(key: T, defaultValue: T) {
 return { key, defaultValue };
}

const state = createState("color", "blue");
// T inferred as "color" | "blue" — not what we want

TypeScript infers T as "color" | "blue" instead of constraining defaultValue to match key. The result type loses precision for both parameters.

Building Complex string Parsers inside TypeScript Type System

Fri, 10 Apr 2026 00:00:00 +0900

Parsing at the Type Level

TypeScript’s template literal types, combined with recursive conditional types and infer, allow you to parse and transform string literals entirely within the type system. This is not a runtime parser—it is a compile-time parser that extracts structure from string constants, enabling strongly typed APIs for URL routing, SQL queries, command-line arguments, and more.

Template Literal Types Primer

Template literal types can interpolate other types and infer parts of a string.

Branching in TS Type System: Intro to Conditional Types

Thu, 15 Jan 2026 00:00:00 +0900

Introduction

TypeScript’s type system is Turing-complete, and one of the key features that unlocks its full power is conditional types. Just like ternary operators in JavaScript (condition ? a : b), conditional types let you create type-level logic: T extends U ? X : Y. This enables dynamic, context-aware type resolution.

Basic Syntax

A conditional type checks whether a type extends another type:

type IsString<T> = T extends string ? true : false;

type A = IsString<'hello'>; // true
type B = IsString<42>; // false

The condition T extends U asks: “Is T assignable to U?” If yes, resolve to the true branch; otherwise, the false branch.

Transforming Types dynamically using Mapped Types

Mon, 10 Nov 2025 00:00:00 +0900

Introduction

Mapped types let you transform an existing object type by iterating over its keys. Think of them as Array.prototype.map() but at the type level. The syntax { [K in keyof T]: T[K] } creates a new type by applying a transformation to each property of T. This is how many of TypeScript’s built-in utility types work under the hood.

Basic Mapped Type

The simplest mapped type creates a clone of an existing type:

Type-Safe State Transitions using Discriminated Unions

Wed, 10 Sep 2025 00:00:00 +0900

In modern frontend and backend development with TypeScript, ensuring type safety during state transitions is a crucial element in building robust and crash-free applications. When handling asynchronous API communications (such as transitioning between loading, success, and error states) or complex user interactions, ambiguous type definitions can easily lead to unexpected runtime errors.

In this article, we will explore how to harness the power of Discriminated Unions (also known as Tagged Unions) in TypeScript to manage state safely, elegantly, and with minimum boilerplate.

Creating Powerful String Types with TS Template Literals

Tue, 10 Jun 2025 00:00:00 +0900

Introduction

TypeScript offers an advanced type system that allows developers to model complex runtime constraints at compile time.

Among these features, Template Literal Types (introduced in TypeScript 4.1) allow you to define structured string constraints by combining string literals.

By applying JavaScript’s template literal syntax (`hello ${name}`) to type space, you can enforce safe CSS class name patterns, automate API route mappings, and construct typed design systems. This guide reviews the core patterns of Template Literal Types.

Mastering the TypeScript satisfies Operator

Mon, 10 Mar 2025 00:00:00 +0900

Introduction

Introduced in TypeScript 4.9, the satisfies operator is a powerful feature designed to improve type safety while preserving developer flexibility.

However, distinguishing the difference between satisfies, type annotations (: Type), and type assertions (as Type) can be confusing. This guide breaks down the mechanics of the satisfies operator and shares practical use cases for production codebases.

1. The Limitation of Standard Type Annotations (:)

Let’s review the limitations of standard type annotations.

Patterns to Avoid with JavaScript Async/Await

Sat, 15 Feb 2025 00:00:00 +0900

Introduction

Since the introduction of async/await in ES2017, writing asynchronous JavaScript has become far more intuitive. It allows developers to express asynchronous logic in a synchronous-looking structure, drastically improving codebase readability compared to nested Promise chains (.then().catch()).

However, this clean synchronous-like syntax can hide performance pitfalls and error-handling bugs. In this article, we’ll dive into common async/await antipatterns and learn how to refactor them into high-performance, resilient code.

Antipattern 1: Unnecessary Serialization (Sequential Awaiting)

The most common mistake is executing independent asynchronous tasks sequentially, missing opportunities for parallel execution.

TypeScript Generic Constraints: Building Type-Safe APIs

Tue, 05 Mar 2024 00:00:00 +0900

TypeScript generics let you write reusable, type-safe code, but without constraints they are too permissive. The extends keyword restricts type parameters to shapes that have specific properties, giving you both flexibility and safety.

The extends Constraint

The foundation of generic constraints is the extends keyword. It ensures a type parameter satisfies a required structure:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
 return obj[key];
}

Here K extends keyof T guarantees key is a valid property of obj. Attempting to pass an invalid key triggers a compile-time error. Common patterns include constraining to interfaces (T extends { id: string }), union members, or primitive types.

TypeScript Utility Types: Complete Guide with Real Examples

Sun, 10 Dec 2023 00:00:00 +0900

TypeScript provides a rich set of built-in utility types that transform and manipulate other types. Understanding these tools lets you write more expressive and type-safe code without reinventing the wheel.

Property Modification Types

These types modify the optionality, mutability, and requirement of object properties:

interface User {
 id: number;
 name: string;
 email?: string;
}

type PartialUser = Partial<User>;
// { id?: number; name?: string; email?: string; }

type RequiredUser = Required<User>;
// { id: number; name: string; email: string; }

type ImmutableUser = Readonly<User>;
// { readonly id: number; readonly name: string; readonly email?: string; }

Type	Effect	Common Use
`Partial<T>`	All properties optional	PATCH request bodies
`Required<T>`	All properties required	Form submission validation
`Readonly<T>`	All properties read-only	Configuration objects

Partial is especially useful for API update operations where clients should be able to send a subset of fields: