كيف اعالج هذه العلامات الحمراء تحت هذا الكود تايب سكريبت

هذه ليست أخطاء في الكود، إنما بسبب الإضافات extentions في محرر الأكواد vs code.

حاول الدخول لمتجر الإضافات ضمن vs code و البحث عن إضافات خاصة ب react وقم بتثبيتهم، وعادةً يوجد في الاسفل جهة اليمين أيقونة تحدد نوع الملف تأكد من توافقه مع لغة البرمجة التي تعمل بها و إطار العمل أيضا.

أخبرني إن بقي لديك مشكلة فيها..

بتاريخ 8 دقائق مضت قال Wael Aljamal:

هذه ليست أخطاء في الكود، إنما بسبب الإضافات extentions في محرر الأكواد vs code.

حاول الدخول لمتجر الإضافات ضمن vs code و البحث عن إضافات خاصة ب react وقم بتثبيتهم، وعادةً يوجد في الاسفل جهة اليمين أيقونة تحدد نوع الملف تأكد من توافقه مع لغة البرمجة التي تعمل بها و إطار العمل أيضا.

أخبرني إن بقي لديك مشكلة فيها..

انا قمت باضافة رياكت واعتقد ان المشكلة ليست منها لاننى عندما اسمى الملف ب js  فانه لاظهر ايرور ولكن عند تحويله ل tsx. فهنا تظهر الاخطاء .. 

عندما اقوم بوضع المؤشر مثلا على الخطأ يظهر هذا 

Property 'id' does not exist on type 'never'.ts(2339)

بتاريخ 51 دقائق مضت قال أحمد ابراهيم عبد الله:

انا قمت باضافة رياكت واعتقد ان المشكلة ليست منها لاننى عندما اسمى الملف ب js  فانه لاظهر ايرور ولكن عند تحويله ل tsx. فهنا تظهر الاخطاء .. 

عندما اقوم بوضع المؤشر مثلا على الخطأ يظهر هذا 

Property 'id' does not exist on type 'never'.ts(2339)

 

 

ربما أنت قمت بتفعيل إضافة ts lint أو غيرها، وهذه تعطي أخطاء بهذه الطريقة.. حاول إيقاف تنشيطها disable..

بتاريخ 6 ساعات قال أحمد ابراهيم عبد الله:

هذا هو الكود بالكامل 

import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants';

const initialState = {
  cartItems: [],
  totalPrice: 0,
};

const cartItems = (state = initialState, action: any) => {
  const {payload} = action;
  const item = state.cartItems.find(product => product.id === payload.id);
  switch (action.type) {
    case ADD_TO_CART:
      if (item) {
        return {
          ...state,
          cartItems: state.cartItems.map(item =>
            item.id === payload.id
              ? {
                  ...item,
                  qty: item.qty + 1,
                }
              : item,
          ),
          totalPrice: state.totalPrice + payload.price,
        };
      }

      return {
        ...state,
        cartItems: [...state.cartItems, payload],
        totalPrice: state.totalPrice + payload.price,
      };

    case REMOVE_FROM_CART:
      if (item && item.qty !== 1) {
        return {
          ...state,
          cartItems: state.cartItems.map(item =>
            item.id === payload.id
              ? {
                  ...item,
                  qty: item.qty - 1,
                }
              : item,
          ),
          totalPrice: state.totalPrice - payload.price,
        };
      } else if (item.qty === 1)
        return {
          ...state,
          cartItems: state.cartItems.filter(
            cartItem => cartItem !== action.payload,
          ),
          totalPrice: state.totalPrice - payload.price,
        };

    case CLEAR_CART:
      return {...initialState};
  }
  return state;
};

export default cartItems;

 

السبب هنا بسبب ال tslint و الذي يمكنك تعطيله عن طريق إضافة التعليق التالي في بداية الملف:

/* tslint:disable */

بتاريخ 6 ساعات قال أحمد ابراهيم عبد الله:

انا قمت باضافة رياكت واعتقد ان المشكلة ليست منها لاننى عندما اسمى الملف ب js  فانه لاظهر ايرور ولكن عند تحويله ل tsx. فهنا تظهر الاخطاء .. 

عندما اقوم بوضع المؤشر مثلا على الخطأ يظهر هذا 

Property 'id' does not exist on type 'never'.ts(2339)

أمّا عن رسالة الخطأ هذه، فهذا لأن typeScript تعتبر static and strong typed language مما يعني أننا نحتاج لتحديد أنواع البيانات (string, number, boolean, ...etc) هنا عند تعريف المتغيرات على عكس لغة JavaScript.

كما أنه عند استخدام typescript فس مشروعك ستحتاج لتثبيت بعض الحزم و كتابة بعض التعريفات "configurations" حتى يتم ترجمة الأكواد إلى javaScript في النهاية حتى يفهمها المتصفح.

لذلك إذا كنت لا تعرف typeScript أو لم تتعلمها مسبقًا، أعد تسمية الملفات لتصبح من النوع js. و ليس ts.