TypeScript on Tech, Games, and Everyday Life – Made Simple

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.

Exporting Proper TypeScript Declaration Files (.d.ts) for NPM

Sun, 10 May 2026 00:00:00 +0900

Why Declaration Files Matter

When you publish an npm package written in TypeScript, consumers need type information to get IntelliSense and compile-time checking. Without .d.ts files, your library is effectively typed as any, defeating the purpose of using TypeScript in the first place.

Declaration files describe the shape of your exports without shipping the implementation source. They enable tree-shaking, documentation hover tips, and strict type checking in consumer projects.

Generating .d.ts Files

The TypeScript compiler generates declaration files when declaration is set to true in tsconfig.json.

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.

How to Use Standard Decorators in TypeScript

Sat, 05 Jul 2025 00:00:00 +0900

Introduction

In TypeScript, decorators have long been a key feature, popularized by major frameworks like Angular, NestJS, and TypeORM to manage metadata and dependency injection.

However, for years, decorators remained an experimental feature (requiring the experimentalDecorators flag), relying on a legacy proposal that differed from the evolving ECMAScript (JavaScript) standard.

With the release of TypeScript 5.0, official support for the standard ECMAScript Decorators (Stage 3/4) was introduced. This brings improved type safety and runtime consistency to the decorator syntax. This article explains how to write standard decorators in modern TypeScript.

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.

TypeScript Path Aliases: Clean Imports at Scale

Sun, 22 Dec 2024 00:00:00 +0900

TypeScript path aliases eliminate the pain of deep relative imports like ../../../utils/helpers, replacing them with clean, intention-revealing paths such as @utils/helpers. This article covers configuration, bundler integration, testing, and migration strategies.

Configuring baseUrl and paths

The foundation of path aliases is the paths mapping in tsconfig.json, combined with baseUrl:

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["./src/*"],
 "@components/*": ["./src/components/*"],
 "@utils/*": ["./src/utils/*"]
 }
 }
}

baseUrl sets the base directory for resolving non-relative module names. paths maps alias prefixes to file system locations relative to baseUrl. The wildcard * matches any path segment after the prefix.

TypeScript Branded Types: Preventing Primitive Confusion

Tue, 15 Oct 2024 00:00:00 +0900

TypeScript uses structural typing (duck typing): two types with identical shapes are interchangeable. This causes bugs when primitive types back domain concepts — passing a userId where an orderId is expected, both typed as string. Consider a function that sends an email but accidentally receives a database ID instead of an address because both are string. Branded types solve this by adding a phantom type marker that differentiates structurally identical types at compile time with zero runtime cost.

TypeScript Project References: Scaling Large Codebases

Tue, 13 Aug 2024 00:00:00 +0900

Introduction

As TypeScript codebases grow, the monolithic tsconfig.json approach breaks down. Every invocation of tsc type-checks and emits the entire project — a process that can take minutes even with --noEmit in large monorepos. Worse, without module boundaries, any file can import any other file, creating tangled dependency graphs that are difficult to refactor. TypeScript Project References solve this by allowing you to split your codebase into independent sub-projects, each with its own tsconfig.json, enabling incremental builds, enforced API boundaries, and dramatically faster type-checking.

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: