TypeScript - معنى توقيع نوع الإرجاع لطريقة createAction في NgRx

لقد كنت أراجع وثائق NgRx لطريقة createAction كما في الرابط أدناه: التحميلات الزائدة لطريقة createAction

لست قادراً على فهم ما يلي في توقيع النوع لهذا الأسلوب، وتحديداً نوع الإرجاع لطريقة createAction: ما هو

() => TypedAction<T>

في هذا التوقيع:

 ActionCreator<T, () => TypedAction<T>>

لا أرى أي إشارة إلى TypedAction؟ هل يعني ذلك أي كائن له شكل نوع فعل محدد؟

ما أفهمه من الحرف T في التوقيع أعلاه لنوع الإرجاع هو أنه نوع عام لدالة ActionCreator والتي ستُرجع Action من نوع T عند استدعائها. لكن لست متأكدًا من ما يشير إليه الوسيط النوعي الآخر باستثناء أنه يبدو أنه نوع من الدالة التي تُرجع TypedAction من نوع T. أود أن أعرف مثالًا واقعيًا.

الإجابة رقم 1

TypedAction هو واجهة عامة تمتد من نوع Action عن طريق إضافة خاصية type للقراءة فقط.

export declare interface TypedAction<T extends string> extends Action {
  readonly type: T;
}

ActionCreator TypedAction> - يخبرنا أن لدينا مصنعًا يُرجع كائن TypedAction () => ({ type: T})

دعنا نحدد منشئ الإجراء:

export const logout = createAction('[Auth] Logout');

دالة createAction معرفة في ملف action_creator.ts.

export function createAction<T extends string>(
  type: T
): ActionCreator<T, () => TypedAction<T>>;

من خلال التصريح يمكننا القول أن createAction سيعيد دالة تقوم بدورها بإرجاع كائن يحتوي على خاصية type من نوع سلسلة في حالتنا على شكل <T extends string>

لنغص قليلاً في التنفيذ الفعلي. عندما لا توفر حمولة لمنشئ الإجراء الخاص بك يتم تنفيذ الكود التالي:

export function createAction<T extends string, C extends Creator>(
  type: T,
  config?: { _as: 'props' } | C
): Creator {
...
    case 'empty':
      return defineType(type, () => ({ type }));
...
}

و defineType هو:

function defineType(type: string, creator: Creator): Creator {
  return Object.defineProperty(creator, 'type', {
    value: type,
    writable: false,
  });
}

defineType يقبل نوعاً ('[Auth] Logout') ومنشئًا - () => ({ type }). يعيد المنشئ نفسه ولكن مع خاصية جديدة type. لذلك، فإن استدعاء logout.type و logout().type سيعيدان نفس القيمة - '[Auth] Logout'

في وقت لاحق، في ملف reducer_creator.ts يسمح لنا باستخراج نوع ActionCreator (مثل "[Auth] Logout" في حالتنا)، وربطه بدالة المخفض وتنفيذه

تحديث: بما أن إجابة السؤال أصبحت كبيرة جدًا، قررت كتابة منشور مدونة حول كيفية عمل منشئي الإجراءات في NgRx