در حال بارگزاری ...

پشتیبانی از تایپ اسکریپت توسط Create React App v2

توسط الهام غایب
آخرین به روز رسانی یکشنبه 28 مهر 1398

TypeScript یک ابزار قدرتمند است که به شما کمک می‌کند کدهای جاوا اسکریپت خود را امن‌تر بنویسید. همچنین، با استفاده از تایپ اسکریپت می‌توانید باگ‌ها را سریع‌تر شناسایی کنید. React یک کتابخانه متن باز و رایگان جاوا اسکریپت برای طراحی رابط کاربری و UI در طراحی صفحات ...


React یک کتابخانه متن باز و رایگان جاوا اسکریپت برای طراحی رابط کاربری و UI در طراحی صفحات وب است. ما معمولا برای شروع یک پروژه React از سریع‌ترین روش برای انجام این کار، یعنی create-react-app استفاده می‌کنیم؛ با معرفی Create React App v2 به بازار، مشخص شد که در آن به صورت رسمی از تایپ اسکریپت نیز پشتیبانی می‌شود که این یک اتفاق خوب برای توسعه دهندگان زبان جاوا اسکریپت محسوب می‌شود.

استفاده از تایپ اسکریپت در Create React App

این کار بسیار ساده است، ابتدا دستور زیر را اجرا می‌کنیم:

npx create-react-app my-typescript-app --typescript

 استفاده از Create React App v2 و TypeScript

چه پکیج‌هایی توسط دستور –typescript flag ایجاد شده و چه تغییراتی پس از آن به وجود می‌آید؟

ضمائم تایپ اسکریپت

--typescript flag پکیج اصلی TypeScript را اضافه می‌کند. همچنین، پیغام زیر نیز دریافت می‌شود:

استفاده از Create React App v2 و TypeScript

فایل tsconfing.json شامل نحوه کانفیگ کردن پروژه‌های تایپ اسکریپت است که مشابه فایل package.json برای پروژه‌های جاوا اسکریپت است.

فایل Tsconfig.json

Tsconfig.json پیش‌فرض چیز زیادی ندارد که در زمان شروع توجه ما را به خود جلب کند:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"]
}

فایل App.tsx

حال به فایل اصلی App می‌رویم که معمولا کامپوننت اصلی React می‌باشد. 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

در اینجا، همان پایه‌ی پروژه‌های جاوا اسکریپتی را داریم اما می‌توانیم typescript را در آن قرار دهیم. اجازه دهید یک مولفه typescript ایجاد کنیم.

ایجاد یک کامپوننت تایپ اسکریپت در Create React App

ابتدا، با ایجاد یککامپوننت کاربردی در فایل App.tsx شروع می‌کنیم:

function MyMessage({ message }) {
  return <div>i shall speak! my message is: {message}</div>;
}

یک کامپوننت ساده که در آن ما message را از props خارج می‌کنیم. حالا کمی کد TypeScript اضافه می‌کنیم تا به این تابع بگوییم که پارامتر message باید یک نوع string باشد.

افزودن TypeScript

اگر با TypeScript آشنا باشید، در صورتی که بخواهید کد message: string را به پیام اضافه کنید، کاری که باید انجام دهید، تعریف نوع‌ها برای تمام propsها به عنوان یک شئ است.

Type Inline

function MyMessage({ message }: { message: string }) {
  return <div>i shall speak! my message is: {message}</div>;
}

Props Object

function MyMessage(props: { message: string }) {
  return <div>i shall speak! my message is: {props.message}</div>;
}

Type Object های جداگانه

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {props.message}</div>;
}

روش‌های مختلفی برای استفاده از TypeScript در پروژه‌های ما وجود دارد. شما می‌توانید یک رابط ایجاد کرده و آن را در یک فایل جداگانه انتقال دهید تا types‌های شما در جای دیگری قرار داشته باشند. شاید به نظر برسد که این کار نیاز به کدنویسی زیادی دارد اما مزایای این کار را هم در نظر بگیرید. ما به این کامپوننت گفتیم که فقط یک نوع string را به عنوان پارامتر message قبول کند. حالا همین کار را درون کامپوننت App خود امتحان می‌کنیم.

استفاده از کامپوننت‌ های TypeScript

می‌خواهیم از کامپوننت MyMessage استفاده کنیم. وقتی می‌خواهیم از این کامپوننت استفاده کنیم، می‌بینیم که VS Code نام این کامپوننت را به محض اینکه تایپ می‌کنیم، بالا می‌آورد. نیازی نیست برگردیم و به سراغ کامپوننت برویم تا ببینیم ورودی‌های آن چه چیزی باید باشد:

استفاده از Create React App v2 و TypeScript

حالا که خیلی قابل خواندن نیست، بهتر است از هر prop به صورت جداگانه استفاده کنیم.

مشاهده Prop Types

به محض اینکه شروع به تایپ کردن message می‌کنیم، می‌توانیم ببینیم که prop باید چه چیزی باشد:

استفاده از Create React App v2 و TypeScript

مشاهده Type Errors

اگر ما یک عدد به جای message داشته باشیم، typescripe اعلام خطا کرده و به ما کمک می‌کند تا باگ‌های تایپی خود را بیابیم:

استفاده از Create React App v2 و TypeScript

اگر خطاهایی مانند زیر وجود داشته باشد، React حتی عمل کامپایل را هم انجام نمی‌دهد:

استفاده از Create React App v2 و TypeScript

مطالعه مقالات بیشتر در لیداوب:

این مقاله فقط نمونه ساده‌ای از امکاناتی است که تایپ اسکریپت در اختیار ما قرار می‌دهد. شما می‌توانید typeهایی برای تمام کامپوننت‌هاا و propهای خود ایجاد کرده و با VS Code می‌توانید آن‌ها را به راحتی بخوانید. همچنین، می‌توانید خطاها را سریع‌تر پیدا کنید چون تایپ اسکریپت با وجود خطاهای تایپی حتی اجازه کامپایل شدن پروژه را هم نمی‌دهد.

مقالات تخصصی ما در لیداوب به حرفه‌ای شدن شما در طراحی سایت و برنامه نویسی کمک می‌کند. با ما همراه باشید.

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
2.7 (3 رای)

   لطفا صبر کنید ...