آموزش React و Typescript: یک پروژه نمونه کار بسازید

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

با Typescript واکنش نشان دهید React with Typescript

• نحوه دریافت کمک How to Get Help

• به انجمن ما بپیوندید! Join Our Community!

• منابع دوره Course Resources

• این ویدیو را حتما ببینید! Be Sure to Watch this Video!

• ایجاد پروژه های دارای TypeScript Enabled Generating TypeScript-Enabled Projects

• هشدار ReactDOM با React v18 ReactDOM warning with React v18

• پسوند فایل و راه اندازی React File Extensions and Starting Up React

با Typescript واکنش نشان دهید React with Typescript

• نحوه دریافت کمک How to Get Help

• به انجمن ما بپیوندید! Join Our Community!

• منابع دوره Course Resources

• این ویدیو را حتما ببینید! Be Sure to Watch this Video!

• ایجاد پروژه های دارای TypeScript Enabled Generating TypeScript-Enabled Projects

• هشدار ReactDOM با React v18 ReactDOM warning with React v18

• پسوند فایل و راه اندازی React File Extensions and Starting Up React

انواع در اطراف Props و State Types Around Props and State

• با TypeScript تغییر می کند Changes with TypeScript

• تفاوت بزرگ با لوازم جانبی The Big Difference with Props

• حاشیه نویسی صریح نوع مؤلفه Explicit Component Type Annotations

• اموال "فرزندان" وجود ندارد Property 'children' does not exist

• حاشیه نویسی با کودکان Annotations with Children

• با TypeScript حالت دهید State with TypeScript

• استنتاج را با حالت تایپ کنید Type Inference with State

• پایان سریع به مثال Quick Finish to the Example

• بیشتر در مورد ایالت More on State

• تایپ اتحادیه ها در ایالت Type Unions in State

انواع در اطراف Props و State Types Around Props and State

• با TypeScript تغییر می کند Changes with TypeScript

• تفاوت بزرگ با لوازم جانبی The Big Difference with Props

• حاشیه نویسی صریح نوع مؤلفه Explicit Component Type Annotations

• اموال "فرزندان" وجود ندارد Property 'children' does not exist

• حاشیه نویسی با کودکان Annotations with Children

• با TypeScript حالت دهید State with TypeScript

• استنتاج را با حالت تایپ کنید Type Inference with State

• پایان سریع به مثال Quick Finish to the Example

• بیشتر در مورد ایالت More on State

• تایپ اتحادیه ها در ایالت Type Unions in State

انواع پیرامون رویدادها و مراجع Types Around Events and Refs

• گردانندگان رویداد درون خطی Inline Event Handlers

• تایپ مدیریت رویدادهای مستقل Typing Standalone Event Handlers

• مدیریت رویدادهای کشیدن بیش از حد! Handling Drag Events Too!

• TypeScript با اجزای کلاس TypeScript with Class Components

• اعمال انواع به Refs Applying Types to Refs

• بیشتر در Refs More on Refs

انواع پیرامون رویدادها و مراجع Types Around Events and Refs

• گردانندگان رویداد درون خطی Inline Event Handlers

• تایپ مدیریت رویدادهای مستقل Typing Standalone Event Handlers

• مدیریت رویدادهای کشیدن بیش از حد! Handling Drag Events Too!

• TypeScript با اجزای کلاس TypeScript with Class Components

• اعمال انواع به Refs Applying Types to Refs

• بیشتر در Refs More on Refs

تایپ اسکریپت با Redux Typescript with Redux

• نمای کلی برنامه App Overview

• دستور نصب و نسخه های به روز شده برای React 18 Updated Install Command and Versions for React 18

• راه اندازی پروژه Project Setup

• طراحی فروشگاه Redux Redux Store Design

• تنظیم کاهنده Reducer Setup

• حاشیه نویسی نوع بازگشت Annotating the Return Type

• تایپ کردن یک Action Typing an Action

• رابط های جداگانه برای اقدامات Separate Interfaces for Actions

• استفاده از رابط های اکشن Applying Action Interfaces

• افزودن یک Action Type Enum Adding an Action Type Enum

• روشی بهتر برای سازماندهی کد A Better Way to Organize Code

• به روز رسانی کوچک برای Try/Catch Block Small Update for Try / Catch Block

• افزودن Action Creators Adding Action Creators

• اضافه کردن منطق درخواست Adding Request Logic

• اعمال تایپ برای ارسال Applying Typings to Dispatch

• createStore Strikethrough در Code Editor createStore Strikethrough in Code Editor

• راه اندازی صادرات Setting Up Exports

• سیم کشی تا React Wiring Up to React

• اوه... حالت اولیه! Oops... Initial State!

• یادآوری انواع رویداد Reminder on Event Types

• خطای TypeScript هنگام Dispatching Action TypeScript Error When Dispatching Action

• فراخوانی یک Action Creator Calling an Action Creator

• خالقان اقدام الزام آور Binding Action Creators

• انتخاب دولت Selecting State

• تایپ های ناخوشایند در اطراف React-Redux Awkward Typings Around React-Redux

• ایجاد یک انتخابگر تایپ شده Creating a Typed Selector

• دولت مصرف کننده فروشگاه Consuming Store State

• جمع بندی سریع Quick Wrapup

تایپ اسکریپت با Redux Typescript with Redux

• نمای کلی برنامه App Overview

• دستور نصب و نسخه های به روز شده برای React 18 Updated Install Command and Versions for React 18

• راه اندازی پروژه Project Setup

• طراحی فروشگاه Redux Redux Store Design

• تنظیم کاهنده Reducer Setup

• حاشیه نویسی نوع بازگشت Annotating the Return Type

• تایپ کردن یک Action Typing an Action

• رابط های جداگانه برای اقدامات Separate Interfaces for Actions

• استفاده از رابط های اکشن Applying Action Interfaces

• افزودن یک Action Type Enum Adding an Action Type Enum

• روشی بهتر برای سازماندهی کد A Better Way to Organize Code

• به روز رسانی کوچک برای Try/Catch Block Small Update for Try / Catch Block

• افزودن Action Creators Adding Action Creators

• اضافه کردن منطق درخواست Adding Request Logic

• اعمال تایپ برای ارسال Applying Typings to Dispatch

• createStore Strikethrough در Code Editor createStore Strikethrough in Code Editor

• راه اندازی صادرات Setting Up Exports

• سیم کشی تا React Wiring Up to React

• اوه... حالت اولیه! Oops... Initial State!

• یادآوری انواع رویداد Reminder on Event Types

• خطای TypeScript هنگام Dispatching Action TypeScript Error When Dispatching Action

• فراخوانی یک Action Creator Calling an Action Creator

• خالقان اقدام الزام آور Binding Action Creators

• انتخاب دولت Selecting State

• تایپ های ناخوشایند در اطراف React-Redux Awkward Typings Around React-Redux

• ایجاد یک انتخابگر تایپ شده Creating a Typed Selector

• دولت مصرف کننده فروشگاه Consuming Store State

• جمع بندی سریع Quick Wrapup

برنامه بزرگ - در اینجا چیزی است که ما می سازیم! The Big App - Here's What We're Building!

• نمای کلی برنامه App Overview

• سه چالش بزرگ Three Big Challenges

برنامه بزرگ - در اینجا چیزی است که ما می سازیم! The Big App - Here's What We're Building!

• نمای کلی برنامه App Overview

• سه چالش بزرگ Three Big Challenges

انتقال کد در مرورگر Code Transpiling in the Browser

• گزینه های انتقال Transpiling Options

• انتقال از راه دور Remote Transpiling

• سیستم های ماژول Module Systems

• پشت صحنه با وب پک Behind the Scenes with Webpack

• بسته وب با ماژول های ES Webpack with ES Modules

• یک تغییر کوچک One Small Change

• گزینه هایی برای بسته بندی Options for Bundling

• پس کدام رویکرد؟ So Which Approach?

• جایگزینی پک وب A Webpack Replacement

انتقال کد در مرورگر Code Transpiling in the Browser

• گزینه های انتقال Transpiling Options

• انتقال از راه دور Remote Transpiling

• سیستم های ماژول Module Systems

• پشت صحنه با وب پک Behind the Scenes with Webpack

• بسته وب با ماژول های ES Webpack with ES Modules

• یک تغییر کوچک One Small Change

• گزینه هایی برای بسته بندی Options for Bundling

• پس کدام رویکرد؟ So Which Approach?

• جایگزینی پک وب A Webpack Replacement

پیاده سازی بسته بندی درون مرورگر Implementing In-Browser Bundling

• یک برنامه آزمایشی A Demo App

• راه اندازی پروژه Project Setup

• عناصر فرم پایه Basic Form Elements

• آشنایی با ESBuild Understanding ESBuild

• راه اندازی ESBuild Initializing ESBuild

• استفاده از Refs برای مقادیر دلخواه Using Refs for Arbitrary Values

• Transpiling آثار! Transpiling Works!

• مشکلات باندلینگ در مرورگر Troubles with Bundling in the Browser

• مشکلات مربوط به NPM Issues with NPM

• راه حل با Unpkg Solution with Unpkg

• پلاگین نسخه ی نمایشی ESBuild Demo ESBuild Plugin

• ESBuild Can Bundle! ESBuild Can Bundle!

• شیرجه عمیق در باندلینگ Deep Dive on Bundling

• فیلترها و فضاهای نام Filters and Namespaces

• افزودن یک بسته تست کوچک Adding a Tiny Test Package

پیاده سازی بسته بندی درون مرورگر Implementing In-Browser Bundling

• یک برنامه آزمایشی A Demo App

• راه اندازی پروژه Project Setup

• عناصر فرم پایه Basic Form Elements

• آشنایی با ESBuild Understanding ESBuild

• راه اندازی ESBuild Initializing ESBuild

• استفاده از Refs برای مقادیر دلخواه Using Refs for Arbitrary Values

• Transpiling آثار! Transpiling Works!

• مشکلات باندلینگ در مرورگر Troubles with Bundling in the Browser

• مشکلات مربوط به NPM Issues with NPM

• راه حل با Unpkg Solution with Unpkg

• پلاگین نسخه ی نمایشی ESBuild Demo ESBuild Plugin

• ESBuild Can Bundle! ESBuild Can Bundle!

• شیرجه عمیق در باندلینگ Deep Dive on Bundling

• فیلترها و فضاهای نام Filters and Namespaces

• افزودن یک بسته تست کوچک Adding a Tiny Test Package

واکشی پویا و بارگذاری ماژول های NPM Dynamic Fetching and Loading of NPM Modules

• واکشی پویا ماژول ها Dynamically Fetching Modules

• ایجاد URL Unpkg Generating the Unpkg URL

• مشکلات بسته های چند فایلی Issues with Multi-File Packages

• حل مسیرهای نسبی Solving Relative Paths

• با استفاده از سازنده URL Using the URL Constructor

• شکست تودرتو نیاز دارد Failing Nested Requires

• حل کردن مسیرهای تودرتو Resolving Nested Paths

• کار می کند! It Works!

• در طول بسته بندی تعریف می کند Defines During Bundling

• جایزه! بسته بندی نسخه Bonus! Package Versioning

واکشی پویا و بارگذاری ماژول های NPM Dynamic Fetching and Loading of NPM Modules

• واکشی پویا ماژول ها Dynamically Fetching Modules

• ایجاد URL Unpkg Generating the Unpkg URL

• مشکلات بسته های چند فایلی Issues with Multi-File Packages

• حل مسیرهای نسبی Solving Relative Paths

• با استفاده از سازنده URL Using the URL Constructor

• شکست تودرتو نیاز دارد Failing Nested Requires

• حل کردن مسیرهای تودرتو Resolving Nested Paths

• کار می کند! It Works!

• در طول بسته بندی تعریف می کند Defines During Bundling

• جایزه! بسته بندی نسخه Bonus! Package Versioning

ذخیره سازی برای دستاوردهای عملکرد بزرگ Caching For Big Performance Gains

• اعداد دیوانه از درخواست Crazy Numbers of Requests

• پیاده سازی یک لایه کش Implementing a Caching Layer

• ذخیره سازی با جفت های کلید-مقدار Caching with Key-Value Pairs

• رفع خطای TypeScript Fixing a TypeScript Error

• بسته بندی ورودی کاربر Bundling User Input

• شکستن حل کردن منطق با فیلترها Breaking Up Resolve Logic With Filters

• Refactoring به چندین پلاگین Refactoring to Multiple Plugins

• در حال بارگذاری فایل های CSS Loading CSS Files

• پیکربندی صحیح لودر Configuring the Correct Loader

• کمبود کوچک با ESBuild Small Shortcoming with ESBuild

• فریب مدیریت CSS ESBuild Tricking ESBuild's CSS Handling

• فرار از قطعات CSS Escaping CSS Snippets

• فیلترهای بار جداگانه Separate Load Filters

• استخراج منطق حافظه پنهان رایج Extracting Common Caching Logic

• روشی بهتر برای بارگیری WASM A Better Way of Loading WASM

ذخیره سازی برای دستاوردهای عملکرد بزرگ Caching For Big Performance Gains

• اعداد دیوانه از درخواست Crazy Numbers of Requests

• پیاده سازی یک لایه کش Implementing a Caching Layer

• ذخیره سازی با جفت های کلید-مقدار Caching with Key-Value Pairs

• رفع خطای TypeScript Fixing a TypeScript Error

• بسته بندی ورودی کاربر Bundling User Input

• شکستن حل کردن منطق با فیلترها Breaking Up Resolve Logic With Filters

• Refactoring به چندین پلاگین Refactoring to Multiple Plugins

• در حال بارگذاری فایل های CSS Loading CSS Files

• پیکربندی صحیح لودر Configuring the Correct Loader

• کمبود کوچک با ESBuild Small Shortcoming with ESBuild

• فریب مدیریت CSS ESBuild Tricking ESBuild's CSS Handling

• فرار از قطعات CSS Escaping CSS Snippets

• فیلترهای بار جداگانه Separate Load Filters

• استخراج منطق حافظه پنهان رایج Extracting Common Caching Logic

• روشی بهتر برای بارگیری WASM A Better Way of Loading WASM

مدیریت ایمن اجرای کد غیرقابل اعتماد Safely Handling Untrusted Code Execution

• اجرای کد کاربری Executing User Code

• مشکلات بزرگ در اجرای کد Big Issues with Code Execution

• چگونه دیگران این را حل می کنند؟ How Do Others Solve This?

• نمایش IFrames Displaying IFrames

• زمینه اجرای متفاوت Different Execution Context

• عبور از زمینه Crossing Context

• Sandboxing یک IFrame Sandboxing an IFrame

• قطع دسترسی با دامنه های مختلف Breaking Access with Different Domains

• چگونه IFrames هر چیزی را برطرف می کند؟ How Do IFrames Fix Anything?

• جریان کامل - CodePen و CodeSandbox چگونه کار می کنند The Full Flow - How CodePen and CodeSandbox Work

• آیا ما به جدایی نیاز داریم؟ Do We Need Separation?

• رویکرد زمین میانی Middle Ground Approach

• IFrames با SrcDocs IFrames with SrcDocs

• اجرا با استفاده از SrcDoc Execution Using SrcDoc

• اجرای کد Unescaped Running Unescaped Code

• ارتباط غیر مستقیم بین فریم ها Indirect Communication Between Frames

• ارسال کد به IFrame Passing Code to the IFrame

• کار می کند! It Works!

• برجسته کردن خطاها Highlighting Errors

• مشکلات اجرای تکرار Issues with Repeat Execution

• تنظیم مجدد محتوای IFrame Resetting the IFrame Contents

• رفع هشدار Warning Fixup

مدیریت ایمن اجرای کد غیرقابل اعتماد Safely Handling Untrusted Code Execution

• اجرای کد کاربری Executing User Code

• مشکلات بزرگ در اجرای کد Big Issues with Code Execution

• چگونه دیگران این را حل می کنند؟ How Do Others Solve This?

• نمایش IFrames Displaying IFrames

• زمینه اجرای متفاوت Different Execution Context

• عبور از زمینه Crossing Context

• Sandboxing یک IFrame Sandboxing an IFrame

• قطع دسترسی با دامنه های مختلف Breaking Access with Different Domains

• چگونه IFrames هر چیزی را برطرف می کند؟ How Do IFrames Fix Anything?

• جریان کامل - CodePen و CodeSandbox چگونه کار می کنند The Full Flow - How CodePen and CodeSandbox Work

• آیا ما به جدایی نیاز داریم؟ Do We Need Separation?

• رویکرد زمین میانی Middle Ground Approach

• IFrames با SrcDocs IFrames with SrcDocs

• اجرا با استفاده از SrcDoc Execution Using SrcDoc

• اجرای کد Unescaped Running Unescaped Code

• ارتباط غیر مستقیم بین فریم ها Indirect Communication Between Frames

• ارسال کد به IFrame Passing Code to the IFrame

• کار می کند! It Works!

• برجسته کردن خطاها Highlighting Errors

• مشکلات اجرای تکرار Issues with Repeat Execution

• تنظیم مجدد محتوای IFrame Resetting the IFrame Contents

• رفع هشدار Warning Fixup

نمایش یک ویرایشگر کد در یک برنامه React Displaying a Code Editor In a React App

• مسائل مربوط به Eager Bundling Issues with Eager Bundling

• برگرداندن سریع Quick Revert

• Legacy Peer Deps پرچم گذاری کنید تا از خطا جلوگیری کنید Legacy Peer Deps Flag to Avoid Errors

• گزینه های ویرایشگر منبع باز Open Source Editor Options

• نمایش یک ویرایشگر Displaying an Editor

• پیکربندی ویرایشگر Configuring the Editor

• Crazy Monaco Editor Type Defs Crazy Monaco Editor Type Defs

• چند گزینه دیگر A Few More Options

• تنظیم مقدار اولیه Setting the Initial Value

• مدیریت رویدادهای تغییر ویرایشگر Handling Editor Change Events

• اضافه کردن یک تعریف نوع Adding a Type Definition

• اضافه کردن زیباتر به ویرایشگر ما Adding Prettier to Our Editor

• قالب بندی خودکار کد Automatic Code Formatting

• افزودن کتابخانه CSS Adding a CSS Library

• شناور کردن دکمه فرمت Floating the Format Button

• تنزل رتبه CRA به پشتیبانی از وابستگی ها Downgrading CRA to Support Dependencies

• رفع برجسته سازی نحو Fixing Syntax Highlighting

• CSS برای برجسته کردن نحو CSS For Syntax Highlighting

نمایش یک ویرایشگر کد در یک برنامه React Displaying a Code Editor In a React App

• مسائل مربوط به Eager Bundling Issues with Eager Bundling

• برگرداندن سریع Quick Revert

• Legacy Peer Deps پرچم گذاری کنید تا از خطا جلوگیری کنید Legacy Peer Deps Flag to Avoid Errors

• گزینه های ویرایشگر منبع باز Open Source Editor Options

• نمایش یک ویرایشگر Displaying an Editor

• پیکربندی ویرایشگر Configuring the Editor

• Crazy Monaco Editor Type Defs Crazy Monaco Editor Type Defs

• چند گزینه دیگر A Few More Options

• تنظیم مقدار اولیه Setting the Initial Value

• مدیریت رویدادهای تغییر ویرایشگر Handling Editor Change Events

• اضافه کردن یک تعریف نوع Adding a Type Definition

• اضافه کردن زیباتر به ویرایشگر ما Adding Prettier to Our Editor

• قالب بندی خودکار کد Automatic Code Formatting

• افزودن کتابخانه CSS Adding a CSS Library

• شناور کردن دکمه فرمت Floating the Format Button

• تنزل رتبه CRA به پشتیبانی از وابستگی ها Downgrading CRA to Support Dependencies

• رفع برجسته سازی نحو Fixing Syntax Highlighting

• CSS برای برجسته کردن نحو CSS For Syntax Highlighting

نحوه استخراج اجزای قابل استفاده مجدد How to Extract Reusable Components

• Refactoring یک کامپوننت پیش نمایش Refactoring Out a Preview Component

• استخراج منطق باندلینگ Extracting Bundling Logic

• رفع چند هشدار Fixing a Few Warnings

• ویرایشگرهای متعدد و پیش نمایش ویندوز Multiple Editors and Preview Windows

نحوه استخراج اجزای قابل استفاده مجدد How to Extract Reusable Components

• Refactoring یک کامپوننت پیش نمایش Refactoring Out a Preview Component

• استخراج منطق باندلینگ Extracting Bundling Logic

• رفع چند هشدار Fixing a Few Warnings

• ویرایشگرهای متعدد و پیش نمایش ویندوز Multiple Editors and Preview Windows

اجزای قابل تغییر اندازه Draggable Resizing Components

• نسخه های جدید React قابل تغییر اندازه برای پشتیبانی از React 18 New Versions of React Resizable to Support React 18

• اضافه کردن پانل های قابل تغییر اندازه Adding Resizable Panes

• افزودن کودکان به رابط برای React 18 Adding children to Interface for React 18

• راه اندازی React-Resizable Setting Up React-Resizable

• تنظیم یک دسته تغییر اندازه Setting a Resize Handle

• تغییر اندازه CSS Resizer CSS

• اضافه کردن یک دسته CSS Adding a Bunch of CSS

• گسترش Resizer به صورت افقی Expanding the Resizer Horizontally

• گسترش ویرایشگر کد Expanding the Code Editor

• رفع مشکل تغییر اندازه Fixing the Resize Issue

• محدود کردن تغییر اندازه های عمودی Constraining Vertical Resizes

• تغییر اندازه به صورت افقی Resizing Horizontally

• استراتژی برای تعاریف پروپ Strategies for Prop Definitions

• اعمال تغییر اندازه افقی Applying Horizontal Resize Props

• دریافت پیش نمایش برای گسترش Getting Preview to Expand

• یک راه حل کوچک A Small Workaround

• به روز رسانی پس از انتخاب Updating the After Selector

• عجیب و غریب در اطراف Resizer An Oddity Around the Resizer

• در رویدادهای تغییر اندازه On Resize Events

• به روز رسانی Resizer Props Updating Resizer Props

• بهبود عملکرد تغییر اندازه Improving Resize Performance

• چرا Width Jumps؟ Why Width Jumps?

• همگام سازی حالت عرض Synchronizing Width State

• رفع سریع آرایه وابستگی Quick Dependency Array Fix

• اضافه کردن منطق Debouncing Adding Debouncing Logic

• پاک کردن تایم اوت Clearing the Timeout

• اضافه کردن یک بازه زمانی اجرا Adding an Execution Timeout

اجزای قابل تغییر اندازه Draggable Resizing Components

• نسخه های جدید React قابل تغییر اندازه برای پشتیبانی از React 18 New Versions of React Resizable to Support React 18

• اضافه کردن پانل های قابل تغییر اندازه Adding Resizable Panes

• افزودن کودکان به رابط برای React 18 Adding children to Interface for React 18

• راه اندازی React-Resizable Setting Up React-Resizable

• تنظیم یک دسته تغییر اندازه Setting a Resize Handle

• تغییر اندازه CSS Resizer CSS

• اضافه کردن یک دسته CSS Adding a Bunch of CSS

• گسترش Resizer به صورت افقی Expanding the Resizer Horizontally

• گسترش ویرایشگر کد Expanding the Code Editor

• رفع مشکل تغییر اندازه Fixing the Resize Issue

• محدود کردن تغییر اندازه های عمودی Constraining Vertical Resizes

• تغییر اندازه به صورت افقی Resizing Horizontally

• استراتژی برای تعاریف پروپ Strategies for Prop Definitions

• اعمال تغییر اندازه افقی Applying Horizontal Resize Props

• دریافت پیش نمایش برای گسترش Getting Preview to Expand

• یک راه حل کوچک A Small Workaround

• به روز رسانی پس از انتخاب Updating the After Selector

• عجیب و غریب در اطراف Resizer An Oddity Around the Resizer

• در رویدادهای تغییر اندازه On Resize Events

• به روز رسانی Resizer Props Updating Resizer Props

• بهبود عملکرد تغییر اندازه Improving Resize Performance

• چرا Width Jumps؟ Why Width Jumps?

• همگام سازی حالت عرض Synchronizing Width State

• رفع سریع آرایه وابستگی Quick Dependency Array Fix

• اضافه کردن منطق Debouncing Adding Debouncing Logic

• پاک کردن تایم اوت Clearing the Timeout

• اضافه کردن یک بازه زمانی اجرا Adding an Execution Timeout

تکنیک های مدیریت خطا در برنامه های React Techniques for Error Handling in React Apps

• رسیدگی به خطا Error Handling

• استخراج منطق مدیریت خطای قابل استفاده مجدد Extracting Reusable Error Handling Logic

• رسیدگی به خطاهای Async Handling Async Errors

• به روز رسانی کوچک برای Try/Catch Block Small Update for Try / Catch Block

• گرفتن خطاهای دسته بندی Capturing Bundling Errors

• چاپ خطای ضبط شده Printing the Captured Error

تکنیک های مدیریت خطا در برنامه های React Techniques for Error Handling in React Apps

• رسیدگی به خطا Error Handling

• استخراج منطق مدیریت خطای قابل استفاده مجدد Extracting Reusable Error Handling Logic

• رسیدگی به خطاهای Async Handling Async Errors

• به روز رسانی کوچک برای Try/Catch Block Small Update for Try / Catch Block

• گرفتن خطاهای دسته بندی Capturing Bundling Errors

• چاپ خطای ضبط شده Printing the Captured Error

ایجاد یک ویرایشگر Markdown در یک برنامه React Creating a Markdown Editor in a React App

• برای سلول متن برنامه ریزی کنید Plan for the Text Cell

• چند مشکل با ویرایشگر Markdown A Few Issues with the Markdown Editor

• تغییر حالت ویرایشگر Markdown Toggling the Markdown Editor Mode

• تعویض شرطی Conditional Toggling

• چرا مکان نما شکسته؟ Why the Broken Cursor?

• حل تضاد نام کلاس Solving Class Name Conflicts

• رفع ارتفاع تقسیم کننده Fixing the Divider Height

• تغییر شکل نوار Resizer Restyling the Resizer Bar

• استایل Markdown اضافی Additional Markdown Styling

• اعمال تم تیره Applying the Dark Theme

• اضافه کردن حالت به ویرایشگر Adding State to the Editor

• آخرین لمس یک ظاهر طراحی شده Last Touch of Styling

ایجاد یک ویرایشگر Markdown در یک برنامه React Creating a Markdown Editor in a React App

• برای سلول متن برنامه ریزی کنید Plan for the Text Cell

• چند مشکل با ویرایشگر Markdown A Few Issues with the Markdown Editor

• تغییر حالت ویرایشگر Markdown Toggling the Markdown Editor Mode

• تعویض شرطی Conditional Toggling

• چرا مکان نما شکسته؟ Why the Broken Cursor?

• حل تضاد نام کلاس Solving Class Name Conflicts

• رفع ارتفاع تقسیم کننده Fixing the Divider Height

• تغییر شکل نوار Resizer Restyling the Resizer Bar

• استایل Markdown اضافی Additional Markdown Styling

• اعمال تم تیره Applying the Dark Theme

• اضافه کردن حالت به ویرایشگر Adding State to the Editor

• آخرین لمس یک ظاهر طراحی شده Last Touch of Styling

الگوهای طراحی برای Redux با تایپ اسکریپت Design Patterns for Redux with Typescript

• دستور نصب و نسخه های به روز شده برای React 18 Updated Install Command and Versions for React 18

• طراحی Redux Redux Design

• داربست اولیه Initial Scaffolding

• تعاریف رابط عمل Action Interface Definitions

• تعریف سلول چیست Defining What a Cell Is

• راه اندازی سلول های کاهش دهنده Cells Reducer Setup

• اضافه کردن چند مورد کاهش دهنده Adding a Few Reducer Cases

• ایجاد و صادرات فروشگاه Creating and Exporting the Store

• به Redux Connection واکنش نشان دهید React to Redux Connection

• Annotations نوع بازگشت Action Creator Action Creator Return Type Annotations

• اجرای Easy Action Creator Easy Action Creator Implementations

• رسیدگی به واردات چرخه ای Handling Cyclical Imports

• تعریف جهت Defining Direction

• منطق سلولی را به روز کنید Update Cell Logic

الگوهای طراحی برای Redux با تایپ اسکریپت Design Patterns for Redux with Typescript

• دستور نصب و نسخه های به روز شده برای React 18 Updated Install Command and Versions for React 18

• طراحی Redux Redux Design

• داربست اولیه Initial Scaffolding

• تعاریف رابط عمل Action Interface Definitions

• تعریف سلول چیست Defining What a Cell Is

• راه اندازی سلول های کاهش دهنده Cells Reducer Setup

• اضافه کردن چند مورد کاهش دهنده Adding a Few Reducer Cases

• ایجاد و صادرات فروشگاه Creating and Exporting the Store

• به Redux Connection واکنش نشان دهید React to Redux Connection

• Annotations نوع بازگشت Action Creator Action Creator Return Type Annotations

• اجرای Easy Action Creator Easy Action Creator Implementations

• رسیدگی به واردات چرخه ای Handling Cyclical Imports

• تعریف جهت Defining Direction

• منطق سلولی را به روز کنید Update Cell Logic

به روز رسانی های حالت را با Immer ساده کنید Simplify State Updates with Immer

• به روز رسانی های ساده با Immer Simple Updates with Immer

• حذف یک سلول Removing a Cell

• جابجایی سلول Swapping Cell Placement

• درج سلول های جدید Inserting New Cells

• گوچای کوچک با ایمر Small Gotcha with Immer

• تست دستی فروشگاه Redux Manual Testing of a Redux Store

به روز رسانی های حالت را با Immer ساده کنید Simplify State Updates with Immer

• به روز رسانی های ساده با Immer Simple Updates with Immer

• حذف یک سلول Removing a Cell

• جابجایی سلول Swapping Cell Placement

• درج سلول های جدید Inserting New Cells

• گوچای کوچک با ایمر Small Gotcha with Immer

• تست دستی فروشگاه Redux Manual Testing of a Redux Store

Binding React با Redux Binding React with Redux

• بازگشت به React Back to React

• ایجاد یک انتخابگر تایپ شده Creating a Typed Selector

• ویژگی "order" در نوع "CellsState |" وجود ندارد تعریف نشده. Property 'order' does not exist on type 'CellsState | undefined'.

• انتخاب لیست مرتب شده Selecting an Ordered List

• ارائه فهرست سلول ها Rendering the List of Cells

• رندر نوع سلول Cell Type Rendering

• یادآوری در Action Creator Helper Reminder on the Action Creator Helper

• استخراج دولت محلی Extracting Local State

• استخراج حالت از سلول متنی Extracting State from Text Cell

• جزء اکشن نوار The Action Bar Component

• نصب یک نسخه خاص از FontAwesome Installing a Specific Version of FontAwesome

• اضافه کردن دکمه های آیکون Adding Icon Buttons

• استفاده از CSS سفارشی Applying Custom CSS

• آخرین لمس یک ظاهر طراحی شده Last Touch of Styling

• افزودن سلول های جدید Adding New Cells

• نمایش افزودن سلول Displaying Add Cell

• رفع اخطار کلیدی Resolving the Key Warning

• یک ظاهر طراحی شده افزودن سلول Styling Add Cell

• یک ظاهر طراحی بیشتر لمسی A Touch More Styling

• اجباری افزودن مشاهده سلولی Forcing Add Cell Visibility

• درک منحنی های انتقال CSS Understanding CSS Transition Curves

• اضافه کردن فاصله عمودی Adding Vertical Spacing

• چرا افزودن سلول عجیب است؟ Why is Add Cell Weird

• سه راه حل ممکن Three Possible Solutions

• Refactoring سمت Redux Refactoring the Redux Side

• Refactoring سمت React Refactoring the React Side

Binding React با Redux Binding React with Redux

• بازگشت به React Back to React

• ایجاد یک انتخابگر تایپ شده Creating a Typed Selector

• ویژگی "order" در نوع "CellsState |" وجود ندارد تعریف نشده. Property 'order' does not exist on type 'CellsState | undefined'.

• انتخاب لیست مرتب شده Selecting an Ordered List

• ارائه فهرست سلول ها Rendering the List of Cells

• رندر نوع سلول Cell Type Rendering

• یادآوری در Action Creator Helper Reminder on the Action Creator Helper

• استخراج دولت محلی Extracting Local State

• استخراج حالت از سلول متنی Extracting State from Text Cell

• جزء اکشن نوار The Action Bar Component

• نصب یک نسخه خاص از FontAwesome Installing a Specific Version of FontAwesome

• اضافه کردن دکمه های آیکون Adding Icon Buttons

• استفاده از CSS سفارشی Applying Custom CSS

• آخرین لمس یک ظاهر طراحی شده Last Touch of Styling

• افزودن سلول های جدید Adding New Cells

• نمایش افزودن سلول Displaying Add Cell

• رفع اخطار کلیدی Resolving the Key Warning

• یک ظاهر طراحی شده افزودن سلول Styling Add Cell

• یک ظاهر طراحی بیشتر لمسی A Touch More Styling

• اجباری افزودن مشاهده سلولی Forcing Add Cell Visibility

• درک منحنی های انتقال CSS Understanding CSS Transition Curves

• اضافه کردن فاصله عمودی Adding Vertical Spacing

• چرا افزودن سلول عجیب است؟ Why is Add Cell Weird

• سه راه حل ممکن Three Possible Solutions

• Refactoring سمت Redux Refactoring the Redux Side

• Refactoring سمت React Refactoring the React Side

اتصال باندل ها در Redux Connecting Bundles in Redux

• آیا باید یک کاهش دهنده بسته ها وجود داشته باشد؟ Should There Be a Bundles Reducer?

• در اینجا طرح است Here's the Plan

• تعریف انواع اقدام باندلینگ Defining Bundling Action Types

• اجرای اولیه کاهش دهنده Initial Reducer Implementation

• به‌روزرسانی کوچک مورد نیاز برای bundlesReducer Small Required Update for bundlesReducer

• پایان دادن به کاهنده Finishing Up the Reducer

• افزودن Action Creator Adding the Action Creator

• React Wire Up React Wire Up

• تنظیم حالت کاهنده Adjusting the Reducer State

• حل یک هشدار کوچک با useMemo Solving a Small Warning with useMemo

• اضافه کردن Eager Bundling Adding Eager Bundling

• دریافت یک بسته اولیه Getting an Initial Bundle

• نمایش یک پیام در حال بارگذاری Showing a Loading Message

• حالت دادن به نوار پیشرفت Styling the Progress Bar

• آیا می توانیم مدت بسته را تخمین بزنیم؟ Can We Estimate Bundle Duration?

• محو شدن در نوار پیشرفت Fading In the Progress Bar

• تعمیر پس زمینه Fixing the Background

اتصال باندل ها در Redux Connecting Bundles in Redux

• آیا باید یک کاهش دهنده بسته ها وجود داشته باشد؟ Should There Be a Bundles Reducer?

• در اینجا طرح است Here's the Plan

• تعریف انواع اقدام باندلینگ Defining Bundling Action Types

• اجرای اولیه کاهش دهنده Initial Reducer Implementation

• به‌روزرسانی کوچک مورد نیاز برای bundlesReducer Small Required Update for bundlesReducer

• پایان دادن به کاهنده Finishing Up the Reducer

• افزودن Action Creator Adding the Action Creator

• React Wire Up React Wire Up

• تنظیم حالت کاهنده Adjusting the Reducer State

• حل یک هشدار کوچک با useMemo Solving a Small Warning with useMemo

• اضافه کردن Eager Bundling Adding Eager Bundling

• دریافت یک بسته اولیه Getting an Initial Bundle

• نمایش یک پیام در حال بارگذاری Showing a Loading Message

• حالت دادن به نوار پیشرفت Styling the Progress Bar

• آیا می توانیم مدت بسته را تخمین بزنیم؟ Can We Estimate Bundle Duration?

• محو شدن در نوار پیشرفت Fading In the Progress Bar

• تعمیر پس زمینه Fixing the Background

افزودن ویژگی «اجرای کد تجمعی». Adding a 'Cumulative Code Execution' Feature

• ارجاع کد از سلول های قبلی Referencing Code from Previous Cells

• روش اجرا Method of Implementation

• محاسبه کد تجمعی Calculating Cumulative Code

• اجرای کد تجمعی Executing the Cumulative Code

• اضافه کردن یک تابع نمایش Adding a Show Function

• نمایش مقادیر پیچیده Showing Complex Values

• نمایش یک عنصر JSX Showing a JSX Element

• وارد کردن نام برخورد Import Name Collisions

• اجتناب از نامگذاری برخورد Avoiding Naming Collisions

• نمایش یک React Component Showing a React Component

• تماس های انتخابی برای نمایش Selective Calls to Show

• اجرای یک تابع نمایش No-Op Implementing a Show Function No-Op

• استخراج قلاب Extracting a Hook

• لمسی از CSS A Touch of CSS

• رفع ضربه های لبه Fixing Edge Snaps

افزودن ویژگی «اجرای کد تجمعی». Adding a 'Cumulative Code Execution' Feature

• ارجاع کد از سلول های قبلی Referencing Code from Previous Cells

• روش اجرا Method of Implementation

• محاسبه کد تجمعی Calculating Cumulative Code

• اجرای کد تجمعی Executing the Cumulative Code

• اضافه کردن یک تابع نمایش Adding a Show Function

• نمایش مقادیر پیچیده Showing Complex Values

• نمایش یک عنصر JSX Showing a JSX Element

• وارد کردن نام برخورد Import Name Collisions

• اجتناب از نامگذاری برخورد Avoiding Naming Collisions

• نمایش یک React Component Showing a React Component

• تماس های انتخابی برای نمایش Selective Calls to Show

• اجرای یک تابع نمایش No-Op Implementing a Show Function No-Op

• استخراج قلاب Extracting a Hook

• لمسی از CSS A Touch of CSS

• رفع ضربه های لبه Fixing Edge Snaps

مسیر - لرنا The Path - Lerna

• مسیر حرکت رو به جلو The Path Moving Forward

• برنامه ریزی معماری محلی Planning Local Architecture

• یک راه حل آسان An Easy Solution

• ظاهر برنامه در آینده چگونه است؟ What's the App Look Like in the Future?

• توسعه مبتنی بر بسته Package Based Development

• معرفی لرنا Introducing Lerna

• سلب مسئولیت در لرنا Disclaimer on Lerna

• راه اندازی لرنا Lerna Setup

• اضافه کردن ماژول با لرنا Adding Modules with Lerna

• پیوند دادن بسته ها Linking Packages

• دستور npx برای پشتیبانی از TypeScript به روز شد Updated npx Command for TypeScript Support

• افزودن پشتیبانی TypeScript Adding TypeScript Support

• افزودن TypeScript به CLI Adding TypeScript to the CLI

• پایان پشتیبانی TS Finishing TS Support

• اسکریپت های شروع موازی Parallel Start Scripts

مسیر - لرنا The Path - Lerna

• مسیر حرکت رو به جلو The Path Moving Forward

• برنامه ریزی معماری محلی Planning Local Architecture

• یک راه حل آسان An Easy Solution

• ظاهر برنامه در آینده چگونه است؟ What's the App Look Like in the Future?

• توسعه مبتنی بر بسته Package Based Development

• معرفی لرنا Introducing Lerna

• سلب مسئولیت در لرنا Disclaimer on Lerna

• راه اندازی لرنا Lerna Setup

• اضافه کردن ماژول با لرنا Adding Modules with Lerna

• پیوند دادن بسته ها Linking Packages

• دستور npx برای پشتیبانی از TypeScript به روز شد Updated npx Command for TypeScript Support

• افزودن پشتیبانی TypeScript Adding TypeScript Support

• افزودن TypeScript به CLI Adding TypeScript to the CLI

• پایان پشتیبانی TS Finishing TS Support

• اسکریپت های شروع موازی Parallel Start Scripts

ایجاد CLI Creating the CLI

• خواندن آرگومان های خط فرمان Reading Command Line Arguments

• استفاده از Commander برای ساخت یک CLI Using Commander to Build a CLI

• تعیین گزینه های خط فرمان Specifying Command Line Options

• ارتباط از CLI به API Communication from the CLI to the API

• آن دایرکتوری آرگومنت چیست؟ What's that Directory Argument?

• محاسبه مسیرهای فایل Calculating File Paths

ایجاد CLI Creating the CLI

• خواندن آرگومان های خط فرمان Reading Command Line Arguments

• استفاده از Commander برای ساخت یک CLI Using Commander to Build a CLI

• تعیین گزینه های خط فرمان Specifying Command Line Options

• ارتباط از CLI به API Communication from the CLI to the API

• آن دایرکتوری آرگومنت چیست؟ What's that Directory Argument?

• محاسبه مسیرهای فایل Calculating File Paths

افزودن یک API فقط محلی Adding a Local-Only API

• Local API The Local API

• افزودن وابستگی ها و اجرای اکسپرس Adding Dependencies and Running Express

• رسیدگی به خطا کجا؟ Error Handling Where?

• پیچیدن اکسپرس گوش دادن با یک قول Wrapping Express Listen with a Promise

• خطاهای TypeScript در Catch Block TypeScript Errors in Catch Block

• راه حل رسیدگی به خطا Error Handling Solution

• دسترسی به برنامه React Accessing the React App

• اتصال پروکسی Connecting the Proxy

• ساخت یک بسته تولید Building a Production Bundle

• آشنایی با پیوندهای بسته Understanding Package Links

• مسیر چیست What's the Path

• از کدام روش استفاده می کنیم؟ Which Method Do We Use?

• تعیین محیط اجرایی ما Determining Our Execution Environment

• یک تست سریع A Quick Test

• ایجاد مسیریاب سلولی Creating the Cells Router

• نوشتن سلول ها در یک فایل Writing Cells to a File

• رفع یک خطای دیگر TS Catch Resolving Another TS Catch Error

• خواندن محتویات فایل Reading File Contents

• مقادیر پیش فرض سلول Default Cell Values

• اضافه کردن یک تجزیه کننده JSON Adding a JSON Parser

افزودن یک API فقط محلی Adding a Local-Only API

• Local API The Local API

• افزودن وابستگی ها و اجرای اکسپرس Adding Dependencies and Running Express

• رسیدگی به خطا کجا؟ Error Handling Where?

• پیچیدن اکسپرس گوش دادن با یک قول Wrapping Express Listen with a Promise

• خطاهای TypeScript در Catch Block TypeScript Errors in Catch Block

• راه حل رسیدگی به خطا Error Handling Solution

• دسترسی به برنامه React Accessing the React App

• اتصال پروکسی Connecting the Proxy

• ساخت یک بسته تولید Building a Production Bundle

• آشنایی با پیوندهای بسته Understanding Package Links

• مسیر چیست What's the Path

• از کدام روش استفاده می کنیم؟ Which Method Do We Use?

• تعیین محیط اجرایی ما Determining Our Execution Environment

• یک تست سریع A Quick Test

• ایجاد مسیریاب سلولی Creating the Cells Router

• نوشتن سلول ها در یک فایل Writing Cells to a File

• رفع یک خطای دیگر TS Catch Resolving Another TS Catch Error

• خواندن محتویات فایل Reading File Contents

• مقادیر پیش فرض سلول Default Cell Values

• اضافه کردن یک تجزیه کننده JSON Adding a JSON Parser

ماندگاری داده ها Data Persistence

• اضافه کردن Fetch Cell Logic به Redux Adding Fetch Cell Logic to Redux

• به‌روزرسانی کوچک برای بلوک‌های آزمایش/گرفتن Small Update for Try / Catch Blocks

• The Fetch Cells Action Creator The Fetch Cells Action Creator

• مدیریت واکشی انواع سلول Handling Fetch Cell Types

• ذخیره لیست سلول ها Saving a List of Cells

• چه زمانی با Fetch تماس بگیریم؟ When to Call Fetch?

• ذخیره لیست سلول ها Saving a List of Cells

• افزودن یک میان افزار Persist Adding a Persist Middleware

• تشخیص زمان ذخیره Detecting When to Save

• حذف منطق ذخیره Debouncing Save Logic

ماندگاری داده ها Data Persistence

• اضافه کردن Fetch Cell Logic به Redux Adding Fetch Cell Logic to Redux

• به‌روزرسانی کوچک برای بلوک‌های آزمایش/گرفتن Small Update for Try / Catch Blocks

• The Fetch Cells Action Creator The Fetch Cells Action Creator

• مدیریت واکشی انواع سلول Handling Fetch Cell Types

• ذخیره لیست سلول ها Saving a List of Cells

• چه زمانی با Fetch تماس بگیریم؟ When to Call Fetch?

• ذخیره لیست سلول ها Saving a List of Cells

• افزودن یک میان افزار Persist Adding a Persist Middleware

• تشخیص زمان ذخیره Detecting When to Save

• حذف منطق ذخیره Debouncing Save Logic

انتشار به NPM Publishing to NPM

• مسیر انتشار NPM The Path to NPM Publishing

• بوت استرپ کردن پروژه Bootstrapping the Project

• تنظیمات بیشتر لمس کنید A Touch More Setup

• آماده شدن برای انتشار Getting Ready to Publish

• پیکربندی CLI Configuring the CLI

• انتشار به NPM Publishing to NPM

• سازمان های NPM NPM Organizations

• اعلام بسته های محدوده Declaring Scoped Packages

• Refactoring نام های بسته Refactoring Package Names

• حسابرسی وابستگی های توسعه دهنده Auditing Dev Dependencies

• اضافه کردن اسکریپت های ساخت Adding Build Scripts

• مورد برای بسته بندی The Case for Bundling

• اجرای ESBuild Running ESBuild

• ایجاد یک مخزن Creating a Repository

• انتشار با لرنا Publishing with Lerna

• آیا کار می کند؟ Does it Work?

• مراحل بعدی Next Steps

انتشار به NPM Publishing to NPM

• مسیر انتشار NPM The Path to NPM Publishing

• بوت استرپ کردن پروژه Bootstrapping the Project

• تنظیمات بیشتر لمس کنید A Touch More Setup

• آماده شدن برای انتشار Getting Ready to Publish

• پیکربندی CLI Configuring the CLI

• انتشار به NPM Publishing to NPM

• سازمان های NPM NPM Organizations

• اعلام بسته های محدوده Declaring Scoped Packages

• Refactoring نام های بسته Refactoring Package Names

• حسابرسی وابستگی های توسعه دهنده Auditing Dev Dependencies

• اضافه کردن اسکریپت های ساخت Adding Build Scripts

• مورد برای بسته بندی The Case for Bundling

• اجرای ESBuild Running ESBuild

• ایجاد یک مخزن Creating a Repository

• انتشار با لرنا Publishing with Lerna

• آیا کار می کند؟ Does it Work?

• مراحل بعدی Next Steps

ضمیمه: TypeScript Appendix: TypeScript

• یادداشت سریع Quick Note

• نمای کلی TypeScript TypeScript Overview

• راه اندازی محیط Environment Setup

• اطلاعات مهم نسخه Axios Important Axios Version Information

• اولین برنامه A First App

• اجرای کد TypeScript Executing TypeScript Code

• یک تغییر سریع One Quick Change

• گرفتن خطاها با TypeScript Catching Errors with TypeScript

• گرفتن خطاهای بیشتر! Catching More Errors!

• بررسی اجمالی دوره Course Overview

• انواع Types

• بیشتر در مورد انواع More on Types

• نمونه هایی از انواع Examples of Types

• کجا از انواع استفاده می کنیم؟ Where Do We Use Types?

• Annotations and Inference را تایپ کنید Type Annotations and Inference

• حاشیه نویسی با متغیرها Annotations with Variables

• حاشیه نویسی های تحت اللفظی شی Object Literal Annotations

• حاشیه نویسی در اطراف توابع Annotations Around Functions

• درک استنتاج Understanding Inference

• هر نوع The Any Type

• تعمیر نوع "Any". Fixing the "Any" Type

• اولیه سازی با تاخیر Delayed Initialization

• وقتی استنباط کار نمی کند When Inference Doesn't Work

• بیشتر در مورد حاشیه نویسی در اطراف توابع More on Annotations Around Functions

• استنتاج پیرامون توابع Inference Around Functions

• حاشیه نویسی برای توابع ناشناس Annotations for Anonymous Functions

• باطل و هرگز Void and Never

• تخریب ساختار با حاشیه نویسی Destructuring with Annotations

• حاشیه نویسی در اطراف اشیاء Annotations Around Objects

• آرایه ها در TypeScript Arrays in TypeScript

• چرا آرایه های تایپ شده؟ Why Typed Arrays?

• انواع متعدد در آرایه ها Multiple Types in Arrays

• زمان استفاده از آرایه های تایپ شده When to Use Typed Arrays

• تاپل ها در TypeScript Tuples in TypeScript

• تاپل ها در عمل Tuples in Action

• چرا تاپل ها؟ Why Tuples?

• رابط ها Interfaces

• حاشیه نویسی های نوع طولانی Long Type Annotations

• رفع حاشیه نویسی با رابط ها Fixing Annotations with Interfaces

• نحو در اطراف رابط ها Syntax Around Interfaces

• توابع در رابط ها Functions In Interfaces

• استفاده مجدد از کد با رابط ها Code Reuse with Interfaces

• طرح کلی با رابط ها General Plan with Interfaces

• کلاس ها Classes

• ارث اساسی Basic Inheritance

• اصلاح کننده های روش کلاس Class Method Modifiers

• فیلدها در کلاس ها Fields in Classes

• فیلدهای دارای ارث Fields with Inheritance

• محل استفاده از کلاس ها Where to Use Classes

• دستورالعمل بسته به روز شد Updated Parcel Instructions

• نمای کلی برنامه App Overview

• بسته بندی با بسته Bundling with Parcel

• ساختار پروژه Project Structure

• اطلاعات مهم درباره نصب Faker IMPORTANT Info About Faker Installation

• تولید داده های تصادفی Generating Random Data

• فایل های تعریف را تایپ کنید Type Definition Files

• استفاده از نوع فایل های تعریف Using Type Definition Files

• صدور بیانیه ها در TypeScript Export Statements in TypeScript

• تعریف شرکت Defining a Company

• نکته مهم درباره کلید Google Maps Important Note About Google Maps Key

• افزودن پشتیبانی Google Maps Adding Google Maps Support

• به‌روزرسانی مورد نیاز برای کتابخانه جدید @types Required Update for New @types Library

• ادغام نقشه های گوگل با TypeScript Google Maps Integration with TypeScript

• کاوش در فایل های تعریف نوع Exploring Type Definition Files

• قابلیت پنهان کردن Hiding Functionality

• چرا از اصلاح کننده های خصوصی استفاده کنیم؟ در اینجا چرا Why Use Private Modifiers? Here's Why

• اضافه کردن نشانگرها Adding Markers

• کد تکراری Duplicate Code

• یک راه حل ممکن One Possible Solution

• محدود کردن دسترسی با رابط ها Restricting Access with Interfaces

• بررسی نوع ضمنی Implicit Type Checks

• نمایش پنجره های پاپ آپ Showing Popup Windows

• به روز رسانی تعاریف رابط Updating Interface Definitions

• بندهای اجرایی اختیاری Optional Implements Clauses

• جمع بندی برنامه App Wrapup

ضمیمه: TypeScript Appendix: TypeScript

• یادداشت سریع Quick Note

• نمای کلی TypeScript TypeScript Overview

• راه اندازی محیط Environment Setup

• اطلاعات مهم نسخه Axios Important Axios Version Information

• اولین برنامه A First App

• اجرای کد TypeScript Executing TypeScript Code

• یک تغییر سریع One Quick Change

• گرفتن خطاها با TypeScript Catching Errors with TypeScript

• گرفتن خطاهای بیشتر! Catching More Errors!

• بررسی اجمالی دوره Course Overview

• انواع Types

• بیشتر در مورد انواع More on Types

• نمونه هایی از انواع Examples of Types

• کجا از انواع استفاده می کنیم؟ Where Do We Use Types?

• Annotations and Inference را تایپ کنید Type Annotations and Inference

• حاشیه نویسی با متغیرها Annotations with Variables

• حاشیه نویسی های تحت اللفظی شی Object Literal Annotations

• حاشیه نویسی در اطراف توابع Annotations Around Functions

• درک استنتاج Understanding Inference

• هر نوع The Any Type

• تعمیر نوع "Any". Fixing the "Any" Type

• اولیه سازی با تاخیر Delayed Initialization

• وقتی استنباط کار نمی کند When Inference Doesn't Work

• بیشتر در مورد حاشیه نویسی در اطراف توابع More on Annotations Around Functions

• استنتاج پیرامون توابع Inference Around Functions

• حاشیه نویسی برای توابع ناشناس Annotations for Anonymous Functions

• باطل و هرگز Void and Never

• تخریب ساختار با حاشیه نویسی Destructuring with Annotations

• حاشیه نویسی در اطراف اشیاء Annotations Around Objects

• آرایه ها در TypeScript Arrays in TypeScript

• چرا آرایه های تایپ شده؟ Why Typed Arrays?

• انواع متعدد در آرایه ها Multiple Types in Arrays

• زمان استفاده از آرایه های تایپ شده When to Use Typed Arrays

• تاپل ها در TypeScript Tuples in TypeScript

• تاپل ها در عمل Tuples in Action

• چرا تاپل ها؟ Why Tuples?

• رابط ها Interfaces

• حاشیه نویسی های نوع طولانی Long Type Annotations

• رفع حاشیه نویسی با رابط ها Fixing Annotations with Interfaces

• نحو در اطراف رابط ها Syntax Around Interfaces

• توابع در رابط ها Functions In Interfaces

• استفاده مجدد از کد با رابط ها Code Reuse with Interfaces

• طرح کلی با رابط ها General Plan with Interfaces

• کلاس ها Classes

• ارث اساسی Basic Inheritance

• اصلاح کننده های روش کلاس Class Method Modifiers

• فیلدها در کلاس ها Fields in Classes

• فیلدهای دارای ارث Fields with Inheritance

• محل استفاده از کلاس ها Where to Use Classes

• دستورالعمل بسته به روز شد Updated Parcel Instructions

• نمای کلی برنامه App Overview

• بسته بندی با بسته Bundling with Parcel

• ساختار پروژه Project Structure

• اطلاعات مهم درباره نصب Faker IMPORTANT Info About Faker Installation

• تولید داده های تصادفی Generating Random Data

• فایل های تعریف را تایپ کنید Type Definition Files

• استفاده از نوع فایل های تعریف Using Type Definition Files

• صدور بیانیه ها در TypeScript Export Statements in TypeScript

• تعریف شرکت Defining a Company

• نکته مهم درباره کلید Google Maps Important Note About Google Maps Key

• افزودن پشتیبانی Google Maps Adding Google Maps Support

• به‌روزرسانی مورد نیاز برای کتابخانه جدید @types Required Update for New @types Library

• ادغام نقشه های گوگل با TypeScript Google Maps Integration with TypeScript

• کاوش در فایل های تعریف نوع Exploring Type Definition Files

• قابلیت پنهان کردن Hiding Functionality

• چرا از اصلاح کننده های خصوصی استفاده کنیم؟ در اینجا چرا Why Use Private Modifiers? Here's Why

• اضافه کردن نشانگرها Adding Markers

• کد تکراری Duplicate Code

• یک راه حل ممکن One Possible Solution

• محدود کردن دسترسی با رابط ها Restricting Access with Interfaces

• بررسی نوع ضمنی Implicit Type Checks

• نمایش پنجره های پاپ آپ Showing Popup Windows

• به روز رسانی تعاریف رابط Updating Interface Definitions

• بندهای اجرایی اختیاری Optional Implements Clauses

• جمع بندی برنامه App Wrapup

جایزه! Bonus!

• جایزه! Bonus!

جایزه! Bonus!

• جایزه! Bonus!