13タイプミスユーティリティ:開発者のためのカンニングペーパー

タイプスクリプトはタイプチェックに関して非常に強力です、しかし、若干のタイプが他のタイプの部分集合であるとき、時々、それは退屈です.

例を挙げれば、2つの応答タイプがあります。

ユーザプロファイラ

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

LoginResponse

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

同じコンテキストLoginResponseとUserProfileResponseの型を定義する代わりに、userProfileResponseの型を定義し、LoginResponseのプロパティを選択できます.

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

より良いコードを書くのを助けるいくつかのユーティリティ機能を理解しましょう.

大文字

型のすべてのプロパティを持つ型を大文字で構成します.

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

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

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

小文字

型のすべてのプロパティを小文字に構成します.大文字の反対.

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

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

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

資本化する

型設定のすべてのプロパティを持つ型を構築します.

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

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

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

非資本化する

uncapitalizeする型集合のすべてのプロパティを持つ型を構築します.資本の反対.

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

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

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

部分

型のすべてのプロパティを持つ型を任意に設定します.

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

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

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

必要

必要に応じて型集合のすべてのプロパティからなる型を構築します.部分の反対.

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

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

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

読み込み専用

ReadOnly型のすべてのプロパティからなる型を構築します.

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>;

ピック

ユニオンタイプキーにキーがある型のプロパティのみを選択します.

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

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

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

省略する

ユニオン型キーにキーがある型のプロパティだけを省略します.

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

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

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

除外する

型のすべてのプロパティを持つ型を構成します.

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

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

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

エキス

UNION型抽出のキーの型のすべてのプロパティを持つ型を構築します.

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

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

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

無効の

型のすべてのプロパティを持つ型を非nullに設定します.

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

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

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

あなたがいないならば、読まなければなりません




より多くの内容.
Github、Medium、Stackblitzでキャッチしてください.