Advanced TypeScript Types: Generics, Unions

๐Ÿ’ก Advanced TypeScript Types: Generics, Unions โ€” Executive Summary

Technical architectural analysis, practical configuration manifests, and deployment instructions for Advanced TypeScript Types: Generics, Unions.

Utility Type

TypeScript’s **Utility Types** are powerful tools that help you transform already defined types or easily create new types. Frequently used utility types include Partial, Readonly, Pick, and Omit. Below we will look at a brief description and example of each utility type.

1. Partial

Partial creates a type that makes all properties of the given type T optional.

ts
interface User {
  name: string;
  age: number;
  email: string;
}

function updateUser(user: User, updates: Partial<User>): User {
  return { ...user, ...updates };
}

const user: User = {
  name: "John",
  age: 30,
  email: "[email protected]",
};

// Partial์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•„์š”ํ•œ ์†์„ฑ๋งŒ ์—…๋ฐ์ดํŠธ ๊ฐ€๋Šฅ
const updatedUser = updateUser(user, { age: 31 });
console.log(updatedUser);
// ์ถœ๋ ฅ: { name: 'John', age: 31, email: '[email protected]' }
2. Readonly

Readonly creates a type that makes all properties of the given type T readonly. In other words, the properties cannot be changed.

ts
interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = {
  name: "Alice",
  age: 25,
};

// user.name = "Bob";  // ์˜ค๋ฅ˜: 'name'์€ ์ฝ๊ธฐ ์ „์šฉ ์†์„ฑ์ž…๋‹ˆ๋‹ค.
console.log(user);
// ์ถœ๋ ฅ: { name: 'Alice', age: 25 }
3. Pick

Pick creates a new type by selecting only attributes K from type T. Here K is some of the keys of T.

ts
interface User {
  name: string;
  age: number;
  email: string;
}

type UserInfo = Pick<User, "name" | "email">;

const userInfo: UserInfo = {
  name: "Alice",
  email: "[email protected]",
};

console.log(userInfo);
// ์ถœ๋ ฅ: { name: 'Alice', email: '[email protected]' }
4. Omit

Omit creates a new type with the remaining properties from type T except for properties K.

ts
interface User {
  name: string;
  age: number;
  email: string;
}

type UserWithoutEmail = Omit<User, "email">;

const userWithoutEmail: UserWithoutEmail = {
  name: "Bob",
  age: 28,
};

console.log(userWithoutEmail);
// ์ถœ๋ ฅ: { name: 'Bob', age: 28 }
5. Record

Record creates an object type using key type K and value type T. That is, K is the key type, and T is the value type.

ts
type Role = "admin" | "user" | "guest";
interface UserInfo {
  name: string;
  age: number;
}

const users: Record<Role, UserInfo> = {
  admin: { name: "John", age: 30 },
  user: { name: "Jane", age: 25 },
  guest: { name: "Visitor", age: 22 },
};

console.log(users);
// ์ถœ๋ ฅ:
// {
//   admin: { name: 'John', age: 30 },
//   user: { name: 'Jane', age: 25 },
//   guest: { name: 'Visitor', age: 22 }
// }
6. Required

Required creates a type that changes all optional properties of type T to required.

ts
interface User {
  name: string;
  age?: number;
}

const user1: Required<User> = {
  name: "John",
  age: 30, // age๋Š” ํ•„์ˆ˜ ์†์„ฑ์œผ๋กœ ๋ณ€๊ฒฝ๋จ
};

// const user2: Required<User> = { name: "John" }; // ์˜ค๋ฅ˜: 'age' ์†์„ฑ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
7. NonNullable

NonNullable creates a type that excludes null and undefined from type T.

ts
type Name = string | null | undefined;

const validName: NonNullable<Name> = "Alice";
// const invalidName: NonNullable<Name> = null; // ์˜ค๋ฅ˜: 'null'์€ 'NonNullable<string>' ํƒ€์ž…์— ํ• ๋‹นํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
8. ReturnType

ReturnType extracts the return type of function type T.

ts
function getUserInfo() {
  return { name: "Alice", age: 30 };
}

type UserInfo = ReturnType<typeof getUserInfo>;

const user: UserInfo = {
  name: "Alice",
  age: 30,
};

console.log(user);
// ์ถœ๋ ฅ: { name: 'Alice', age: 30 }
9. Extract

Extract extracts only the type corresponding to U from T.

ts
type MixedType = string | number | boolean;

type OnlyStringOrNumber = Extract<MixedType, string | number>;

const value: OnlyStringOrNumber = 42;
// const invalidValue: OnlyStringOrNumber = true; // ์˜ค๋ฅ˜: 'boolean'์€ 'string | number' ํƒ€์ž…์— ํ• ๋‹นํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
10. Exclude

Exclude creates types from T excluding the type corresponding to U.

ts
type MixedType = string | number | boolean;

type ExcludeBoolean = Exclude<MixedType, boolean>;

const value: ExcludeBoolean = "Hello";
// const invalidValue: ExcludeBoolean = true; // ์˜ค๋ฅ˜: 'boolean'์€ 'string | number' ํƒ€์ž…์— ํ• ๋‹นํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *