في React with TypeScript يمكننا استخدام طريقتين رئيسيتين لإنشاء المكونات: المكونات الوظيفية والفئوية. يسمح كلا الأسلوبين بالعمل مع الدعائم والحالة، لكن يستخدمان نماذج مختلفة قليلاً. يعزز TypeScript أيضًا سلامة التطوير من خلال توفير الكتابة الثابتة، مما يسمح لنا بتحديد شكل الدعائم والحالة بدقة.

سنلقي نظرة أدناه على أمثلة للمكونات المختلفة، باستخدام واجهات لتحديد الأنواع، لضمان اتساق التعليمات البرمجية وسهولة القراءة.

إف-1. مكون وظيفي بدون الدعائم والدولة

في هذه الحالة، يبدو المكون الوظيفي البسيط الذي لا يستخدم الخاصيات ولا الحالة كما يلي:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

يعرض هذا المكون نصًا ثابتًا فقط.

ف-2. مكون وظيفي مع الدعائم

عندما نريد تمرير البيانات من خلال الدعائم، نستخدم واجهات لتحديد شكل تلك البيانات:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

يحتوي IMyProps هنا على الاسم المستخدم لعرض التحية المخصصة.

ف-3. مكون وظيفي مع الدولة

عند استخدام الحالة في المكونات الوظيفية، نستخدم خطاف React useState:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

يستخدم هذا المكون الحالة المحلية لتتبع العدادات.

إف -4. مكون وظيفي مع الدعائم والحالة

من خلال الجمع بين الخاصيات والحالة، يمكننا الحصول على مكونات مرنة تستقبل البيانات من خلال الخاصيات وتتعامل مع الحالة داخليًا:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

يستخدم هذا المكون العدد الأولي كخاصية، وحالة داخلية لتتبع العداد الديناميكي.

ك-1. مكون الفصل بدون الدعائم والحالة

يبدو مكون الفئة بدون دعائم وحالة في React كما يلي:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

هذا مكون فئة بسيط يعرض نصًا ثابتًا.

ك-2. مكون الطبقة مع الدعائم

عندما يتلقى مكون الفصل الدعائم، فإننا نحددها باستخدام الواجهة:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

كما هو الحال مع المكون الوظيفي، نستخدم هنا الدعائم لعرض البيانات الشخصية.

ك-3. مكون الطبقة مع الدولة

بالنسبة لمكونات الفئة ذات الحالة، نحدد الحالة داخل المنشئ:

• أقواس فارغة في المنشئ

إذا كنت لا تستخدم الدعائم، فيمكنك ببساطة ترك الأقواس فارغة في المُنشئ:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• حدد {} بشكل صريح كنوع للدعائم

إذا كنت تريد أن تكون واضحًا بشأن الدعائم، فيمكنك تحديد {} كنوع:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> في كلتا الحالتين، سيعمل TypeScript وReact بشكل صحيح. إذا كان المكون الخاص بك لا يستخدم الخاصيات، فيمكنك ببساطة استخدام الأقواس الفارغة في المُنشئ، ولكن تأكد من تمرير {} في الاستدعاء الفائق لتجنب أخطاء التهيئة.

يستخدم هذا المكون الحالة لتتبع تغييرات العداد.

ك-4. مكون فئة مع الدعائم والحالة

بالنسبة لمكونات الفئة التي تستخدم كلا من الخاصيات والحالة، يمكننا الجمع بين المفهومين:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

يتلقى هذا المكون عدادًا أوليًا من خلال الدعائم، ويتعامل أيضًا مع الحالة داخليًا.

يؤدي استخدام الواجهات في TypeScript إلى تحسين الكتابة وسهولة قراءة التعليمات البرمجية، خاصة عند العمل مع هياكل بيانات أكثر تعقيدًا. باستخدام هذه الأمثلة الأساسية، لديك أساس لكتابة المكونات الوظيفية والفئوية باستخدام React وTypeScript.