آشنایی سریع با Typescript

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 04 خرداد 1398
دسته بندی ها : جاوا اسکریپت

تایپ‌اسکریپت یک مدل دیگر از جاوااسکریپت است که توسط مایکروسافت توسعه‌ داده شده و برای ساخت اپلیکیشن‌های بزرگ استفاده می‌شود. تایپ‌اسکریپت ویژگی‌ها مهمی مانند کلاس‌ها، جنریک‌ها، رابط‌ها و نوع‌های داده‌ای استاتیک را به دنیای جاوااسکریپت آورد. همچنین با استفاده از تایپ‌اسکریپت شما به عنوان توسعه دهنده قابلیت استفاده از ابزارهایی مانند Static Checking و Code Refactoring را خواهید داشت.

چرا تایپ‌اسکریپت مهم است

حال سوالی که ایجاد می‌شود این است که چرا باید تایپ‌اسکریپت را مهم بدانیم. برای پاسخ دادن به این سوال من به چند ویژگی تایپ‌اسکریپت اشاره خواهم کرد.

نوع Static

جاوااسکریپت یک زبان پویا است، بدین معنی که تا زمان اجرای برنامه نمی‌شود نوع داده‌ای یک متغیر را دانست. این موضوع یکی از دلایلی است که در بسیاری از پروژه‌ها با خطا مواجه خواهید شد. اما تایپ‌اسکریپت از این حالت جلوگیری می‌کند، چرا که نوع داده‌ای در تایپ‌اسکریپت به صورت Static تعیین شده و در نهایت شما کنترل کاملی روی این موضوع خواهید داشت. 

پشتیبانی IDE بهتر

یکی از مزیت‌های بزرگی که تایپ‌اسکریپت نسبت به جاوااسکریپت دارد، داشتن پشتیبانی IDE بهتر است که شامل Intellisense، دریافت اطلاعات به صورت بلادرنگ از کامپایلر Typescript، دیباگینگ و... است. در کنار این موارد، افزونه‌های مختلف بسیار زیادی نیز وجود دارد که به شما در بهتر کردن این قابلیت کمک می‌کنند.

دسترسی به ویژگی‌های جدید اکمااسکریپت

تایپ‌اسکریپت به شما قابلیت دسترسی به جدیدترین ویژگی‌های اکمااسکریپت را می‌دهد. همچنین شما این قابلیت را دارید که در نهایت برنامه‌تان را به یک نسخه خاص از اکمااسکریپت تبدیل کنید.

چه زمانی باید از تایپ‌اسکریپت استفاده کرد؟

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

زمانی که کدبیس بزرگی دارید

تایپ‌اسکریپت ابزار عالی برای نوشتن پروژه‌های بزرگ است چرا که شما را از انجام خطاهای مختلف باز می‌دارد. در حالتی نیز که توسعه‌دهندگان مختلفی روی یک پروژه کار می‌کنند، استفاده از تایپ‌اسکریپت برای‌شان مفید‌تر خواهد بود. 

زمانی که تیم کاری شما درک خوبی از زبان‌های Static-Type دارند

یکی‌دیگر از حالت‌هایی که تایپ‌اسکریپت می‌تواند بسیار مفید باشد زمانی است که تیم شما به خوبی با زبان‌های استاتیک آشنایی دارند و نمی‌خواهند برای انجام کارهای‌شان سراغ یک زبان با ساختاری متفاوت –جاوااسکریپت- بروند.

نصب

برای نصب کردن تایپ‌اسکریپت تنها کافی‌ست با استفاده از npm تایپ‌اسکریپت را نصب کنید:

npm install -g typescript

بعد از نصب، حال می‌توانیم از ویژگی‌های مختلف تایپ‌اسکریپت بهره‌ بگیریم.

نوع‌ها

بیایید نگاهی به نوع‌های داده‌ای بیاندازیم، که در تایپ‌اسکریپت برای ما ایجاد شده است.

اعداد

تمام اعدادی که در تایپ‌اسکریپت وجود دارند مقادیر float هستند. 

let num: number = 0.222;
let hex: number = 0xbeef;
let bin: number = 0b0010;

رشته

مانند دیگر زبان‌ها تایپ‌اسکریپت از نوع داده‌ای String برای ذخیره داده‌های متنی استفاده می‌کند.

let str: string = 'Hello World!';

همچنین می‌توانید از قابلیت Template Literal موجود در اکمااسکریپت ۶ در اینجا نیز استفاده کنید:

let multiStr: string = `A simple
multiline string!`

let expression = 'A new expression'
let expressionStr: string = `Expression str: ${ expression }`

Boolean

مقدار داده‌ای بولین که تنها می‌تواند دو مقدار false و true را بگیرد نیز در تایپ‌اسکریپت پشتیبانی می‌شود.

let boolFalse: boolean = false;
let boolTrue: boolean = true;

تعیین کردن نوع‌ها

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

یک حالت از تعیین کردن نوع داده به صورت تنهایی انجام می‌شود. در زیر می‌توانید یک نمونه از آن را مشاهده نمایید:

let str: string = 'Hello World'

اما یک حالت دیگر برای تعیین کردن، تعیین کردن چندگانه است. شما در این حالت چندین متغیر را تعریف کرده و آن‌ها را مقداردهی می‌کنید.

let multitypeVar: string | number = 'String'
multitypeVar = 20

بررسی نوع‌ها

حال برای آنکه بدانیم آیا نوع متغیر ما درست انتخاب شده می‌توانیم از چند ابزار مختلف برای درک این موضوع استفاده نماییم:

Typeof

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

let str: string = 'Hello World!'

if(typeof str === number){
 console.log('Str is a number')
} else {
 console.log('Str is not a number')
}

Instanceof

عملگر instanceof نیز شبیه به دستور قبلی است، با این تفاوت که می‌تواند در بررسی نوع‌های داده‌ای سفارشی نیز به ما کمک بکند.

class Human{

 name: string;

 constructor(data: string) {
  this.name = data;
 }
}

let human = new Human('Gabriel')

if(human instanceof Human){
 console.log(`${human.name} is a human`)
}

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

آرایه‌ها

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

ساخت آرایه با استفاده از []

ما می‌توانیم یک آرایه را تنها با استفاده از دو علامت [ ] ایجاد کنیم:

let strings: string[] = ['Hello', 'World', '!']

راه بعدی برای اینکار استفاده از نوع generic است. برای ایجاد آرایه از این طریق به کدهای زیر دقت کنید:

let numbers: Array<number> = [1, 2, 3, 4, 5]

آرایه‌های چندگانه

علاوه بر موارد بالا، ما می‌توانیم نوع‌های مختلفی داده‌ای را در یک آرایه به کار ببریم. برای چنین کاری استفاده از عملگر | الزامی است:

let stringsAndNumbers: (string | number)[] = ['Age', 20]

آرایه چند بعدی

تایپ‌اسکریپت به شما اجازه می‌دهد که آرایه‌های چند بعدی را به سادگی ایجاد کنید.

let numbersArray: number[][] = [[1,2,3,4,5], [6,7,8,9,10]]

اشیا

یک شئ در تایپ‌اسکریپت را می‌توانید با استفاده از قاعده key-value پیاده‌سازی کنید. مقادیر موجود در این شئ‌ها می‌تونند متغیر، آرایه و حتی تابع نیز باشند. 

برای ساخت شی به صورت زیر عمل کنید:

const human = {
 firstName: 'Frank',
 age: 32,
 height: 185
};

Barrel

Barrel به ما اجازه می‌دهد تا چندین ماژول export شده را در یک فایل ساده‌تر قرار دهیم. تنها کاری که لازم است انجام دهیم ایجاد یک فایل جدید است و export موارد مورد نیاز است.

export * from './person';
export * from './animal';
export * from './human';

بعد از انجام چنین کاری می‌توانیم تمام ماژول‌ها را با استفاده از یک دستور import به صورتی ساده‌تر وارد نماییم:

import { Person, Animal, Human } from 'index';

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

دسترسی‌های موجود در تایپ‌اسکریپت که برای کلاس‌ها تعیین می‌شود شامل سه نوع Public، Private و Protected است. 

اعضای public از هر جایی قابل دسترس هستند و محدودیتی در استفاده از آن‌ها وجود ندارد. اعضای private تنها در کلاسی که ساخته شده قابل دسترس هستند. اعضای protected نیز تنها در کلاس و تمام زیر کلاس‌ها قابل دسترس هستند.

TSLINT

TSLINT یک لینتر استاندارد برای تایپ‌اسکریپت است که می‌تواند به شما در نوشتن کدهای تمیزتر و خواناتر کمک بکند. نصب و پیکربندی این ابزار ساده است.

ابتدا از طریق npm آن را نصب کنید

npm install tslint typescript --save-dev
npm install tslint typescript -g

حال برای استفاده از آن کافی‌ست از طریق یک ابزار خط-فرمان و در جایی که پروژه وجود دارد دستور زیر را وارد کنید:

tslint --init

در پایان

امیدوارم این مطلب توانسته باشد که درک کلی از تایپ‌اسکریپت برای شما ایجاد کرده باشد. برای درک بهتر تایپ‌اسکریپت و یادگیری عمیق‌تر آن پیشنهاد می‌کنم که به دوره «آموزش TypeScript» مراجعه کنید.

منبع

مقالات پیشنهادی

  • آشنایی مقدماتی با NPM

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

    ارسطو عباسی
  • آشنایی با ساختار اپلیکیشن Ember.js

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

    امیررضا سیستانه ای