خطأ في مكون HOC في React بإستخدام typescript

Adam Ebrahim · 13 مارس 2021

مرحبًا، أحاول عمل مكون HOC في React بإستخدام typescript لكي أتحكم في نظام Authentication لكن عند تنفيذ الكود يظهر لي الخطأ التالي:

auth.ts:12:3 - error TS1005: '>' expected.
12     return <WrappedComponent {...this.props} />;

هنا الكود الخالص بي والذي يظهر هذا الخطأ في ملف auth.ts:

import * as React from 'react';
import { context } from 'next';

export const withAuthSync = (WrappedComponent: ComponentExtra) => class extends React.Component {
  static async getInitialProps(ctx: context) {
    const authToken = auth(ctx);
    const allProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx));
    return { ...allProps, authToken };
  }

  render() {
    // السطر التالي هو ما يسبب الخطأ على ما أظن
    return <WrappedComponent {...this.props} />;
  }
};

لا أعلم لماذا يتم إظهار كود JSX على أنه خطأ

سامح أشرف · 13 مارس 2021

لا توجد مشكلة في الكود في حد ذاته فالكود يعمل بشكل صحيح، لكن يخبرك مترجم Typescript أن هناك خطأ في السطر 12 لأنه لا يفهم صيغة JSX وذلك لأن JSX ليست معتمدة في لغة Typescript بشكل تلقائي، ويمكنك أن تلاحظ ذلك من صيغة الملف auth.ts والذي من المفترض أن يحتوي على كود Typescript فقط لكنك أضفت كود JSX، ولحل هذه المشكلة يجب تحويل اسم الملف إلى auth.tsx لكي يفهم المترجم صيغة كود JSX.