Property

في بداية الأمر، يجب أن ندرك أن ES6 يوفر لنا العديد من الطرق الفعالة للقيام بمهام مثل البحث عن كائن في مصفوفة بناءً على إحدى خصائصه. في هذه الحالة، نريد البحث عن الكائن الذي يحمل اسم المستثمر في مصفوفة newData. يمكننا استخدام دالة find التي تقدمها JavaScript للقيام بذلك. ولكي نقوم بإضافة القيمة المناسبة لنستخدم علامات تبويب للتنظيم.

javascriptCopy code
for (let obj of originalData) {
    let currinvestor = obj.investor;
    let currinvestment = obj.investment;
    let currvalue = obj.value;

    // البحث عن الكائن في newData الذي يمثل المستثمر الحالي
    let investorObj = newData.find(item => item.investor === currinvestor);

    // إضافة قيمة الاستثمار للنوع المناسب
    if (investorObj) {
        investorObj[currinvestment] += currvalue;
    }
}

console.log(newData); // لنرى النتيجة في الكونسول

ما يحدث هنا هو أننا نقوم بالمرور عبر مصفوفة originalData باستخدام حلقة for..of، وفي كل دورة من الحلقة، نقوم بالبحث عن الكائن المناسب في newData باستخدام find. إذا تم العثور على المستثمر، نضيف قيمة الاستثمار إلى النوع المناسب. وبعد الانتهاء من الحلقة، سيكون newData محدثًا بالقيم المناسبة.

بالطبع، دعنا نكمل المقال بتوضيح المفاهيم بشكل أكبر ونقدم بعض الأمثلة الإضافية لتوضيح الفكرة بشكل أفضل.

في الكود السابق، استخدمنا حلقة for..of للمرور عبر كل كائن في originalData. في كل دورة من الحلقة، قمنا بتخزين قيم خصائص المستثمر الحالي في متغيرات مؤقتة، مثل currinvestor و currinvestment و currvalue.

ثم، استخدمنا دالة find للبحث عن كائن في مصفوفة newData يمثل المستثمر الحالي. إذا تم العثور على المستثمر، قمنا بإضافة قيمة الاستثمار إلى النوع المناسب (currinvestment). يتم ذلك عن طريق زيادة قيمة الخاصية المناسبة في الكائن الموجود في newData.

ولكن، قد تواجه مشكلة إذا لم يتم العثور على المستثمر في newData، مما يؤدي إلى أنه سيتم إضافة undefined إلى currvalue، وبالتالي ستكون العملية غير فعالة. لذا، يمكن أن نقوم بإضافة شرط إضافي للتحقق مما إذا كان المستثمر موجودًا أم لا قبل إجراء الإضافة.

بالإضافة إلى ذلك، يمكن أن نقوم بتحسين الكود عن طريق استخدام دالة reduce بدلاً من حلقة for..of للتعامل مع originalData. هذا يمكن أن يجعل الكود أكثر إنسيابية وأقل تعقيدًا.

إليك الكود المحسن:

javascriptCopy code
const newData = originalData.reduce((accumulator, currentValue) => {
    const { investor, investment, value } = currentValue;
    const investorObj = accumulator.find(item => item.investor === investor);

    if (investorObj) {
        investorObj[investment] += value;
    } else {
        accumulator.push({ investor, [investment]: value, options: 0, savings: 0 });
    }

    return accumulator;
}, [
    { investor: "Sue", stocks: 0, options: 0, savings: 0 },
    { investor: "Rob", stocks: 0, options: 0, savings: 0 },
    { investor: "Liz", stocks: 0, options: 0, savings: 0 }
]);

console.log(newData); // نطبع النتيجة في الكونسول

هذا الكود يستخدم دالة reduce لدمج originalData إلى newData، ويتحقق من وجود المستثمر في كل دورة من الحلقة. إذا تم العثور على المستثمر، يتم إضافة قيمة الاستثمار. وإذا لم يتم العثور على المستثمر، يتم إضافة كائن جديد لـ newData يمثل هذا المستثمر مع قيمة الاستثمار الجديدة.

بهذه الطريقة، يتم إنشاء مصفوفة جديدة تحتوي على مجموع قيم الاستثمار لكل شخص، مما يوفر لنا نظرة شاملة عن كيفية توزيع الاستثمارات بين المستثمرين.

الخطأ الذي تحصل عليه يحدث لأن TypeScript يفترض أن الخصائص التي تقوم بالوصول إليها باستخدام النقطة (images.main في حالتك) يجب أن تكون معرفة مسبقاً في نوع البيانات الذي تم تحديده (في هذه الحالة Images). في الواقع، TypeScript لا يعرف ما إذا كانت الخاصية ‘main’ موجودة أم لا، لأن الفهرس الذي تعرفه ([key: string]: string;) يسمح بأي مفتاح من نوع string وليس فقط ‘main’.

لحل هذه المشكلة دون الحاجة لاستخدام الفهرس مباشرة، يمكنك استخدام نوع مخصص للصورة الرئيسية بدلاً من استخدام فهرس. على سبيل المثال:

typescriptCopy code
interface Images {
  main: string;
  [key: string]: string;
}

function getMainImageUrl(images: Images): string {
  return images.main;
}

في هذا الشكل، تقوم بتعريف الخاصية ‘main’ بشكل صريح كجزء من نوع Images، وبالتالي TypeScript سيكون على علم بوجود هذه الخاصية دون إعطاء خطأ.

تأكد من تحديث نسخة TypeScript إلى أحدث إصدار ممكن، حيث قد تكون هذه المشكلة قديمة وتم حلها في الإصدارات الأحدث. قم بتحديث TypeScript إلى الإصدار الأخير باستخدام npm (Node Package Manager) باستخدام الأمر التالي:

Copy code
npm install -g typescript

بعد التحديث، قم بتشغيل ملف TypeScript الخاص بك مرة أخرى وتحقق مما إذا كانت المشكلة قد حُلت.

إذا استمرت المشكلة، يمكنك استخدام الفهرس مع اتخاذ بعض التدابير الاحترازية للتأكد من عدم وجود أخطاء في تشغيل البرنامج، على سبيل المثال:

typescriptCopy code
function getMainImageUrl(images: Images): string {
  return images && images.main ? images.main : '';
}

هذا التغيير يتحقق من وجود الكائن images والخاصية main قبل الوصول إليها، وإذا كانت غير موجودة، يتم إرجاع سلسلة فارغة.

To access the ProductName property from the serces object in JavaScript, you can use dot notation (.) since serces is an object with a property named info which is also an object. Here’s how you can do it:

javascriptCopy code
// Assuming `serces` is your object
let productName = serces.info.ProductName;
console.log(productName); // This will log "test product al" to the console

In this code, serces.info accesses the info object inside serces, and serces.info.ProductName then accesses the ProductName property inside the info object.

للوصول إلى قيمة خاصية ProductName من الكائن serces في جافا سكريبت، يمكنك استخدام المفتاح info ثم استخدام المفتاح ProductName. يمكنك فعل ذلك باستخدام الرمز التالي:

javascriptCopy code
// فرضاً أن `serces` هو الكائن الخاص بك
let productName = serces.info.ProductName;
console.log(productName); // سيقوم هذا بطباعة "test product al" في وحدة التحكم

في هذا الكود، يتم الوصول إلى الكائن info داخل الكائن serces باستخدام serces.info، ثم يتم الوصول إلى خاصية ProductName داخل الكائن info باستخدام serces.info.ProductName.

في مشكلتك الحالية مع TypeScript، يظهر خطأ يتعلق بخاصية ‘src’ التي لا توجد على نوع ‘HTMLElement’. لفهم الخطأ وحله، يتعين عليك فهم كيف يعمل TypeScript في التعامل مع أنواع الكائنات وكيفية تعريف وتحديد الأنواع.

عندما تعرف المتغير element بأنه من نوع HTMLElement، يتوقع TypeScript أن يحتوي هذا الكائن على الخصائص القياسية التي تنتمي إلى HTMLElement. ومع ذلك، لا يتوفر خاصية ‘src’ على ‘HTMLElement’ بشكل افتراضي. لتفادي هذا الخطأ، يجب أن تقوم بتعريف المتغير element بنوع يحتوي على الخاصية ‘src’.

في حالتك، يمكنك تحديد element ككائن من نوع HTMLImageElement بدلاً من HTMLElement. يتضمن HTMLImageElement خاصية ‘src’ بشكل افتراضي. يمكنك القيام بذلك على النحو التالي:

typescriptCopy code
element: HTMLImageElement; /* تعريف العنصر بنوع HTMLImageElement */

// ...

this.element = document.createElement('img') as HTMLImageElement; /* إنشاء عنصر صورة */

// ...

display() {
   this.element.src = this.file; /* هذا السطر لن يسبب خطأ الآن */
   this.element.style.position = "absolute";
   this.element.style.top = this.pointX.toString() + "px";
   this.element.style.left = this.pointY.toString() + "px";

   document.body.appendChild(this.element);
};

الآن، عندما تعرف element ك HTMLImageElement، لن يظهر خطأ الخصائص غير الموجودة، ويمكنك تعيين قيمة ‘src’ دون مشاكل. يجب أن يساعدك هذا على تجنب الخطأ الحالي الذي تواجهه مع TypeScript.

تحتاج إلى فهم أعمق لكيفية تعامل TypeScript مع أنواع الكائنات وكيف يمكنك تعيين أنواع محددة للمتغيرات لتجنب الأخطاء المحتملة. يعتبر TypeScript لغة برمجة تعتمد على تحليل الأنواع (TypeScript is a statically typed superset of JavaScript)، مما يعني أنها تتحقق من الأنواع في وقت التصميم قبل تشغيل الكود.

في المثال الحالي، قمت بتحديد نوع المتغير element كـ HTMLImageElement، ولكن هناك المزيد للاستفادة من TypeScript:

1. تحديد الأنواع للوسائط (Parameters) والقيمة المُرجَعَة (Return Type):
   يمكنك تحديد الأنواع لوسائط الدوال وقيمة العودة، مما يجعل التعاون مع الكود أكثر فعالية. على سبيل المثال:

   typescriptCopy code
   display(file: string, pointX: number, pointY: number): void {
       // ...
   }
   

   هذا يجعل الدالة display تتوقع وسائط محددة النوع ولا ترجع قيمة.

2. استخدام Interface:
   يمكنك استخدام واجهات (interfaces) لتعريف هياكل البيانات وأنواع الكائنات. على سبيل المثال:

   typescriptCopy code
   interface DisplayElement {
       element: HTMLImageElement;
       file: string;
       pointX: number;
       pointY: number;
   }
   
   class YourClass implements DisplayElement {
       element: HTMLImageElement;
       file: string;
       pointX: number;
       pointY: number;
   
       constructor(file: string, pointX: number, pointY: number) {
           // ...
       }
   
       display(): void {
           // ...
       }
   }
   

   هذا يسهل تنظيم وفهم هيكل الكود.

3. استخدام TypeScript Compiler Options:
   يمكنك تكوين TypeScript باستخدام ملف tsconfig.json لتحديد خيارات الكمبايل، مثل مستوى التحقق من الأنواع ومستوى التفاصيل الذي يظهر في الرسائل. على سبيل المثال:

   jsonCopy code
   {
       "compilerOptions": {
           "strict": true,
           "noImplicitAny": true,
           // ...
       }
   }
   

   هذا يضمن تشديد مستوى التحقق من الأنواع.

4. تفعيل strictNullChecks:
   يمكنك تفعيل خاصية strictNullChecks في tsconfig.json لتفادي قيم null أو undefined غير مرغوب فيها.

   jsonCopy code
   {
       "compilerOptions": {
           "strictNullChecks": true,
           // ...
       }
   }
   

   هذا يضمن أن لا تكون القيمة null أو undefined خيارة للأنواع التي تم تحديدها.

باستخدام هذه الأفكار، يمكنك تعزيز تجربة التطوير الخاصة بك وتجنب الأخطاء المحتملة في المستقبل.