أنماط حرب العصابات في TypeScript

interface ProductDetails {
  name: string;
  seller: { name: string };
  availability: Array<{ warehouseId: string; quantity: number }>;
  reviews: Array<{ authorId: number; stars: number }>;
}

interface ProductDetails {
  name: string;
  seller: Seller;
  reviews: Reviews[];
  availability: Availability[];
}
interface Seller { name: string; }
interface Availability { warehouseId: string; quantity: number; }
interface Reviews { authorId: number; stars: number; }
}

بشكل عام، هذا النهج رائع. لكنه لا يخلو من العيوب.

- **القراءة** ممتازة في البداية؛ ومع ذلك، _يمكن_ أن تتأثر مع نمو حجم وعدد الأنواع.
- الالتزام بمبدأ DRY بلا هوادة، ولكن بأي ثمن؟ (المزيد عن هذا لاحقًا.)
- قد تتأثر تجربة المطور لأن تلميحات الأدوات تكون أقل إفادة.

> ⚠️ منذ (تقريبًا) TypeScript v3، يقوم خادم اللغة بقطع تلميحات الأدوات، متجاهلاً الخصائص المتداخلة.
> 💡 هناك حيل لتحسين الأمور قليلاً. حاول الضغط على `Cmd أو Ctrl`، ثم مرر المؤشر فوق أسماء أنواع مختلفة - يجب أن ترى على الأقل 'طبقة' إضافية واحدة من الخصائص في التلميح.

لماذا يجب أن نختار بين هذين الأسلوبين؟ (النوع الكبير مقابل الأنواع الفرعية المسماة).

### الأسلوب #1: لماذا لا يكون الكل

هل يمكننا الحصول على كل شيء؟

- وضوح الأنواع "الكبيرة"؟
- بالإضافة إلى الأنواع الفرعية المسماة؟
- بدون تكرار؟

> ✅ نعم! 🎉

<!-- ### Some things to consider

- How do you represent a `one-to-one` relationship like `Product` -> `Seller`?
- What about `one-to-many` relationships? Say `Reviews`, or `Photos`?
- Let Prisma handle it? (Not a bad idea, but this article is secretly about learning some TypeScript...) -->

<!-- This approach is an exercise in NEVER duplicating Model field names. Along the way, I think the "big picture" more obvious (in one spot). starting with the largest, highest-level type, and deriving the simpler types from it. -->

<!-- When provided with some structured array/object data, many TypeScript coders feel the urge to create types. Loads of types. Eventually a cascade of layers forms, made up of simpler types building ever more complex types.

Or maybe you are the type to start at the highest-level type, scaffolding enough to write the next sub-type in the tree? -->

```tsx
export interface ProductDetails {
  name: string;
  seller: { name: string };
  reviews: Array<{ authorId: number; stars: number }>;
  availability: Array<{ warehouseId: string; quantity: number }>;
}
export type Seller = ProductDetails["seller"];
export type Review = ProductDetails["reviews"][number];
export type Availability = ProductDetails["availability"][number];

interface TodoModel {
  text: string;
  complete: boolean;
}
interface InstanceMixin {
  id: number;
}
/** TodoDraft represents Form state, possibly all undefined */
export type TodoDraft = Partial<TodoModel>;
/** Todo represents a Todo instance record from the database */
export type Todo = TodoModel & InstanceMixin;

interface User {
  id: number;
  name: string;
  bio: string;
  social: Record<"facebook" | "instagram" | "github", URL>;
}

// Core User fields (say for a <form>)
interface UserBase {
  name: string;
  bio: string;
  social: Record<"facebook" | "instagram" | "github", URL>;
}
// Fields from the database
interface InstanceMixin {
  id: number;
  createdAt: Date;
  updatedAt: Date;
}
// A User **instance** - with all fields
type UserInstance = InstanceMixin & UserBase;

interface UserBase {
  name: string;
  bio: string;
  social: Record<"facebook" | "instagram" | "github", URL>;
}
interface InstanceMixin {
  id: number;
  createdAt: Date;
  updatedAt: Date;
}
/** User payload for signup, including `password` field */
export type UserPayload = UserBase & { password: string };
/** Represents User type returned from server. */
export type UserInstance = UserBase & InstanceMixin;

// `src/types/mixins.d.ts`
namespace ModelMixins {
  interface Identity {
    id: number;
  }
  interface Timestamp {
    createdAt: Date;
    updatedAt: Date;
  }
  type Instance = ModelMixins.Identity & ModelMixins.Timestamp;
  interface HashedPassword {
    passwordHash: string;
  }
  interface InputPassword {
    password: string;
  }
}

// `src/types/user.d.ts`
export interface UserBase {
  name: string;
  bio: string;
  social: Record<"facebook" | "instagram" | "github", URL>;
}
// Single `User` type, using Type Union to dynamically
//  represent the pre- & post-creation states.
export type User =
  | (UserBase & ModelMixins.Instance & ModelMixins.HashedPassword)
  | (UserBase & ModelMixins.InputPassword);

/** User payload for signup, including `password` field */
export type UserPayload = UserBase & ModelMixins.Instance & ModelMixins.HashedPassword;
/** Represents User type returned from server. */
export type UserInstance = UserBase & ModelMixins.InputPassword;

function upsert(user: User) {
  if ("id" in user) {
    // TypeScript knows `user` here has fields from Instance (id, createdAt, etc)
    return updateUser(user.id, user);
  } else {
    // TypeScript knows this must be the `UserBase & ModelMixins.InputPassword` version of user.
    return createUser(user);
  }
}