รูปแบบการใช้งานจริงของยูเนียนและอินเตอร์เซกชัน

ยินดีต้อนรับ

รูปแบบข้อมูลเสริม

type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

ตัวสร้าง/มิกซ์อินด้วยอินเตอร์เซกชัน

type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

ยูเนียนสำหรับปรับรูปแบบอินพุตให้เป็นมาตรฐาน

function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

ประเภทมีตราประทับด้วยอินเตอร์เซกชัน

type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

รูปแบบ WithOptional

type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

พร็อพส์ของคอมโพเนนต์หลายรูปแบบ

type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

การขยายประเภทจากผู้ให้บริการภายนอก

import type { Request } from 'express';
type AuthRequest = Request & { user: User };

การรวมยูเนียนกับอินเตอร์เซกชัน

type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

ตัวป้องกันประเภทสำหรับสมาชิกยูเนียน

function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

พฤติกรรมการแจกแจงในอินเตอร์เซกชัน

type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน