راهنمای کدنویسی بهینه و موثر در تایپ اسکریپت [TypeScript]

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

مقدمه ای بر تایپ اسکریپت:

تایپ اسکریپت یک زبان برنامه نویسی شی گرا (object-oriented) و متن باز (open-source) است که یک strongly typed superset از زبان برنامه نویسی جاوا اسکریپت می باشد.

زبان برنامه نویسی TypeScript می تواند در همه مرورگرها، سیستم عامل ها و هاست ها اجرا شود. ساختار تایپ اسکریپت بر اساس ES6 (اکما اسکریپت 6) بنا شده است و ویژگی های جدیدی نیز دارد.

تاریخچه تایپ اسکریپت:

در سال 2010 میلادی، آقای Anders Hejlsberg، یکی از اعضای اصلی تیم توسعه دهنده زبان #C در مایکروسافت، تایپ اسکریپت را معرفی کرد و اولین نسخه این زبان برنامه نویسی در اکتبر سال 2012 میلادی عرضه شد. آخرین نسخه typescript در زمان نگارش این مقاله، در تاریخ 21 نوامبر سال 2021 میلادی ارائه شده که نسخه 4.5.2 می باشد.

نصب تایپ اسکریپت:

به منظور نصب تایپ اسکریپت، می توان از یکی از دو ابزار yarn یا npm به شکل زیر استفاده کرد:

#npm:
npm install typscript --save-dev
#yarn:
yarn add typescript -D

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

نکات کدنویسی بهینه در تایپ اسکریپت:

در ادامه این مقاله قصد داریم چند مورد از Best Practice های زبان برنامه نویسی تایپ اسکریپت را معرفی و بررسی کنیم.

1- استفاده صحیح از Data type annotation (اجتناب از any):

data type annotation یکی از مهم ترین ویژگی های زبان برنامه نویسی تایپ اسکریپت می باشد. در حالیکه در زبان برنامه نویسی جاوا اسکریپت، نوع داده یا data type در زمان اجرا یا run time مشخص می شود.

تعریف نوع داده در تایپ اسکریپت باعث می شود خطاهای احتمالی در زمان اجرا کاهش یابند. تا حد ممکن سعی کنید از کلمه کلیدی any برای تعریف نوع داده موردنظرتان استفاده نکنید. و نوع داده ای که قرار است در آن متغیر یا آرگومان ذخیره شود را تعریف کنید. مثلا string یا number

توصیه می شود در زمان تعریف متغیر، به شکل زیر، حتما نوع داده ای آن متغیر نیز تعریف شود:

name: string = “Hello”;
value: number = 50;
isCorrect: boolean = false;

2- فعال کردن strict:

قابلیت use strict از نسخه ES5 به زبان برنامه نویسی جاوا اسکریپت اضافه شد. معنای strict اینست که “کد باید در strict mode باشد”

در زبان تایپ اسکریپت، می توان با مراجعه به فایل tsconfig قابلیت strict را فعال یا غیر فعال کرد.

فعالسازی قابلیت use-strict این امکان را به برنامه نویس می دهد تا از اشتباهات سهوی در هنگام توسعه نرم افزا جلوگیری شود. مانند: استفاده از یک متغیر که هنوز تعریف نشده، عدم تعریف نوع داده برای متغیرها و آرگومان های توابع، استفاده از کلمات کلیدی برای تعریف متغیرها و توابع و…

بنابراین strict در تایپ اسکریپت باعث می شود کدنویسی ایمن تر و با خطای کمتری داشته باشیم و خطاهای احتمالی به شکل syntax error نمایان شوند.

3- استفاده از let بجای var:

تا قبل از سال 2015 (ارائه اکما اسکریپت 6 یا ES6) برای تعریف متغیر در جاوا اسکریپت از کلمه کلیدی var استفاده میشد اما از نسخه ES6 به بعد، let و const معرفی شدند و نقاط ضعف var را بهبود دادند.

متغیری که در خارج از بدنه توابع و بوسیله var تعریف می شود بصورت global scope می باشد یعنی حوزه تعریف آن سراسری است. اما اگر این متغیر در داخل بدنه یک تابع، به شکل زیر، تعریف شود حوزه تعریف آن محلی یا local scope خواهد بود:

var name= "John Doe"; // global scope variable

    function getAge() {
        var age= 30; // local scope variable
    }

استفاده از var یک سری نقاط ضعف دارد. مثلا: امکان تعریف متغیرهای هم نام، امکان فراخوانی متغیر بدون تعریف و مقداردهی اولیه آن و…

var name = "John Doe";
  function getName(){
        var name = "Anne"; // no error is showed
}

برای جلوگیری از بروز این مشکلات، استفاده از کلمه کلیدی let برای تعریف متغیرها در جاوا اسکریپت پیشنهاد می شود. متغیری که توسط let تعریف می شود بصورت block scope است و امکان تعریف متغیرهای همنام وجود ندارد. اما می توان در scope های مختلف، مثلا در توابع مختلف، از نام های یکسان استفاده کرد. بعنوان مثال:

let name = "John";
    if (true) {
        let name = "Anne";
        console.log(name); // "Anne"
    }
    console.log(name); // "John"

4- استفاده از const برای تعریف ثوابت:

const هم مانند let از ES6 سال 2015 به بعد معرفی شد و به شکل block-scoped می باشد و امکان re-declare آن وجود ندارد. اما تفاوت اصلی const با let اینست که نمی توان مقدار داخل متغیرهای const را تغییر داد. بنابراین توصیه می شود برای تعریف ثوابت یا constants از کلمه کلیدی const استفاده کنید:

const name = "John";
name = "Anne";// error
const age = 30;
const age = 31; //error

نکته: وقتی یک آبجکت را بصورت const تعریف می کنیم، خود آبجکت بطور مستقیم قابل تغییر نیست اما مقادیر داخل آبجکت، شامل key و value ها امکان تغییر دارند.

5- تعریف نوع داده و تعداد آیتم ها در آرایه:

ابتدا به مثال زیر دقت کنید. در آرایه marks می توان به تعداد دلخواه آیتم های عددی تعریف کرد. مانند [1], [1,5],[],[1,6,4,8,5,4] و غیره…

let marks: number[] = [1, 2, 3];
marks = []; // success
marks = [1]; // success
marks = [1, 2, 3, 4, 5]; // success

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

let marks:[number, number] = [1, 2]; // tuple of 2 number values
marks = [10, 20]; // success
marks = [1]; // syntax error
marks = [1, 2, 3, 4, 5] // syntax error

در این حالت، فقط می توان دو آیتم عددی داخل آرایه marks تعریف کرد. مانند: [3,7],[6,2] و غیره…

6- بین any و unknown تصمیم بگیرید:

در مواقعی که نوع داده ای یا data-type یک متغیر را نمی دانید، می توانید از any یا unknown استفاده کنید. اما تفاوتی بین این دو وجود دارد. شما می توانید هر نوع داده ای دلخواه را توسط یکی از این دو کلمه کلیدی تعریف کنید:

let anyExample: any; // defining an any
let unknownExample: unknown; // defining an unknown
anyExample = 123; 
anyExample = "Hey"
unknownExample = false;
unknownExample = 23.22;

تفاوت any و unknown:

اگر متغیری بوسیله any تعریف شود می توان یک تابع یا متد را روی آن صدا زد. مثلا کد زیر معتبر است:

anyExample.you.made.this.code.chain(); // success

اما با unknown نمی توان اینکار را انجام داد. بنابراین ایمن تر است:

unknownExample.trim(); // syntax error

و اگر می خواهید از یک متغیر unknown استفاده کنید، باید از آن داخل یک بلاک شرطی استفاده کرد:

if (typeof exampleUnkown == "string") { // 1st check the type
  exampleUnkown.trim(); // No syntax error now
}

7- استفاده از access modifier:

با اینکه در تایپ اسکریپت، کلاس ها (class) عمومی (public) هستند، اما می توان برای عناصر داخل کلاس access modifier تعریف کرد. منظور از access-modifier مقادیر public و protected و private می باشد. در بخش زیر به کاربرد هریک از اینها می پردازیم:

• private: فقط از داخل کلاس قابل دسترسی هستند.
• protected: فقط از داخل کلاس و کلاس های به ارث برده شده قابل دسترسی هستند.
• public: از همه جا قابل دسترسی هستند.

به قطعه کد زیر دقت کنید:

class Employee {
  protected name: string;
  private salary: number;
  
  constructor(name: string, salary: number) {
    this.name = name;
    this.salary = salary
  }

  public getSalary(){
    return salary
  }

در این مقال نمی توان مستقیما به مقدار salary دسترسی پیدا کرد. مگر اینکه متد getSalary را صدا بزنیم:

class Developer extends Employee{
  viewDetails(){
    console.log(this.salary); // error: property 'name' is private
    console.log(this.getSalary()); // success
  }
}

اما با توجه به اینکه name بصورت protected یا محافظت شده تعریف شده است، می توان از داخل یک subClass به آن دسترسی داشت:

class Developer extends Employee{
  viewDetails(){
    console.log(this.name);
  }
}

8- اجتناب از کامنت های غیر ضروری:

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

9- استفاده از Linter:

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

10- استفاده از یک Code Formatter:

با استفاده از یک فرمت دهنده کد مناسب می توان سورس کد تمیزتر و بهینه تری داشت. طبق تجربه شخصی من، افزونه VSCode Prettier می تواند یک گزینه مناسب برای نرم افزار ویژوال استودیو کد باشد. اما بنا به IDE یا ادیتوری که استفاده می کنید، formatter های بسیار زیادی بصورت رایگان وجود دارند که می توانید از آنها نیز استفاده کنید.

امیدوارم این مقاله مورد استفاده شما عزیزان قرار گرفته باشه. لطفا نظرات و سوالات خودتون رو از طریق فرم ارسال دیدگاه پایین همین مقاله با ما در میان بگذارید.