آموزش React & TypeScript - راهنمای عملی

سرفصل ها و درس ها

معرفی Introduction

• به دوره خوش آمدید! Welcome To The Course!

• چرا React و TypeScript؟ Why React & TypeScript?

• درباره دوره و محتوای دوره About The Course & Course Content

• چگونه از دوره بیشترین بهره را ببریم How To Get The Most Out Of The Course

• جامعه یادگیری و منابع دوره Learning Community & Course Resources

• ایجاد و استفاده از پروژه های React + TypeScript Creating & Using React + TypeScript Projects

مبانی TypeScript و مفاهیم اصلی TypeScript Basics & Core Concepts

• معرفی ماژول Module Introduction

• راه اندازی TypeScript و استفاده از TypeScript TypeScript Setup & Using TypeScript

• کار با انواع: استنتاج تایپ و حاشیه نویسی نوع صریح Working with Types: Type Inference & Explicit Type Annotations

• انواع اولیه اولیه Basic Primitive Types

• فراخوانی کامپایلر TypeScript Invoking The TypeScript Compiler

• ترکیب انواع اتحادیه انواع (انواع جایگزین) Combining Types Union Types (Alternative Types)

• کار با Object Types Working with Object Types

• کار با انواع آرایه Working with Array Types

• افزودن انواع به توابع - پارامترها و انواع ارزش بازگشتی Adding Types to Functions - Parameter & Return Value Types

• تعریف انواع توابع Defining Function Types

• ایجاد انواع سفارشی/نام مستعار نوع Creating Custom Types / Type Aliases

• تعریف انواع اشیا با رابط ها Defining Object Types with Interfaces

• رابط ها در مقابل انواع سفارشی Interfaces vs Custom Types

• انواع ادغام Merging Types

• خاص بودن با انواع تحت اللفظی Being Specific With Literal Types

• افزودن محافظ های نوع Adding Type Guards

• محافظ تایپ و تنگ کردن تایپ - نگاهی دقیق تر Type Guards & Type Narrowing - A Closer Look

• ایجاد حس از انواع عمومی Making Sense Of Generic Types

• خلاصه Summary

استفاده از TypeScript با React - Essentials Using TypeScript with React - Essentials

• معرفی ماژول Module Introduction

• ایجاد یک پروژه React + TypeScript Creating a React + TypeScript Project

• درک نقش tsconfig.json Understanding the Role of tsconfig.json

• ساختن اولین جزء و مواجهه با یک نوع گمشده Building a First Component & Facing a Missing Type

• تعریف انواع لوازم کامپوننت Defining Component Props Types

• ذخیره سازی Props Types به عنوان یک نوع سفارشی یا رابط Storing Props Types as a Custom Type or Interface

• تعریف یک نوع برای Props با "کودکان" Defining a Type for Props with "children"

• لوازم جانبی و لوازم «کلیدی» ویژه Component Props & The Special "key" Prop

• روش دیگری برای تایپ کامپوننت ها Another Way Of Typing Components

• تمرین: ایجاد یک کامپوننت هدر Exercise: Creating a Header Component

• با استفاده از useState() و TypeScript Using useState() and TypeScript

• کار با ایالت و ارزش‌های مبتنی بر دولت Working with State & Outputting State-based Values

• تمرین دیگری و استفاده مجدد از انواع در میان فایل ها Another Exercise & Reusing Types Across Files

• عبور توابع به عنوان ارزش - به روشی ایمن از نظر نوع Passing Functions as Values - In A Type-Safe Way

• مدیریت و تایپ رویدادها Handling & Typing Events

• کار با انواع رویدادهای عمومی Working with Generic Event Types

• استفاده از useRef() با TypeScript Using useRef() with TypeScript

• مدیریت ورودی کاربر به روشی کاملاً ایمن Handling User Input In A Type-Safe Way

• خلاصه Summary

انواع اجزای پیشرفته - اجزای پویا، اجزای چند شکلی و موارد دیگر Advanced Component Types - Dynamic Components, Polymorphic Components & More

• معرفی ماژول Module Introduction

• ساختن یک مؤلفه پویاتر و انعطاف پذیرتر Building a More Dynamic & Flexible Component

• مشکل: اجزای انعطاف پذیر با ترکیبات پایه مورد نیاز Problem: Flexible Components With Required Prop Combinations

• راه حل: ساخت اجزا با اتحادیه های تبعیض آمیز Solution: Building Components with Discriminated Unions

• پیش به سوی یک پروژه جدید Onwards To A New Project

• ساخت یک کامپوننت پایه Wrapper Building a Basic Wrapper Component

• ساخت اجزای Wrapper بهتر با ComponentPropsWithoutRef Building Better Wrapper Components with ComponentPropsWithoutRef

• ساخت کامپوننت Wrapper که عناصر مختلف را ارائه می کند Building a Wrapper Component That Renders Different Elements

• کار با گزاره‌های نوع و مواجهه با محدودیت‌های TypeScript Working with Type Predicates & Facing TypeScript Limitations

• ساخت مولفه چند شکلی پایه Building a Basic Polymorphic Component

• ساخت یک مؤلفه چند شکلی بهتر با ژنریک Building a Better Polymorphic Component with Generics

• مثال‌ها: ایده‌های اجزای بیشتر Examples: More Component Ideas

• استفاده از forwardRef با TypeScript Using forwardRef with TypeScript

• ساختن کامپوننت Wrapper دیگر (کامپوننت فرم سفارشی) Building Another Wrapper Component (Custom Form Component)

• منطق به اشتراک گذاری با "ناشناخته" و ارسال را تایپ کنید Sharing Logic with "unknown" & Type Casting

• جایگزین: اجتناب از نوع ریخته گری با "as" Alternative: Avoiding Type Casting with "as"

• افشای APIهای مؤلفه با useImperativeHandle (با TypeScript) Exposing Component APIs with useImperativeHandle (with TypeScript)

• خلاصه Summary

حالت پیشرفته نوع ایمن با Context API و useReducer() Advanced Type-Safe State with Context API & useReducer()

• معرفی ماژول Module Introduction

• پروژه شروع The Starting Project

• ایجاد زمینه و انواع برازش Creating a Context & Fitting Types

• ایجاد یک مؤلفه ارائه دهنده نوع ایمن Creating a Type-Safe Provider Component

• دسترسی به Context Type-Safe با یک قلاب سفارشی Accessing Context Type-Safe With A Custom Hook

• شروع با useReducer() و TypeScript Getting Started with useReducer() & TypeScript

• یک عملکرد کاهش دهنده پایه و یک نوع عمل پایه A Basic Reducer Function & A Basic Action Type

• تغییر حالت از طریق تابع کاهنده Changing State via the Reducer Function

• استفاده از انواع اقدام بهتر Using Better Action Types

• سیم کشی همه چیز و اتمام برنامه Wiring Everything Up & Finishing the App

عوارض جانبی، useEffect() و واکشی داده با TypeScript Side Effects, useEffect() & Data Fetching with TypeScript

• معرفی ماژول Module Introduction

• ایجاد اولین اثر جانبی Creating a First Side Effect

• استفاده از useEffect() با TypeScript Using useEffect() with TypeScript

• مدیریت بازه زمانی با Refs & The Effect Cleanup Function Managing An Interval With Refs & The Effect Cleanup Function

• useEffect() و وابستگی های آن useEffect() & Its Dependencies

• یک اشکال کوچک و راه حل آن A Small Bug & Its Solution

• به بعد به واکشی داده ها! Onwards to Data Fetching!

• ساخت یک Utility "get" تابع با TypeScript Building a Utility "get" Function with TypeScript

• واکشی و تبدیل داده ها Fetching & Transforming Data

• جایگزین: استفاده از کتابخانه "zod" برای اعتبارسنجی داده های پاسخ Alternative: Using the "zod" Library for Response Data Validation

• جایگزین: یک تابع "دریافت" عمومی Alternative: A Generic "get" Function

• رسیدگی به وضعیت های بارگیری و خطا Handling Loading & Error States

استفاده از Redux با TypeScript Using Redux with TypeScript

• معرفی ماژول Module Introduction

• پروژه شروع The Starting Project

• تنظیم Redux Redux Setup

• ایجاد یک فروشگاه Redux و اولین برش Creating a Redux Store & A First Slice

• تنظیم نوع حالت Setting a State Type

• اولین کاهش دهنده و کنترل نوع بار بار عمل A First Reducer & Controlling the Action Payload Type

• اضافه کردن منطق به Reducer Adding Logic To The Reducer

• ارائه فروشگاه Redux Providing the Redux Store

• عملیات ارسال و تنظیم قلاب useDispatch Dispatching Actions & Adjusting the useDispatch Hook

• ایجاد یک Type-Safe useSelector Hook Creating a Type-Safe useSelector Hook

• انتخاب و تبدیل داده‌های فروشگاه Redux Selecting & Transforming Redux Store Data

• نکات پایانی و خلاصه Finishing Touches & Summary

پروژه تمرین: برنامه مدیریت "رزرو یک جلسه". Practice Project: A "Book a Session" Management Application

• وظیفه ی شما Your Task

• وظیفه شما - جزئیات Your Task - Details

• نکات Hints

• یک راه حل نمونه An Example Solution