مقدمه

خوش‌آمد گویی!

مسیر یادگیری در کوئرا کالج

سیستم امتیازدهی و دریافت گواهی

تایپ‌اسکریپت چیست؟

آماده سازی محیط توسعه

اولین پروژه تایپ‌اسکریپتی

قواعد بنیادی

اهداف فصل

تفاوت تایپ‌ها در تایپ‌اسکریپت و جاوااسکریپت

آشنایی با تایپ‌های اصلی

آشنایی با توابع و تایپ خروجی | Functions

خوش‌آمد گویی

آشنایی با آرایه‌ها | Arrays

آرایه‌ها

جستجوی دودویی

آشنایی با تاپل‌ها | Tuples

آشنایی با مقادیر لیست شده | Enum‌‌s

چهار عمل اصلی

آشنایی با آبجکت‌ها | Objects

کار با آبجکت

مفاهیم پیشرفته

تایپ‌های پیشرفته | any, never, unknown

آشنایی با اینترفیس‌ها | interfaces

تایپ‌های شخصی‌سازی شده | Type Aliases

استخدام

تفاوت Interfaces و Types

دقیق‌تر کردن تایپ‌ها | Literal Types

اجتماع تایپ‌ها | Union Types

مساحت یاب

ادغام تایپ‌ها | Intersection Types

دانشگاه

اعلان تایپ‌ها | Type Assertions

آشنایی با Index Signature

زنجیر اختیاری | Optional Chaining

آشنایی با Nullish operator

لایک‌های اینستاگرام

کامپایلر تایپ‌اسکریپت | TypeScript Compiler

پیکربندی کامپایلر تایپ‌اسکریپت | tsconfig.json

برنامه نویسی تابعی

شیوه‌های برنامه‌نویسی | Programming paradigms

برنامه‌نویسی تابعی چیست؟

توابع مرتبه بالا | Higher-Order Functions

استخراج اعداد

حفظ کردن مقدار یک تابع | Memoization

غیر قابل تغییر شدن آبجکت و آرایه

تغییرناپذیری

اضافه بار کردن در توابع | Overloading

نمایش پیام

ماژول‌ها | Modules

مرور مطالب فصل

برنامه نویسی شیءگرا

برنامه‌نویسی شیءگرا چیست؟

کلاس‌ها و توابع سازنده آن‌ها

مدیریت محصول

متغیرهای اختیاری و readonly

کنترل دسترسی | Access Modifiers

عمومی یا خصوصی

متدهای Getter و Setter

مقادیر Static

حساب بانکی

ارث‌بری | Inheritance

مساحت دایره

بازنویسی متدها | Method Overriding

چندریختی | Polymorphism

متدها و کلاس‌های انتزاعی | Abstract Classes & methods

جنریک‌ها

چرا به Generic ها نیاز داریم؟

تایپ‌های سودمند | Utility Types

توابع جنریک | Generic Functions

اینترفیس‌های جنریک |  Generic Interfaces

نگاشت

کلاس‌های جنریک | Generic Classes

ارث‌بری در کلاس‌های جنریک | Extending Generic Classes

محدود کردن جنریک | Generic Constraints

اپراتور Keyof

تایپ‌های سودمند اختصاصی | Mapped Types

جیسون تایپ

اعتبارسنجی

پروژه نهایی

نگاهی به پروژه

شروع کار با VSCode Extension

QMark

تایپ‌اسکریپت در ری‌اکت

ساخت پروژه ری‌اکت با Vitejs | CRA

ایجاد کامپوننت و اینترفیس prop ها

استفاده از useState

استفاده از useReducer

پایتخت

استفاده از Axios و ارسال درخواست‌ به API

کوییز

استفاده از context

استفاده از  useRef

رویدادها | Events

کار با DTO ها در تایپ‌اسکریپت

تایپ‌اسکریپت در صنعت

پیش گفتار

بررسی OOP در Angular و پورتال مشتریان ایران‌سرور

جنریک‌ها در پورتال مشتریان ایران‌سرور

لیست دامنه‌های ثبت شده در ایران‌سرور

محدودسازی تایپ در مقالات زومیت

الگوی سازنده در زومیت

چالش سابمیشن کد در کوئرا

آشنایی با Vue.js

ساخت یک شمارنده در Vue.js

چالش جنریک‌ها در مستربلیط

در این درسنامه با هم یک پروژه‌ی ساده تایپ‌اسکریپتی را پیش می‌بریم.

همان‌طور که می‌دانید تایپ‌اسکریپت در نهایت به جاوا‌اسکریپت بازگردانده می‌شود. پس می‌توان از کد‌های معادل‌سازی شده به جاوااسکریپت هم استفاده کرد. :)

 می‌خواهیم یک پروژه‌ی تایپ‌اسکریپتی داشته‌باشیم و خروجی آن را بعد از تبدیل شدن به جاوااسکریپت، ببینیم.

در این پروژه ورود خودمان را به دنیای تایپ‌اسکریپت خوش‌آمد می‌گوییم! 😊

1. برای شروع یک پروژه‌ی تایپ‌اسکریپتی باید `typescript` را بر روی پروژه نصب کنیم.

2. وقتی نصب تمام می‌شود، `node_modules` ،`package-lock.json` ، `package.json` به پروژه‌ی ما اضافه خواهند شد. آن‌ها شامل اطلاعات مختلفی از جمله ورژن `typescript` نصب شده، نام پروژه و... است.

![ts project](/qbox/download/5IG2IvALCf/Untitled_4.jpeg)

3. حال باید یک فایل `tsconfig.json` بسازیم. داخل این فایل تنظیمات دلخواهی را بر روی کامپایلر تایپ‌اسکریپت اعمال می‌کنیم. از دو روش می‌توان این فایل را ساخت:

+ ساخت دستی یک فایل به نام `tsconfig.json` 
+ وارد کردن دستور زیر در ترمینال: (در این روش تمام آپشن‌ها و تنظیمات `tsconfig` به همراه توضیحات آن‌ها، موجود است. )
```
npx tsc --init
```


<details class="violet">
<summary> نمونه‌ای از یک `tsconfig.json`</summary>
```tsconfig.json
{
 "compilerOptions": {
 "target": "es5", 
 "module": "commonjs", 
 "allowJs": true,
 "outDir": "build", 
 }
}
```


مفهوم و کاربرد برخی از تنظیمات:
 + target : مشخص کردن نسخه جاوااسکریپتی که قرار است تولید شود
 + outdir : جاوااسکریپتی که قرار است تولید شود، داخل کدام فایل ایجاد و ذخیره شود
 + noEmit : اگر بخواهیم مانع تولید کد‌های جاوااسکریپتی، شویم این مقدار را `true`می کنیم
 + allowJs : اگر در حال تبدیل یک پروژه‌ی جاوااسکریپتی قدیمی به تایپ‌اسکریپت هستیم، این گزینه امکان استفاده فایل‌های `js` را در میان فایل‌های `ts` را به ما می‌دهد
 
</details>




4. حال وارد مرحله کدنویسی می‌شویم. یک فایل یا پسوند `ts` می‌سازیم و کد‌های مخصوص خوش‌آمد‌ گویی را داخل آن می‌نویسیم:


<details class="violet">
<summary> نکته </summary>
 با استفاده از تایپ‌اسکریپت نوع اشیا، متغیر‌ها، پارامتر‌ها و… را مشخص می‌کنیم.
 
 همان‌طور که در کد زیر مشاهده می‌کنید، با استفاده از `:` تایپ متغیر را به آن اختصاص می‌دهیم. به این عمل `Type Annotations` گفته می‌شود.

`Type Annotations` اختیاری است ولی با مشخص کردن تایپ‌ هر متغیر، امکان بروز خطا در هنگام توسعه برنامه بسیار پایین می‌آید و کد‌های اصولی‌تری خواهیم داشت.

تمام نوع‌های ابتدایی جاوااسکریپت، در تایپ‌اسکریپت هم وجود دارد، مثل عدد، رشته، آرایه و… که با تمامی آن‌ها در درسنامه‌های بعدی آشنا خواهیم شد.
 پس اصلا نگران برخی از قسمت‌های عجیب کد زیر نباشید چون بعدا با تمام آن‌ها آشنا می‌شویم. 😊
 

</details>


 
``` typescript welcome.ts
const data: string = "Welcome to typescript world";

function welcome(data: string): string {
 return data;
}

const result: string = welcome(data);
console.log(result);
```


5. حال کار ما با تایپ‌اسکریپت تمام شده‌ است و می‌خواهیم آن را به جاوااسکریپت تبدیل کنیم. وارد ترمینال شده و دستور `tsc` را در آن وارد می‌کنیم.

6. سپس یک فایل جدید به نام `build` برای ما ساخته می‌شود که کد‌های جاوااسکریپتی داخل آن قرار دارد. (نام فایل `build` است چون در `tsconfig` این نام را برای `outDir` مشخص کرده بودیم.)

![ts project](/qbox/download/vE9vJWpvfm/Untitled_3.jpeg)

<details class="green">
<summary> کدهای کامپایل شده در فایل `welcome.js` </summary>
```javascript welcome.js
var data = "Welcome to typescript world";

function welcome(data) {
 return data;
}

var result = welcome(data);
console.log(result);
```

</details>

7. برای دیدن خروجی کد جاوااسکریپتی می‌توان روش‌های مختلفی را امتحان کرد. ما می‌خواهیم از طریق `node` این کار انجام را دهیم. پس در ترمینال دستور زیر را وارد می‌کنیم:

```
 node build/welcome.js
```

 **خروجی**

```
Welcome to typescript world
```

آموزش کاربردی تایپ‌اسکریپت