자바스크립트를 허용해주세요.
[ 자바스크립트 활성화 방법 ]
from Mohon Aktifkan Javascript!
 

[TypeScript] 14장 유티릴티 타입

728x90

1. Partial <T>

Partial<T>는 모든 속성을 선택적으로 만드는 타입입니다.

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

const updateUser = (userId: number, userUpdates: Partial<User>) => {
  console.log(`Update User ${userId} with data:`, userUpdates);
};

updateUser(1, { name: 'James' }); // Update User 1 with data: { name: "James" }

2. Required<T>

Required<T>는 모든 속성을 필수로 만드는 타입입니다.

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

const createUser = (user: Required<UserWithOptionalFields>) => {
  console.log('Creating user:', user);
};

createUser({ id: 1, name: 'Bob', email: 'Bob@example.com' });

3. Readonly<T>

ReadOnly<T>는 모든 속성을 읽기 전용으로 만드는 타입입니다.

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

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
};

// user.name = 'Bob'; // Error: name is read-only

4. Record<K, T>

Record<K, T>는 특정 키(K)에 대한 특정 타입(T)을 가지는 객체 타입을 만듭니다.

type UserRoles = 'admin' | 'user' | 'guest';

const UserRoles: Record<UserRoles, string> = {
  admin: 'Adminstrator',
  user: 'Regular User',
  guest: 'Guest User',
};

console.log('User Roles:', UserRoles); // User Roles: { admin: "Adminstrator", user: "Regular User", guest: "Guest User" }

5. Pick<T, K>

Pick<T, K>는 타입 T에서 속성 K만 선택하여 새로운 타입을 만듭니다.

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

type UserNameAndEmail = Pick<User, 'name' | 'email'>;

const user: UserNameAndEmail = {
  name: 'Alice',
  email: 'alice@example.com',
};

console.log('User Name and Email:', user); // User Name and Email: { name: "Alcie", email: "alice@example.com" }

6. Omit<T, K>

Omit<T, K>는 타입 T에서 속성 K를 제외한 새로운 타입을 만듭니다.

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

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

const user: UserWithoutEmail = {
  id: 1,
  name: 'Alice',
  // not email type
};

console.log(user); // { id: 1, name: "Alice" }

7. Exclude <T, U>

Exclude <T, U>는 타입 T에서 타입 U에 포함되지 않는 타입을 선택합니다.

type Role = 'admin' | 'user' | 'guest';
type NonAdminRole = Exclude<Role, 'admin'>;

const NonAdminRoles: NonAdminRole[] = ['user', 'guest'];

console.log('Non-Admin Role:', NonAdminRoles); // Non-Admin Role: [ 'user', 'guest' ]

8. Extract<T, U>

Extract<T, U>는 타입 T에서 타입 U에 포함되는 타입을 선택합니다.

type Role = 'admin' | 'user' | 'guest';
type AdminRole = Extract<Role, 'admin'>; // "admin

const adminRole: AdminRole = 'admin';

console.log('Admin Role:', adminRole); // Admin Role: admin

9.  NonNullable<T>

NonNullable<T>는 null과 undefined를 제외한 타입을 만듭니다.

type MaybeString = string | null | undefined;
type NotNullableString = NonNullable<MaybeString>;

const exampleString: NotNullableString = 'Hello';
console.log('Not Nullable String:', exampleString); // "Not Nullable String: Hello"

10. ReturnType<T>

ReturnType<T>는 함수 타입 T의 반환 타입을 추출합니다.

const getUser = () => {
  return { id: 1, name: 'Alice' };
};

type UserType = ReturnType<typeof getUser>;
const userData: UserType = getUser();
console.log('User Data:', userData); // User Data: { id: 1, name: "Alice" }

 

GitHub - Koras02/typescript-bloging

Contribute to Koras02/typescript-bloging development by creating an account on GitHub.

github.com

 

728x90
LIST

'Front-End > TypeScript' 카테고리의 다른 글

[Typescript] 16장 JSX  (0) 2025.03.24
[Typescript] 15장 이터러블 타입  (0) 2025.03.22
[Typescript] 13장 데코레이터  (0) 2025.03.14
[Typescript] 12장 선언 병합  (0) 2025.03.12
[Typescript] 11장 고급 타입 Chapter 2  (0) 2025.03.08