وحید نصیری وحید نصیری
پیاده سازی پروژه‌های React با TypeScript - قسمت هشتم - تعیین نوع کامپوننت‌های کلاسی
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه
با ارائه‌ی React Hooks، استفاده‌ی از کامپوننت‌های کلاسی، کمتر و کمتر شده‌اند. اما جهت تکمیل و خاتمه‌ی سری جاری، این نوع را نیز در این قسمت بررسی می‌کنیم.


تعیین نوع props و state در کامپوننت‌های کلاسی

برای این منظور ابتدا فایل جدید src\components\BigC.tsx را ایجاد کرده و سپس توسط میانبر rcc، ساختار ابتدایی این کامپوننت را ایجاد می‌کنیم. در ادامه آن‌را در کامپوننت src\App.tsx استفاده خواهیم کرد:


یکی از مزایای دیگر کار با تایپ‌اسکریپت، فعال شدن intellisense مرتبط با افزونه‌هایی مانند typescript hero و auto import است که نمونه‌ای از آن‌را در تصویر فوق مشاهده می‌کنید. فقط کافی است نام المان مرتبط را نوشت و سپس با استفاده از افزونه‌های یاد شده، به صورت خودکار import آن‌را اضافه کرد.

پس از افزودن المان این کامپوننت، اگر سعی کنیم یک props را برای آن تعریف کنیم، بلافاصله خطای تعریف نشده بودن آن‌را دریافت خواهیم کرد:


در اینجا نیز همانند کامپوننت‌های تابعی، باید ابتدا نوع Props را تعیین کرد و تنها تفاوت آن، روش معرفی این type جدید به کامپوننت است:
import React, { Component } from "react";

type Props = {
  title: string;
};

type State = {
  status: string;
};

export default class BigC extends Component<Props, State> {
  render() {
    return (
      <div>
        <h1>I'm in a class component</h1>
      </div>
    );
  }
}
در کامپوننت‌های کلاسی، نوع State و نوع Props، از طریق آرگومان‌های جنریک Component، به نحوی که مشاهده می‌کنید، مشخص می‌شوند.
مابقی نکات آن مانند props اختیاری و غیره، تفاوت خاصی را با کامپوننت‌های تابعی که پیشتر بررسی کردیم، ندارند و یکی هستند.


مقایسه‌ای بین Types و Interfaces

در این سری بیشتر از types استفاده شد، تا اینترفیس‌های تایپ‌اسکریپت. برای مثال بجای نوع زیر:
type State = {
   rValue: boolean;
};
می‌توان از اینترفیس معادل آن نیز استفاده کرد:
interface State {
  rValue: boolean;
}
اما از کدامیک باید استفاده کرد؟
در تایپ‌اسکریپت، از type بیشتر برای تعریف یک نوع جدید استفاده می‌شود، اما از اینترفیس‌ها برای تعریف موجودیت‌ها و entities. برای مثال از type می‌توان برای تعریف نامی برای نوع‌های primitive, union, intersection نیز استفاده کرد، اما اینترفیس‌ها همواره برای تعیین نوع اشیاء مورد استفاده قرار می‌گیرند. نمی‌توان دو نوع هم‌نام را تعریف کرد، اما اگر دو اینترفیس هم نام را تعریف کنید، با هم یکی می‌شوند. نوع‌ها برخلاف اینترفیس‌ها قابلیت پیاده سازی نداشته و بیشتر جنبه‌ی یک اعلان را دارند و ... در نهایت استفاده‌ی از هر کدام بیشتر یک انتخاب شخصی است.


منابع تکمیلی

یکی از بهترین منابع تکمیلی استفاده‌ی از TypeScript در React، مخزن کد react-typescript-cheatsheet است که به همراه مجموعه‌ای از نکات مرتبط است.
‫۴ سال و ۳ ماه قبل، دوشنبه ۱۹ خرداد ۱۳۹۹، ساعت ۱۴:۱۰
۱۲۶۲
۰
JavaScriptTypeScriptReact
مطالب مشابه