الحالة المشتقة والمنتقون مع الأنواع
اكتبوا دوال منتقِية محددة الأنواع للحالة المحسوبة
الحالة المشتقة والمنتقون مع الأنواع درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ما الحالة المشتقة؟
الحالة المشتقة هي حالة تُحسَب من حالة أخرى، مثل تصفية قائمة أو جمع قيم. وتغلف المحددات هذا الحساب، ويمكن حفظ نتائجها مؤقتًا لتحسين الأداء.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);دوال محدد مُنمّطة
اكتبوا دوال محدد ذات أنواع إرجاع صريحة لتوضيح ما تحسبه ومنع انحراف الأنواع.
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect: محددات محفوظة مؤقتًا
تنشئ مكتبة reselect (المستخدمة من RTK) محددات تحفظ النتائج مؤقتًا ولا تعيد الحساب إلا عند تغيّر مدخلاتها.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]محددات مُنمّطة ذات معاملات
تقبل محددات المُصنّع وسيطات وتعيد محددًا، وهي مفيدة للبحث عن كيانات محددة.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));محددات Zustand
في Zustand، مرّروا محددًا مُنمّطًا إلى خطاف المخزن لقراءة الجزء المطلوب فقط.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]الحالة المشتقة في React باستخدام useMemo
بالنسبة إلى الحالة المشتقة المحلية، استخدموا useMemo مع تعليقات أنواع مناسبة لحفظ القيم المحسوبة مؤقتًا داخل المكوّنات.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);تركيب المحددات
أنشئوا محددات معقدة بتركيب محددات أبسط؛ إذ يتولى reselect حفظ النتائج مؤقتًا عبر سلسلة التركيب.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Zustand آمن من ناحية الأنواع مع immer للتحديثات المشتقة
عند حساب تحديثات مشتقة، استخدموا immer لتعديل حالة مسودة؛ ويضمن TypeScript لمس الخصائص الصالحة فقط.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));استنتاج نوع إرجاع المحدد
يستنتج TypeScript أنواع الإرجاع من المحددات، لكن التعليقات الصريحة تحسّن سهولة القراءة وتمنع ظهور any غير المقصود من التعبيرات الديناميكية.
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);اختبار المحددات
المحددات دوال محضة؛ اختبروها بتمرير حالة وهمية والتحقق من نوع الناتج وقيمته.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});مراجعة: المحددات المُنمّطة
المحددات المُنمّطة: اكتبوا دوالًا تتلقى RootState مع أنواع إرجاع صريحة، واستخدموا createSelector لحفظ النتائج مؤقتًا، وركّبوا المحددات للاشتقاقات المعقدة، واختبروها باعتبارها دوالًا محضة.
تحقق سريع
ما الميزة التي يوفرها createSelector مقارنةً بدالة محدد عادية؟
ما تعلمتموه
تتلقى المحددات المُنمّطة RootState وتعيد قيمًا مشتقة ذات أنواع دقيقة. استخدموا createSelector لحفظ النتائج مؤقتًا، وركّبوا المحددات للمنطق المعقد، واكتبوا محددات مُصنّع لعمليات البحث عن كيانات ذات معاملات.
تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 101
- الدروس
- 352
الأسئلة الشائعة
هل درس «الحالة المشتقة والمنتقون مع الأنواع» مجاني؟
نعم — نص درس «الحالة المشتقة والمنتقون مع الأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «الحالة المشتقة والمنتقون مع الأنواع»؟
اكتبوا دوال منتقِية محددة الأنواع للحالة المحسوبة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الحالة المشتقة والمنتقون مع الأنواع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تحديد أنواع شرائح Redux Toolkit وThunks
- أنماط تحديد أنواع مخازن Zustand
- XState: آلات حالات محددة الأنواع
- الحالة المشتقة والمنتقون مع الأنواع