آموزش آشنایی با TypeScript

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

شروع شدن Getting Started

• به دوره خوش آمدید! Welcome to the Course!

• TypeScript چیست و چرا باید از آن استفاده کرد؟ What Is TypeScript & Why Should You Use It?

• به انجمن آموزشی ما بپیوندید Join Our Learning Community

• نصب و استفاده از TypeScript Installing & Using TypeScript

• مزایای TypeScript - نمای کلی TypeScript Advantages - Overview

• طرح کلی دوره Course Outline

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

• راه اندازی یک ویرایشگر کد/IDE Setting Up A Code Editor / IDE

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

مبانی TypeScript و انواع پایه TypeScript Basics & Basic Types

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

• استفاده از انواع Using Types

• انواع تایپ اسکریپت در مقابل انواع جاوا اسکریپت TypeScript Types vs JavaScript Types

• مهم: نوع پوشش Important: Type Casing

• کار با اعداد، رشته ها و بولی ها Working with Numbers, Strings & Booleans

• تعیین نوع و استنتاج نوع Type Assignment & Type Inference

• درک انواع Understanding Types

• انواع شی Object Types

• اشیاء و انواع تودرتو Nested Objects & Types

• انواع آرایه ها Arrays Types

• کار با Tuples Working with Tuples

• کار با Enums Working with Enums

• نوع "هر" The "any" Type

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

• انواع تحت اللفظی Literal Types

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

• نام مستعار و انواع شی را تایپ کنید Type Aliases & Object Types

• انواع و مفاهیم اصلی Core Types & Concepts

• انواع بازگشت تابع و "باطل" Function Return Types & "void"

• به عنوان انواع عمل می کند Functions as Types

• انواع عملکرد و پاسخ به تماس Function Types & Callbacks

• توابع و انواع Functions & Types

• نوع "ناشناخته". The "unknown" Type

• نوع "هرگز". The "never" Type

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کامپایلر TypeScript (و پیکربندی آن) The TypeScript Compiler (and its Configuration)

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

• استفاده از "حالت تماشا" Using "Watch Mode"

• کامپایل کل پروژه/چندین فایل Compiling the Entire Project / Multiple Files

• شامل و حذف فایل ها Including & Excluding Files

• تنظیم یک هدف کامپایل Setting a Compilation Target

• آشنایی با TypeScript Core Libs Understanding TypeScript Core Libs

• تنظیمات بیشتر و گزینه های کامپایل More Configuration & Compilation Options

• کار با Source Maps Working with Source Maps

• rootDir و outDir rootDir and outDir

• توقف انتشار فایل ها در خطاهای کامپایل Stop Emitting Files on Compilation Errors

• تدوین دقیق Strict Compilation

• گزینه های کیفیت کد Code Quality Options

• اشکال زدایی با کد ویژوال استودیو Debugging with Visual Studio Code

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

نسل بعدی جاوا اسکریپت و تایپ اسکریپت Next-generation JavaScript & TypeScript

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

• "بگذار" و "const" "let" and "const"

• توابع پیکان Arrow Functions

• پارامترهای تابع پیش فرض Default Function Parameters

• اپراتور Spread (...) The Spread Operator (...)

• پارامترهای استراحت Rest Parameters

• آرایه و تخریب شی Array & Object Destructuring

• چگونه کد کامپایل و بسته بندی می شود How Code Gets Compiled & Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کلاس ها و رابط ها Classes & Interfaces

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

• کلاس ها چیست؟ What are Classes?

• ایجاد یک کلاس اول Creating a First Class

• کامپایل به جاوا اسکریپت Compiling to JavaScript

• توابع سازنده و کلمه کلیدی "این". Constructor Functions & The "this" Keyword

• اصلاح کننده های دسترسی "خصوصی" و "عمومی". "private" and "public" Access Modifiers

• حروف اوليه Shorthand Initialization

• خواص "خواندنی". "readonly" Properties

• مبانی کلاس Class Basics

• وراثت Inheritance

• ویژگی های باطل و اصلاح کننده "محافظت شده". Overriding Properties & The "protected" Modifier

• گیرنده و تنظیم کننده Getters & Setters

• روش ها و خواص استاتیک Static Methods & Properties

• کلاس های چکیده Abstract Classes

• Singletons و سازندگان خصوصی Singletons & Private Constructors

• کلاس ها - خلاصه Classes - A Summary

• کلاس ها Classes

• اولین رابط A First Interface

• استفاده از رابط ها با کلاس ها Using Interfaces with Classes

• چرا رابط ها؟ Why Interfaces?

• ویژگی های رابط فقط خواندنی Readonly Interface Properties

• گسترش رابط ها Extending Interfaces

• رابط ها به عنوان انواع توابع Interfaces as Function Types

• پارامترها و خصوصیات اختیاری Optional Parameters & Properties

• کامپایل رابط ها به جاوا اسکریپت Compiling Interfaces to JavaScript

• رابط ها Interfaces

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

انواع پیشرفته Advanced Types

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

• انواع تقاطع Intersection Types

• اطلاعات بیشتر در مورد Type Guards More on Type Guards

• اتحادیه های تبعیض آمیز Discriminated Unions

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

• ویژگی های شاخص Index Properties

• عملکرد اضافه بار Function Overloads

• زنجیربندی اختیاری Optional Chaining

• ادغام باطل Nullish Coalescing

• انواع پیشرفته Advanced Types

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ژنریک ها Generics

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

• ژنریک های داخلی و ژنریک چیست؟ Built-in Generics & What are Generics?

• ایجاد یک تابع عمومی Creating a Generic Function

• کار با محدودیت ها Working with Constraints

• یک عملکرد عمومی دیگر Another Generic Function

• محدودیت "کلید". The "keyof" Constraint

• کلاس های عمومی Generic Classes

• اولین خلاصه A First Summary

• انواع ابزار عمومی Generic Utility Types

• انواع عمومی در مقابل انواع اتحادیه Generic Types vs Union Types

• ژنریک ها Generics

• منابع و لینک های مفید Useful Resources & Links

دکوراتورها Decorators

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

• دکوراتور درجه یک A First Class Decorator

• کار با کارخانه های دکوراتور Working with Decorator Factories

• ساخت دکوراتورهای مفیدتر Building More Useful Decorators

• اضافه کردن چند دکوراتور Adding Multiple Decorators

• غواصی در دکوراتورهای املاک Diving into Property Decorators

• لوازم جانبی و پارامترهای تزئینی Accessor & Parameter Decorators

• دکوراتورها چه زمانی اجرا می کنند؟ When Do Decorators Execute?

• بازگشت (و تغییر) یک کلاس در یک دکوراتور کلاس Returning (and changing) a Class in a Class Decorator

• دیگر انواع دکوراتور بازگشت Other Decorator Return Types

• مثال: ایجاد یک دکوراتور "Autobind". Example: Creating an "Autobind" Decorator

• اعتبار سنجی با دکوراتورها - مراحل اول Validation with Decorators - First Steps

• اعتبارسنجی با دکوراتورها - به پایان رسید Validation with Decorators - Finished

• رفع اشکال Validator Fixing a Validator Bug

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

زمان تمرین! بیایید یک پروژه Drag & Drop بسازیم Practice Time! Let's build a Drag & Drop Project

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

• شروع شدن Getting Started

• انتخاب عنصر DOM و ارائه OOP DOM Element Selection & OOP Rendering

• تعامل با عناصر DOM Interacting with DOM Elements

• ایجاد و استفاده از دکوراتور "Autobind". Creating & Using an "Autobind" Decorator

• واکشی ورودی کاربر Fetching User Input

• ایجاد یک قابلیت اعتبارسنجی قابل استفاده مجدد Creating a Re-Usable Validation Functionality

• رندر کردن لیست پروژه ها Rendering Project Lists

• مدیریت وضعیت برنامه با Singletons Managing Application State with Singletons

• کلاس های بیشتر و انواع سفارشی More Classes & Custom Types

• فیلتر کردن پروژه ها با Enums Filtering Projects with Enums

• اضافه کردن وراثت و ژنریک Adding Inheritance & Generics

• رندر کردن آیتم های پروژه با یک کلاس Rendering Project Items with a Class

• استفاده از گیرنده Using a Getter

• استفاده از رابط ها برای پیاده سازی Drag & Drop Utilizing Interfaces to Implement Drag & Drop

• رویدادها را بکشید و وضعیت فعلی را در UI منعکس کنید Drag Events & Reflecting the Current State in the UI

• اضافه کردن یک منطقه قابل رها کردن Adding a Droppable Area

• پایان کشیدن و رها کردن Finishing Drag & Drop

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ماژول ها و فضاهای نام Modules & Namespaces

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

• نوشتن کد ماژول - گزینه های شما Writing Module Code - Your Options

• کار با فضاهای نام Working with Namespaces

• سازماندهی فایل ها و پوشه ها Organizing Files & Folders

• مشکل در واردات فضای نام A Problem with Namespace Imports

• مهم: از کروم یا فایرفاکس استفاده کنید Important: Use Chrome or Firefox

• استفاده از ماژول های ES Using ES Modules

• درک نحوهای مختلف واردات و صادرات Understanding various Import & Export Syntaxes

• کد در ماژول ها چگونه اجرا می شود؟ How Does Code In Modules Execute?

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

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

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

• Webpack چیست و چرا به آن نیاز داریم؟ What is Webpack & Why do we need it?

• نصب پک وب و وابستگی های مهم Installing Webpack & Important Dependencies

• افزودن تنظیمات ورودی و خروجی Adding Entry & Output Configuration

• افزودن پشتیبانی TypeScript با بسته ts-loader Adding TypeScript Support with the ts-loader Package

• تنظیمات Webpack را تنظیم کنید Adjust Webpack Config

• اتمام راه‌اندازی و افزودن webpack-dev-server Finishing the Setup & Adding webpack-dev-server

• اضافه کردن یک گردش کار تولید Adding a Production Workflow

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کتابخانه های شخص ثالث و TypeScript 3rd Party Libraries & TypeScript

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

• استفاده از کتابخانه های جاوا اسکریپت (!) با TypeScript Using JavaScript (!) Libraries with TypeScript

• استفاده از "اعلام" به عنوان "آخرین راه حل" Using "declare" as a "Last Resort"

• بدون نوع مورد نیاز: کلاس ترانسفورماتور No Types Needed: class-transformer

• TypeScript-Embracing: class-validator TypeScript-embracing: class-validator

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

زمان برای تمرین! بیایید یک برنامه «انتخاب و اشتراک‌گذاری مکان» بسازیم (از جمله Google Maps) Time to Practice! Let's build a "Select & Share a Place" App (incl. Google Maps)

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

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

• دریافت ورودی کاربر Getting User Input

• تنظیم یک کلید Google API Setting Up a Google API Key

• استفاده از Axios برای واکشی مختصات برای یک آدرس وارد شده Using Axios to Fetch Coordinates for an Entered Address

• ارائه نقشه با Google Maps (از جمله انواع!) Rendering a Map with Google Maps (incl. Types!)

• کار با Maps بدون کارت اعتباری Working with Maps without a Credit Card

• منابع و لینک های مفید Useful Resources & Links

React.js و TypeScript React.js & TypeScript

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

• راه اندازی یک پروژه React + TypeScript Setting Up a React + TypeScript Project

• چگونه React + TypeScript با هم کار می کنند؟ How Do React + TypeScript Work Together?

• کار با Props و Types for Props Working with Props and Types for Props

• دریافت ورودی کاربر با "refs" Getting User Input with "refs"

• ارتباطات متقابل Cross-Component Communication

• کار با State & Types Working with State & Types

• مدیریت بهتر ایالت Managing State Better

• لوازم بیشتر و کارهای دولتی More Props & State Work

• اضافه کردن یک ظاهر طراحی شده Adding Styling

• انواع دیگر ویژگی‌های React (مانند Redux یا Routing) Types for other React Features (e.g. Redux or Routing)

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

Node.js + Express & TypeScript Node.js + Express & TypeScript

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

• اجرای کد TypeScript با Node.js Executing TypeScript Code with Node.js

• راه اندازی یک پروژه Setting up a Project

• راه‌اندازی و کار با انواع (در برنامه‌های Node + Express) به پایان رسید Finished Setup & Working with Types (in Node + Express Apps)

• افزودن میان افزار و انواع Adding Middleware & Types

• کار با کنترلرها و بدنه درخواست تجزیه Working with Controllers & Parsing Request Bodies

• عملیات CRUD بیشتر More CRUD Operations

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

خلاصه دوره Course Roundup

• با تشکر از حضور در دوره! Thanks for being part of the course!