13 Typescript 유틸리티: 개발자를 위한 치트 시트

Typescript는 유형 검사 측면에서 매우 강력하지만 일부 유형이 다른 유형의 하위 집합이고 이에 대한 유형 검사를 정의해야 하는 경우 때때로 지루해집니다.

예를 들어 2가지 응답 유형이 있습니다.

사용자 프로필 응답

interface UserProfileResponse {
  id: number;
  name: string;
  email: string;
  phone: string;
  avatar: string;
}

로그인 응답

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

동일한 컨텍스트 LoginResponse 및 UserProfileResponse의 유형을 정의하는 대신 UserProfileResponse의 유형을 정의하고 LoginResponse의 일부 속성을 선택할 수 있습니다.

type LoginResponse = Pick<UserProfileResponse, "id" | "name">;

더 나은 코드를 작성하는 데 도움이 되는 몇 가지 유틸리티 함수를 이해해 봅시다.

대문자

Type의 모든 속성이 대문자로 설정된 형식을 구성합니다.

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type UppercaseRole = "ADMIN" | "USER" | "GUEST";

// Good practice ✅
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"

소문자

Type의 모든 속성이 소문자로 설정된 형식을 생성합니다. 대문자의 반대.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type LowercaseRole = "admin" | "user" | "guest";

// Good practice ✅
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"

대문자로

Type의 모든 속성이 대문자로 설정된 형식을 구성합니다.

type Role = "admin" | "user" | "guest";

// Bad practice 💩
type CapitalizeRole = "Admin" | "User" | "Guest";

// Good practice ✅
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"

대문자 없애기

Type의 모든 속성이 대문자로 설정되지 않은 형식을 구성합니다. 자본화의 반대.

type Role = "Admin" | "User" | "Guest";

// Bad practice 💩
type UncapitalizeRole = "admin" | "user" | "guest";

// Good practice ✅
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"

부분적

Type의 모든 속성이 optional로 설정된 형식을 구성합니다.

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

// Bad practice 💩
interface PartialUser {
  name?: string;
  age?: number;
  password?: string;
}

// Good practice ✅
type PartialUser = Partial<User>;

필수의


필수로 설정된 Type의 모든 속성으로 구성된 형식을 구성합니다. 부분 반대.

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

// Bad practice 💩
interface RequiredUser {
  name: string;
  age: number;
  password: string;
}

// Good practice ✅
type RequiredUser = Required<User>;

읽기 전용

읽기 전용으로 설정된 Type의 모든 속성으로 구성된 형식을 구성합니다.

interface User {
  role: string;
}

// Bad practice 💩
const user: User = { role: "ADMIN" };
user.role = "USER";

// Good practice ✅
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; // Error: Cannot assign to 'role' because it is a read-only property.

기록

유형 T의 속성 K 집합으로 유형을 구성합니다. 각 속성 K는 유형 T에 매핑됩니다.

interface Address {
  street: string;
  pin: number;
}

interface Addresses {
  home: Address;
  office: Address;
}

// Alternative ✅
type AddressesRecord = Record<"home" | "office", Address>;

선택하다

키가 유니온 유형 키에 있는 Type의 속성만 선택합니다.

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

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Pick<User, "name" | "age">;

생략

키가 유니온 유형 키에 있는 Type의 속성만 생략합니다.

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

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Omit<User, "password">;

들어오지 못하게 하다

키가 공용체 유형인 Excluded에 있는 속성을 제외하고 Type의 모든 속성으로 유형을 생성합니다.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type NonAdminRole = "USER" | "GUEST";

// Good practice ✅
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"

발췌

키가 통합 형식 Extract에 있는 Type의 모든 속성을 사용하여 형식을 구성합니다.

type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type AdminRole = "ADMIN";

// Good practice ✅
type Admin = Extract<Role, "ADMIN">; // "ADMIN"

Null 불가

null을 허용하지 않는 것으로 설정된 Type의 모든 속성을 사용하여 형식을 구성합니다.

type Role = "ADMIN" | "USER" | null;

// Bad practice 💩
type NonNullableRole = "ADMIN" | "USER";

// Good practice ✅
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"

당신이하지 않은 경우 읽어야합니다













자세한 내용은 .


Github , , , Medium , Stackblitz에서 나를 잡아라.