آموزش تایپ اسکریپت عملی

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

معرفی Introduction

• اطلاعات تایپ اسکریپت Typescript Info

برپایی Setup

• اطلاعات مفید Useful Info

• مخزن Github Github Repository

• قالب Template

• فایل ها و پوشه ها Files and Folders

• مرحله ساخت Build Step

مبانی تایپ اسکریپت Typescript Fundamentals

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

• نوع استنتاج Type Inference

• چالش اول First Challenge

• اطلاعات راه اندازی Setup Info

• نوع اتحادیه Union Type

• نوع: هر Type : Any

• مثال عملی Practical Example

• چالش - نوع اتحادیه Challenge - Union Type

• آرایه ها Arrays

• چالش - آرایه ها Challenge - Arrays

• مبانی شی Object Fundamentals

• چالش - اشیاء Challenge - Objects

• توابع - پارامترها Functions - Parameters

• توابع - برمی گرداند Functions - Returns

• نوع: هر نمونه Type : Any Example

• چالش - توابع 1 Challenge - Functions 1

• توابع - پارامترهای اختیاری Functions - Optional Parameters

• توابع - پارامترهای پیش فرض Functions - Default Parameters

• توابع - پارامتر استراحت Functions - Rest Parameter

• توابع - کلمه کلیدی باطل Functions - Void Keyword

• توابع - محافظ نوع Functions - Type Guards

• توابع - اشیاء به عنوان پارامتر Functions - Objects As Parameters

• بررسی اموال مازاد Excess Property Check

• چالش - توابع II Challenge - Functions II

• نام مستعار را تایپ کنید Type Alias

• نام مستعار را تایپ کنید - اطلاعات اضافی Type Alias - Additional Info

• چالش - نوع مستعار Challenge - Type Alias

• نوع تقاطع Intersection Type

• ویژگی های محاسبه شده Computed Properties

• رابط - مبانی Interface - Fundamentals

• رابط - روش ها Interface - Methods

• روش های رابط - گزینه های بیشتر Interface Methods - More Options

• Calenge - رابط I Callenge - Interface I

• رابط - ادغام و گسترش Interface - Merge and Extend

• چالش - رابط II Challenge - Interface II

• رابط - نوع Predicate Interface - Type Predicate

• رابط در مقابل نوع مستعار Interface vs Type Alias

• چندتایی Tuple

• Enum - مبانی Enum - Fundamentals

• Enum - نقشه برداری معکوس Enum - Reverse Mapping

• چالش - Tuple و Enum Challenge - Tuple and Enum

• تایپ Assertion Type Assertion

• نوع - نامشخص Type - Unknown

• نوع - هرگز Type - Never

• ماژول ها - مقدمه Modules - Intro

• ماژول ها - ES6 Modules - ES6

• ماژول ها - فایل JS Modules - JS File

• تایپ گارد - Typeof Type Guards - Typeof

• تایپ گارد - برابری و "در" Type Guards - Equality and "in"

• نگهبانان نوع - حقیقت و دروغ Type Guards - Truthy and Falsy

• محافظ نوع - Instanceof Type Guards - Instanceof

• محافظ نوع - نوع محمول Type Guards - Type Predicate

• "هرگز" Gotcha را تایپ کنید Type "never" Gotcha

• تایپ گارد - اتحادیه های تبعیض آمیز Type Guards - Discriminated Unions

• Generics - مقدمه Generics - Intro

• Generics - اولین تابع و رابط Generics - First Function and Interface

• ژنریک - مثال وعده Generics - Promise Example

• Generics - ایجاد آرایه Generics - Create Array

• ژنریک - انواع مختلف Generics - Multiple Types

• Generics - محدودیت های نوع Generics - Type Constraints

• Generics - نوع محدودیت ها مثال دوم Generics - Type Constraints Second Example

• Generics - نوع پیش فرض Generics - Default Type

• واکشی داده - مبانی Fetch Data - Basics

• واکشی داده - نوع راه اندازی Fetch Data - Setup Type

• واکشی داده - گوچا Fetch Data - Gotcha

• کتابخانه زود Zod Library

• فایل های اعلامیه Declaration Files

• پیکربندی TS TS Config

• کلاس ها - مقدمه Classes - Intro

• کلاس ها - ویژگی پیش فرض Classes - Default Property

• کلاس ها - اصلاح کننده فقط خواندنی Classes - Readonly Modifier

• کلاس ها - اصلاح کننده های عمومی و خصوصی Classes - Public and Private Modifiers

• کلاس ها - میانبر سازنده Classes - Constructor Shortcut

• کلاس ها - گیرنده ها و ستترها Classes - Getters and Setters

• کلاس ها - پیاده سازی رابط Classes - Implement Interface

• پروژه وظایف - راه اندازی Tasks Project - Setup

• پروژه وظایف - اطلاعات مفید Tasks Project - Useful Info

• پروژه وظایف - عناصر را انتخاب کنید Tasks Project - Select Elements

• پروژه وظایف - ارسال رویداد Tasks Project - Submit Event

• پروژه وظایف - رویداد Gotcha Tasks Project - Event Gotcha

• پروژه وظایف - اضافه کردن وظیفه Tasks Project - Add Task

• پروژه Tasks - Render Task Tasks Project - Render Task

• پروژه وظایف - ذخیره سازی محلی Tasks Project - Local Storage

• پروژه وظایف - چک باکس Tasks Project - Checkbox

Typescript و React Typescript and React

• برپایی Setup

• فایل ها و پوشه ها Files and Folders

• بازگشت مؤلفه Component Return

• لوازم جانبی - درون خطی Props - Inline

• لوازم - نام مستعار/رابط را تایپ کنید Props - Type Alias / Interface

• پشتیبانی کودکان Children Prop

• حالت State

• ایالت - فهرست سفارشی State - Custom List

• رویدادها - تغییر رویداد Events - Change Event

• رویدادها - فرم رویداد Events - Form Event

• چالش - مقدمه Challenge - Intro

• چالش - راه حل اول Challenge - First Solution

• چالش - راه حل جایگزین Challenge - Alternative Solution

• چالش - راه حل تایپ اسکریپت Challenge - Typescript Solution

• Context API - مثال پایه Context API - Basic Example

• Context API - مثال تم Context API - Theme Example

• useReducer - راه اندازی useReducer - Setup

• useReducer - شمارنده useReducer - Counter

• useReducer - وضعیت useReducer - Status

• Fetch Data - UseEffect و Fetch API Fetch Data - UseEffect and Fetch API

• واکشی داده - نوع و طرحواره Fetch Data - Type and Schema

• واکشی داده - React Query و Axios Fetch Data - React Query and Axios

• RTK - برش RTK - Slice

• RTK - راه اندازی RTK - Setup

• RTK - کامل RTK - Complete

• پروژه وظایف - راه اندازی Tasks Project - Setup

• پروژه وظایف - تنظیم فرم Tasks Project - Form Setup

• پروژه وظایف - اضافه کردن وظیفه Tasks Project - Add Task

• پروژه وظایف - لیست Tasks Project - List

• پروژه وظایف - ذخیره سازی محلی Tasks Project - Local Storage

برنامه فروشگاه Store App

• مقدمه Intro

• نصب/راه اندازی Install/Setup

• تکرار واضحات Boilerplate

• معرفی Tailwind Tailwind Intro

• اطلاعات باد دم Tailwind Info

• Tailwind نصب کنید Tailwind Install

• Shadcn/ui نصب کنید Shadcn/ui Install

• اطلاعات Shadcn/ui Shadcn/ui Info

• Redux Toolkit - راه اندازی Redux Toolkit - Setup

• ایجاد صفحات Create Pages

• React Router - راه اندازی React Router - Setup

• کامپوننت پیوند Link Component

• مولفه خروجی - طرح بندی مشترک Outlet Component - Shared Layout

• کامپوننت هدر Header Component

• کلاس سفارشی Tailwind Tailwind Custom Class

• کامپوننت نوار ناوبری - راه اندازی Navbar Component - Setup

• جزء لوگو Logo Component

• لیست پیوندها Links List

• کامپوننت کشویی پیوندها Links Dropdown Component

• کامپوننت NavLinks NavLinks Component

• تغییر زمینه Change Theme

• تابع ApplyTheme ApplyTheme Function

• قطعه تم Theme Slice

• مولفه ModeToggle ModeToggle Component

• کامپوننت CartButton CartButton Component

• کامپوننت ErrorPage ErrorPage Component

• درباره کامپوننت صفحه About Page Component

• مولفه عنصر خطا Error Element Component

• صفحه فرود - راه اندازی Landing Page - Setup

• تابع واکشی سفارشی Custom Fetch Function

• انواع محصول Product Types

• عملکرد لودر Loader Function

• صفحه فرود - لودر Landing Page - Loader

• عنوان بخش Section Title

• تابع FormatAsDollars FormatAsDollars Function

• مولفه شبکه محصولات Products Grid Component

• کامپوننت قهرمان Hero Component

• چرخ فلک قهرمان Hero Carousel

• صفحه محصولات - راه اندازی Products Page - Setup

• جزء لیست محصولات Products List Component

• کامپوننت ظرف محصولات Products Container Component

• بارگیری جهانی - راه اندازی Global Loading - Setup

• در حال بارگذاری کامپوننت Loading Component

• جزء فیلترها - راه اندازی Filters Component - Setup

• پارامترهای پرس و جو Query Params

• مقدار پیش فرض Default Value

• ورودی فرم Form Input

• انتخاب فرم Form Select

• محدوده فرم Form Range

• چک باکس فرم Form Checkbox

• ظرف صفحه بندی - راه اندازی Pagination Container - Setup

• ساخت URL - راه اندازی Construct URL - Setup

• ظرف صفحه بندی Pagination Container

• ساخت URL - کامل شد Construct URL - Complete

• روتر React - پارامترهای URL React Router - URL Params

• صفحه محصول واحد - راه اندازی Single Product Page - Setup

• واکشی محصول واحد Fetch Single Product

• صفحه محصول واحد - رندر تصویر و اطلاعات Single Product Page - Render Image and Info

• جزء رنگ های محصول را انتخاب کنید Select Product Colors Component

• جزء مقدار محصول را انتخاب کنید Select Product Amount Component

• جزء نان تست Toast Component

• سبد خرید - راه اندازی Cart Slice - Setup

• افزودن آیتم - کاهنده Add Item - Reducer

• پاک کردن سبد خرید - کاهنده Clear Cart - Reducer

• حذف مورد - کاهنده Delete Item - Reducer

• ویرایش مورد - کاهنده Edit Item - Reducer

• قابلیت AddToCart AddToCart Functionality

• صفحه سبد خرید - راه اندازی Cart Page - Setup

• جزء کل سبد خرید Cart Totals Component

• لیست اقلام سبد خرید Cart Items List

• ستون اول First Column

• ستون دوم Second Column

• ستون سوم و چهارم Third and Fourth Column

• برش کاربر User Slice

• ثبت نام و ورود به سیستم درخواست اطلاعات API Register and Login Request API Info

• ثبت نام تنظیم صفحه Register Page Setup

• ثبت نام اقدام کاربر Register User Action

• ثبت درخواست کاربر Register User Request

• کامپوننت دکمه ارسال Submit Button Component

• راه اندازی صفحه ورود Login Page Setup

• ورود به سیستم درخواست کاربر مهمان Login Guest User Request

• ورود به سیستم اقدام و درخواست کاربر Login User Action and Request

• دسترسی به کاربر در کامپوننت سرصفحه Access User in Header Component

• دسترسی به کاربر در NavLinks، LinksDropdown و CartButton Components Access User in NavLinks, LinksDropdown and CartButton Components

• تنظیم صفحه را بررسی کنید Checkout Page Setup

• پرداخت صفحه لودر Checkout Page Loader

• تنظیم مؤلفه فرم پرداخت Checkout Form Component Setup

• اقدام فرم پرداخت Checkout Form Action

• نوع پاسخ سفارشات OrdersResponse Type

• سفارشات صفحه لودر Orders Page Loader

• جزء لیست سفارشات Orders List Component

• جزء صفحه بندی پیچیده Complex Pagination Component

• استقرار برنامه Deploy Application

جایزه Bonus

• جایزه Bonus