Building Your Own Custom TypeScript Utility Types

// Example 1: Selecting a type based on whether it's a string or a number
type IsString<T> = T extends string ? "Yes, it's a string" : "No, it's not a string";

// --- Correct Usage ---
type Result1 = IsString<"hello">;       // Result: "Yes, it's a string"
type Result2 = IsString<123>;           // Result: "No, it's not a string"
type Result3 = IsString<boolean>;       // Result: "No, it's not a string"

// Example 2: Extracting the element type of an array (using 'infer')
type ElementType<T> = T extends (infer U)[] ? U : T;

// --- Correct Usage ---
type StringArrayElement = ElementType<string[]>; // Result: string
type NumberArrayElement = ElementType<number[]>; // Result: number
type NonArrayElement = ElementType<boolean>;     // Result: boolean (since it's not an array)

console.log("StringArrayElement:", "string");
console.log("NumberArrayElement:", "number");

// Example 3: Extracting property names if those properties are functions
type FunctionPropertyNames<T> = {
    [K in keyof T]: T[K] extends Function ? K : never
}[keyof T];

type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;

interface Service {
    id: number;
    getName(): string;
    isActive: boolean;
    greet(message: string): void;
}

// --- Correct Usage ---
type ServiceFunctionNames = FunctionPropertyNames<Service>; // Result: "getName" | "greet"
type ServiceFunctions = FunctionProperties<Service>;
/* Result:
{
    getName: () => string;
    greet: (message: string) => void;
}
*/
const myService: ServiceFunctions = {
    getName: () => "My Service",
    greet: (msg: string) => console.log(msg)
};
myService.greet("Hello from service!");

// --- Common Pitfalls / Limitations ---
// Conditional Types can become very complex and hard to read if conditions are nested too deeply.
// Be careful with 'infer' in inappropriate places, as it can lead to unintended inferences.
// For example, `type WhatIsThis<T> = T extends infer U ? U : never;` will always just yield `T`.

interface UserData {
    id: number;
    name: string;
    email: string;
}

// Example 1: Making all properties nullable
type Nullable<T> = { [P in keyof T]: T[P] | null };

// --- Correct Usage ---
type NullableUserData = Nullable<UserData>;
/* Result:
{
    id: number | null;
    name: string | null;
    email: string | null;
}
*/
const userWithNulls: NullableUserData = {
    id: 1,
    name: "John Doe",
    email: null // Email can be null
};
console.log("User with Nulls:", userWithNulls);

// Example 2: Making all properties into getter functions (with Key Remapping)
type Getters<T> = {
    [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P]
};
// Note: 'as `get${Capitalize<string & P>}`' is the "Key Remapping" feature introduced in TS 4.1.
// `Capitalize<string & P>` ensures P is a string and its first letter is capitalized.

// --- Correct Usage ---
type UserGetters = Getters<UserData>;
/* Result:
{
    getId: () => number;
    getName: () => string;
    getEmail: () => string;
}
*/
const userGetters: UserGetters = {
    getId: () => 1,
    getName: () => "Alice",
    getEmail: () => "alice@example.com"
};
console.log("User Getter Name:", userGetters.getName());

// Example 3: Making all properties Readonly recursively (combined with Conditional Types)
// This is a simplified version; a robust DeepReadonly is more complex.
type DeepReadonly<T> = T extends object ? {
    readonly [P in keyof T]: DeepReadonly<T[P]>;
} : T;

interface DeepObject {
    a: number;
    b: {
        c: string;
        d: {
            e: boolean;
        };
    };
}

// --- Correct Usage ---
type ImmutableDeepObject = DeepReadonly<DeepObject>;
const immutableObj: ImmutableDeepObject = {
    a: 1,
    b: {
        c: "text",
        d: {
            e: true
        }
    }
};

// immutableObj.a = 2; // Error: Cannot assign to 'a' because it is a read-only property.
// immutableObj.b.c = "new text"; // Error: Cannot assign to 'c' because it is a read-only property.

// --- Common Pitfalls / Limitations ---
// Mapped Types operate on object properties. If applied to non-object types,
// the result might not be as expected or could yield an empty type.
// Avoid Key Remapping that results in identical key names, as this can lead to type conflicts.

type EventCategory = "user" | "product" | "order";
type EventAction = "created" | "updated" | "deleted";

// Example 1: Creating a type for event names
type AppEvent = `${EventCategory}_${EventAction}`;

// --- Correct Usage ---
const userCreatedEvent: AppEvent = "user_created";
const productUpdatedEvent: AppEvent = "product_updated";
// const orderViewedEvent: AppEvent = "order_viewed"; // Error: Type '"order_viewed"' is not assignable to type 'AppEvent'.
// Explanation: Only valid combinations of EventCategory and EventAction are allowed.
console.log("User Created Event:", userCreatedEvent);

// Example 2: Creating a type for object keys with a prefix
type Feature = "settings" | "profile";
type FeatureConfigKeys = `config_${Feature}`;

// --- Correct Usage ---
const settingKey: FeatureConfigKeys = "config_settings";
const profileKey: FeatureConfigKeys = "config_profile";
console.log("Setting Key:", settingKey);

// Example 3: Using infer to extract parts of a string literal (reverse template literal)
type GetIdFromKey<T extends string> = T extends `${infer Prefix}_${infer Id}` ? Id : never;

// --- Correct Usage ---
type ProductId = GetIdFromKey<"product_123">; // Result: "123"
type UserId = GetIdFromKey<"user_abc_456">;   // Result: "abc_456" (infer captures up to the first match)
type NoId = GetIdFromKey<"just_a_string">;  // Result: "a_string" (still matches the pattern)
type NoMatch = GetIdFromKey<"no_underscore">; // Result: never (if pattern doesn't match)

console.log("Product ID Extracted:", "123" as ProductId);

// --- Common Pitfalls / Limitations ---
// Template Literal Types only work with string literal types.
// If any part is a broad type (like a general `number` or `string`), the result will also be a broad type.
// For example, `type DynamicString = `${number}_${string}`;` will result in `string`, not a specific literal union.

type DeepPartial<T> = T extends object ? {
    [P in keyof T]?: DeepPartial<T[P]>;
} : T;

interface NestedUser {
    id: number;
    info: {
        name: string;
        contact?: {
            email: string;
            phone: string;
        };
    };
    preferences: {
        theme: "dark" | "light";
        notifications: boolean;
    };
}

// --- Correct Usage ---
type PartialNestedUser = DeepPartial<NestedUser>;
/* Result:
{
    id?: number | undefined;
    info?: {
        name?: string | undefined;
        contact?: {
            email?: string | undefined;
            phone?: string | undefined;
        } | undefined;
    } | undefined;
    preferences?: {
        theme?: "dark" | "light" | undefined;
        notifications?: boolean | undefined;
    } | undefined;
}
*/

const partialUser: PartialNestedUser = {
    info: {
        contact: {
            email: "test@example.com" // Only email provided, phone is optional
        }
    },
    preferences: {
        theme: "dark" // Only theme provided, notifications is optional
    }
};

console.log("Partial Nested User:", partialUser);

// --- Common Pitfalls / Limitations ---
// Recursive types like DeepPartial must be handled carefully to avoid infinite type evaluation.
// TypeScript has a recursion depth limit (typically 50 levels) which can cause errors if the structure is too deep.

type PropWithType<T, SelectedType> = {
    [K in keyof T]: T[K] extends SelectedType ? K : never
}[keyof T];

interface Employee {
    id: number;
    name: string;
    email: string;
    hireDate: Date;
    salary: number;
    isActive: boolean;
}

// --- Correct Usage ---
type StringProps = PropWithType<Employee, string>; // Result: "name" | "email"
type NumberProps = PropWithType<Employee, number>; // Result: "id" | "salary"
type BooleanProps = PropWithType<Employee, boolean>; // Result: "isActive"
type DateProps = PropWithType<Employee, Date>; // Result: "hireDate"

// Can then be combined with Pick:
type EmployeeStringData = Pick<Employee, StringProps>;
/* Result:
{
    name: string;
    email: string;
}
*/
const employeeString: EmployeeStringData = {
    name: "Agus",
    email: "agus@company.com"
};
console.log("Employee String Data:", employeeString);

// --- Common Pitfalls / Limitations ---
// Be careful with overly broad types (e.g., `any` or `unknown`) as `SelectedType`,
// as they might yield all properties.
// This only checks the type of the property itself, not properties within nested objects.