TypeScript رو در ۳۰ دقیقه یاد بگیرید

TypeScript رو در ۳۰ دقیقه یاد بگیرید

در آموزش امروز قصد داریم تا با شما کاربران عزیز نگاهی به typescript ،یک زبان ترجمه به جاوااسکریپت که برای ایجاد برنامه های بزرگ و پیچیده برای برنامه نویسان نوشته شده است بیاندازیم.
این آموزش برای افرادی هست که با جاوااسکریپت بصورت حرفه ای آشنا هستند ولی اگر بسمت typescript بیایند،در آن مبتدی هستند.

ما بسیاری از ویژگی های پایه ای و کلیدی را درقالب مثال برای شما پوشش دادیم تا بتوانید به سادگی زبان رو یاد بگیرید.با ما همراه باشید.

مزایای استفاده از TypeScript

جاوااسکریپت به قدری عالی است که شما از خود،آیا واقعا نیازی است که من typescript رو یاد بگیرم؟ازلحاظ فنی،شما برای توسعه دهنده بهتر شدن نیازی به یادگیری تایپ اسکریپت ندارید،بسیاری از مردم حتی بدون آن هم خوبهستند.به هر حال کار با آن مزایایی دارد که بعضی از آن را برایتان بیان می کنیم.

  • با توجه به ساختار،نوشتن کد قابل پیش بینی بوده و اشکال زدایی آن بسیار آسان می باشد.
    به لطف ماژولها،namespaceها و پشتیبانی قدرتمند از OOP کار ساماندهی پایگاه کد برنامه های بسیار بزرگ و پیچیده را آسان کرده است.
  • typescript یک گام تلفیقی به جاوااسکریپت است که تمام خطاها را قبل از رسیدن به زمان اجرا و از دست رفتن داده ها برطرف می کند.
  • فریمورک آنگولار۲ توسط تایپ اسکریپت نوشته شده است و به توسعه دهنده ها نیز توصیه میشود از آن زبان در پروژه های خود استفاده نمایند.

نصب TypeScript

توجه:شما در این آموزش به NOD.js و NPM نیاز خواهید داشت.در صورت نداشتن آنها میتوانید از اینجا آنها را دریافت نمایید.

آسانترین راه برای نصب تایپ اسکریپ ،استفاده از npm است.با استفاده از دستور زیر شما تایپ اسکریپت سراسری نصب خواهید کرد.

npm install -g typescript

با استفاده از دستور زیر میتوانید بفهمید که آیا آن را بصورت صحیح نصب کرده اید یا خیر

tsc -v
Version 1.8.10

ویرایشگرهای متنی که توسط تایپ اسکریپ پشتیبانی میشوند

با وجود متن باز بودن تایپ اسکریپت ولی آن توسط ماکروسافت توسعه داده شده است به طوری که در پلتفرم ویژوال استودیو از آن پشتیبانی می کند.امروزه ویرایشگرهای مختلفی وجود دارند که از تایپ اسکریپت پشتیبانی میکنند.ما نمونه هایی از آن را برایتان معرفی می کنیم.
Visual Studio Code:یک ویرایشگر کد ماکروسافت است که از تایپ اسکریپت در داخل خود استفاده می کند.

پلاگین های رسمی رایگان که برای ویرایش متن های بلند مورد استفاده قرار می گیرند.

آخرین نسخه از WebStorm که از آن پشتیبانی می کند.

کامپایل به جاوا اسکریپت

فایل های تایپ اسکریپت با پسوند js. ذخیره میشوند لذا مرورگر ها نمیتوانند آن ها را بخوانند در نتیجه باید  اول به زبان جاوااسکریپت ترجمه شوند.این کار به چند روش مختلف انجام میشود:

  • یک روش استفاده از فرمان tsc میباشد که کمی قبل بهش اشاره کردیم.
  • بصورت مستقیم در ویژوال استودیو یا سایر ویرایشگرها
  • استفاده از دستور اجرا اتوماتیک شبیه gulp

به دلیل سادگی و آسان بودن روش اول برای مبتدی ها،ما از آن در ادامه بحث استفاده خواهیم کرد.

دستور زیر فایل main.ts را به فایل main.js ترجمه می کند.در صورت وجود فایلی با نام main.js فایل جدید بر روی آن ذخیره میشود.

tsc main.ts

ما همچنین میتوانیم چند فایل را بصورت همزمان ترجمه کنیم که برای اینکار از دستور زیر استفاده خواهیم کرد.

# Will result in separate .js files: main.js worker.js.
tsc main.ts worker.ts    

# Compiles all .ts files in the current folder. Does NOT work recursively.
tsc *.ts

ما همچنین میتوانیم از watch– برای اعمال اتوماتیک کامپایل هنگام ایجاد تغییرات استفاده نماییم.

# Initializes a watcher process that will keep main.js up to date.
tsc main.ts --watch

کاربران حرفه ای تایپ اسکریپت میتوانند فایل tsconfig.json ایجاد کنند که شامل تنظیمات پیچیده تری است.فایل پیکربندی،در پروژه های بزرگی که شامل تعداد زیادی فایل ts است که باید بصورت خودکار پردازش بشوند،بسیار ارزشمند بوده و کار انجام دستکاری را آسان می کند.اگر میخواهید بیشتر در مورد tsconfig.json بدانید به اینجا مراجعه فرمایید.

انواع ثابت

از ویژگی های ویژه تایپ اسکریپت پشتیبانی از نوشتار استاتیک است،این به معنی آن است که شما میتوانید از انواع متغییر ها استفاده نمایید  و کامپایلر مطمئنخواهد بود تا از متغییر های اشتباه استفاده نشده باشد.اگر نوع داده ها را حذف کنیم،کامپایلر بصورت خودکار نوع آنها را تشخیص خواهد داد.

در مثال پایین،هر متغییر،آرگومانهای توابع و یا مقادیر بازگشتی دارای نوع خاصی هستند که قبلا مشخص شده اند.

var burger: string = 'hamburger',     // رشته
    calories: number = 300,           // اعداد
    tasty: boolean = true;            // بولین

// شما میتوانید نوع  داده ها را هر زمان خواستید عوض کنید
// var burger = 'hamburger';

// تابع منتظر یک رشته و یک عدد
// اگر چیزی برگردانده نشود،تابع متوقف خواهد شد

function speak(food: string, energy: number): void {
  console.log("Our " + food + " has " + energy + " calories.");
}

speak(burger, calories);

حال اگر بخواهیم کد بالا را به جاوااسکریپت ترجمه کنیم،کد به شکل زیر خواهد بود

var burger = 'hamburger',
    calories = 300, 
    tasty = true; 

function speak(food, energy) {
    console.log("Our " + food + " has " + energy + " calories.");
}

speak(burger, calories);

اگر ما سعی کنیم یک کار غیر معمول(غیر قانونی) انجام بدهیم در آن صورت هنگام ترجمه توسط tsc با یک هشدار به ما مشخص می کند که کد دارای اشتباه است.برای مثال:

// متغییر از نوع بولین است ولی داده بصورت رشته داده شده است
var tasty: boolean = "I haven't tried it yet";

پیام خطایی که مشاهده خواهید کرد

main.ts(1,5): error TS2322: Type 'string' is not assignable to type 'boolean'.

 

همچنین اگر ما نوع داده ای اشتباهی را در توابع نیز به کار بریم به ما پیغام خطا می دهد.برای مثال:

function speak(food: string, energy: number): void{
  console.log("Our " + food + " has " + energy + " calories.");
}

// آرگومان ها با پارامترهای تابع همخوانی ندارند
speak("tripple cheesburger", "a ton of");

پیام خطایی که مشاهده خواهید کرد

main.ts(5,30): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

در زیر برخی از نوع داده های رایج را برایتان توضیح می دهیم.

Number:برای داده های عددی به کار می رود(تفاوتی بین اعداد صحیح،اعشاری و… ندارد)

String:برای داده های رشته ای به کار می رود

Boolean:مقادیر بولین(yes یا no)

Any:برای داده هایی که فرق نمیکند نوع آنها چه چیزی باشد.

Array:برای آرایه ها

Void:برای استفاده در توابعی که هیچ چیزی بر نمی گردانند.

برای مشاهده تمام نوع داده هایی که توسط تایپ اسکریپت پشتیبانی میشوند به اینجا مراجعه فرمایید.

رابط ها(interfaces)

رابط ها برای بررسی تناسب یک آبجکت با ساختار،مورد استفاده قرار میگیرند.با تعریف کردن رابط ها،ما میتوانیم ترکیب خاصی از نام ها را ایجاد کنیم تا مطمئن شویم که آنها با یکدیگر مورد استفاده قرار بگیرند.هنگام ترجمه به جاوااسکریپت،رابط ها ناپدید میشوند(آنها فقط برای کمک به توسعه دهنده ها می باشند).

در مثال زیر ما یک رابط ساده برای بررسی نوع آرگومان های تابع تعریف کرده ایم.

// ما در زیر یک رابط با متغییرهای آن و نوع آن را تعریف کرده ایم..
interface Food {
    name: string;
    calories: number;
}
 
//ما به تابع خود دستور داده ایم تا آبجکت های خود را از رابط food بدست آورد
//این روش باعث میشود تا ما خواصی را که نیاز داریم همیشه در دسترس باشند
function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " calories.");
}

//ما آبجکتی را که رابطهای food منتظر آن هستند را تعریف می کنیم.
// Notice that types will be inferred automatically.
//
var ice_cream = {
  name: "ice cream", 
  calories: 200
}

speak(ice_cream);

ما به متغییرها برای پردازش و تشخیص نوع داده نیاز داریم.در صورتی که بعضی چیزها را از دست بدیم یا نوع آن را اشتباه وارد کنیم یا نام آن را متفاوت وارد نماییم،کامپایلر برای ما پیغام خطا نمایش بدهد.به مثال زیر توجه نمایید

interface Food {
    name: string;
    calories: number;
}

function speak(food: Food): void{
  console.log("Our " + food.name + " has " + food.calories + " grams.");
}

// ما عمدا یک نام اشتباه را وارد کرده ایم.
var ice_cream = {
  nmae: "ice cream", 
  calories: 200
}

speak(ice_cream);
main.ts(16,7): error TS2345: Argument of type '{ nmae: string; calories: number; } 
is not assignable to parameter of type 'Food'. 
Property 'name' is missing in type '{ nmae: string; calories: number; }'.

آنچه در بالا بحث شد فقط مباحث مقدماتی بود و برای مطالعه بیشتر در مورد رابط ها(interfaces) به اینجا مراجعه فرمایید.

کلاس ها

در برنامه های با مقیاس بزرگتر،توسعه دهندگان از سبک شی گرا برای برنامه نویسی استفاده میشود(بویژه در زبان های جاوا و #C).تایپ اسکریپت یک کلاس سیستمی که بسیار شبیه به یکی از زبان های بالا می باشد ارائه می دهد که شامل وراثت،کلاس های انتزاعی،پیاده سازی رابط کاربری،setters/getters و … میباشد.

خوب مثال بالا را با استفاده از کلاس های تایپ اسکریپت ادامه می دهیم

class Menu {
  // خواص ما:
  // بصورت پیش فرص عمومی هستند ولی میتوانند بصورت خصوصی یا محافظت شده نیز باشند
  items: Array<string>;  
  pages: number;         

  
  constructor(item_list: Array<string>, total_pages: number) {
    this.items = item_list;    
    this.pages = total_pages;
  }

  // متدها
  list(): void {
    console.log("Our menu for today:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }
  }

} 

// ایجاد یک کلاس جدید.
var sundayMenu = new Menu(["pancakes","waffles","orange juice"], 1);

// فراخوانی لیست متد.
sundayMenu.list();

کسی که کمی با کدهای جاوا و#C آشنا باشد ،کدبالا بسیار برایش آشنا و شناخته شده خواهد بود.برای وراثت نیز همین طور است:

class HappyMeal extends Menu {
  // خواص به ارث برده میشوند

  // یک سازنده جدید تعریف میشود
  constructor(item_list: Array<string>, total_pages: number) {
    // In this case we want the exact same constructor as the parent class (Menu),
    //در این مورد ما می خواهیم از همان سازنده به عنوان کلاس مادراستفاده کنیم
    // To automatically copy it we can call super() - a reference to the parent's constructor.
    //برای کپی خودکار ما میتوانیم super() را فراخوانی کنیم-برای ارجاع به سازنده مادر
    super(item_list, total_pages);
  }

  // درست مانند خواص،متدها نیز از والدین به ارث میبرند
  // با این حال،چون ما تابع لیست  را نادیده خواهیم گرفت بنابراین ما آن را تغییر می دهیم.
  list(): void{
    console.log("Our special menu for children:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }

  }
}

// کلاس جدید HappyMeal را ایجاد می کنیم.
var menu_for_children = new HappyMeal(["candy","drink","toy"], 1);
menu_for_children.list();

جنریک ها(Generics)

جنریک ها الگوهای مشخصی هستند که به توابع اجازه می دهند تا آرگومانهایی از انواع مختلف را دریافت کنند.استفاده از جنریکها بسیار بهتر از استفاده از any برای نوع داده ها می باشد.در اسکریپزیر آرگومان ها را دریافت کرده و یک آرایه شامل همان آرگومان ها را برای ما باز می گرداند.

// قرار دادن(T) بعد از نام تابع به معنای آن است که آن یک تابع جنریک(عمومی)است
// هنگامی که ما تابع را فراخوانی کردیم،نوع "T" با نوع های واقعی جایگزین خواهند شد
// دریافت یک آرگومان از نوع T,
// برگرداندن آرایه ای ازنوع T.

function genericFunc<T>(argument: T): T[] {    
  var arrayOfT: T[] = [];    // ایجاد یک ارایه خالی از نوع T.
  arrayOfT.push(argument);   // Push, now arrayOfT = [argument].
  return arrayOfT;
}

var arrayFromString = genericFunc<string>("beep");
console.log(arrayFromString[0]);         // "beep"
console.log(typeof arrayFromString[0])   // رشته

var arrayFromNumber = genericFunc(42);
console.log(arrayFromNumber[0]);         // 42
console.log(typeof arrayFromNumber[0])   // عدد

هنگام فراخوانی تابع برای دفعه اول ما نوع آن را بصورت دستی رشته قرار دادیم.این باعث میشود تا کامپایلر نیاز نباشد تا نوع آرگومان مناسب را بصورت خودکار انتخاب نماید،مانند نوع فراخونی دوم.با وجود اجباری نبودن ،ولی تعیین نوع داده توسط کامپایلر باعث میشود تا  در سناریوهای پیچیده عملکرد خوبی داشته باشد.

برای مطالعه بیشتر در مورد جنریک ها به اینجا مراجعه نمایید.

ماژول ها

مفهوم مهم دیگری که هنگام کار بر روی پروژه های بزرگ مطرح میشود بحث ماژول ها است.ماژولار بودن باعث میشود تا شما کدهای خود را به بخش های کوچکی تقسیم کنید تا در صورت لزوم از آنها استفاده نمایید.اینکار باعث میشود تا کدهای شما دارای نظم و ترتیب باشند و از نوشتن کدهایی طولانی در یک بخش جلوگیری می کند.

در تایپ اسکریپت شما میتوانید انواع ماژول را وارد نموده یا یک ماژول را خروجی بگیرید اما بصورت واقعی نمی تواند بین فایل اتصال ایجاد کند.برای فعال سازی ماژول های خارجی شما به کتابخانه third-party نیاز خواهید داشت.( require.js برای مرورگر و CommonJS برای NODE.js).اجازه دهید  یک مثال ساده از ماژول تایپ اسکریپت توسط require.js برایتان بیان کنیم:

ما دو فایل داریم:یک تابع برای خروجی و تابع دوم برای وارد کردن و فراخوانی آن:

exporter.ts

var sayHi = function(): void {
    console.log("Hello!");
}

export = sayHi;

importer.ts

import sayHi = require('./exporter');
sayHi();

خوب اکنون ما نیاز داریم تا require.js را دانلود نموده و آن را در داخل تگ اسکریپت اضافه کنیم.قدم آخر هم کامپایل دو فایل ts. ما است.ماژول ها بسیار گسترده هستند لذا شما میتوانید برای دریافت اطلاعات بیشتر به اینجا مراجعه فرمایید.

 

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


+ شش = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>