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

تایپ اسکریپت یک superset از زبان برنامه نویسی جاوااسکریپت است که تایپ استاتیک را به آن معرفی می‌کند. type safety پیشرفته و قابلیت نگه‌داری کد تایپ اسکریپت، این امکان را به توسعه‌دهندگان می‌دهد که کد با قابلیت اطمینان بالاتر بنویسند.

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

بررسی Type Annotationها

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

ما type annotation در تایپ اسکریپت را با استفاده از : و سپس تایپ مورد نظر می‌نویسیم. در ادامه قصد داریم تا نحوه اعمال type annotation در تایپ‌های بیسیک تایپ اسکریپت را بررسی کنیم.

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

Boolean

در این قسمت ما نحوه نوشتن یک بولین در جاوااسکریپت را داریم:

let isDone = false;
console.log("isDone:", isDone); // Output: isDone: false
if (!isDone) {
    console.log("Task is not done yet.");
}

در مثال بالا، یک متغیر بولین isDone تعریف نموده و آن را با مقدار false مقداردهی اولیه کرده‌ایم. شرط !isDone بررسی می‌کند که آیا isDone false است، و اگر true باشد، پیامی را در کنسول چاپ می‌کند که نشان می‌دهد کار هنوز انجام نشده است.

همچنین در کد پایین نحوه تعریف یک بولین در تایپ اسکریپت را داریم:

let isDone: boolean = false;
console.log("isDone:", isDone); // Output: isDone: false
if (!isDone) {
    console.log("Task is not done yet.");
}

در این مثال هم همان متغیر بولین isDone با type annotation صریح : boolean تعریف می‌کنیم که نشان می‌دهد این مقدار، فقط می‌تواند مقادیر بولین را نگه دارد. رفتار و خروجی کد مانند مثال جاوااسکریپت باقی می‌ماند.

Number

در کد پایین ما یک number را در جاوااسکریپت تعریف می‌کنیم:

let count = 42;
let totalPrice = 24.99;
let quantity = 10;
console.log("count:", count); // Output: count: 42
console.log("totalPrice:", totalPrice); // Output: totalPrice: 24.99
console.log("quantity:", quantity); // Output: quantity: 10

در جاوااسکریپت، متغیرهای عددی count، totalPrice و quantity با مقادیر عددی تعریف و مقداردهی اولیه می‌کنیم. هر مقدار نشان دهنده یک تایپ عددی متفاوت است که به ترتیب عبارتند از: integer، floating-point و respectively.

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

let count: number = 42;
let totalPrice: number = 24.99;
let quantity: number = 10;
console.log("count:", count); // Output: count: 42
console.log("totalPrice:", totalPrice); // Output: totalPrice: 24.99
console.log("quantity:", quantity); // Output: quantity: 10

در این مثال، type annotation : number به هر تعریف متغیر اضافه می‌شود و به صراحت مشخص می‌کند که آن‌ها فقط می‌توانند مقادیر عددی را در خود نگه دارند. این اتفاق، وضوح و type safety را برای کد فراهم می‌کند.

String

در کد زیر ما یک string را در جاوااسکریپت تعریف می‌کنیم:

let message = "Hello, JavaScript!";
let firstName = "John";
let lastName = "Doe";
console.log("message:", message); // Output: message: Hello, JavaScript!
console.log("firstName:", firstName); // Output: firstName: John
console.log("lastName:", lastName); // Output: lastName: Doe

متغیرهای رشته message، firstName و lastName را تعریف کرده و با مقادیر string مقداردهی اولیه می‌کنیم.

اما در تایپ اسکریپت:

let message: string = "Hello, TypeScript!";
let firstName: string = "John";
let lastName: string = "Doe";
console.log("message:", message); // Output: message: Hello, TypeScript!
console.log("firstName:", firstName); // Output: firstName: John
console.log("lastName:", lastName); // Output: lastName: Doe

در مثال بالا، type annotation : string به هر تعریف متغیر اضافه می‌شود و به صراحت تعیین می‌کند که آن‌ها فقط می‌توانند مقادیر رشته را نگه دارند. این کار خوانایی و قابلیت نگه‌داری کد را افزایش می‌دهد.

Array

ما می‌توانیم در جاوااسکریپت آرایه را به صورت زیر تعریف کنیم:

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];
console.log("numbers:", numbers); // Output: numbers: [1, 2, 3, 4, 5]
console.log("fruits:", fruits); // Output: fruits: ["apple", "banana", "orange"]

در این مثال، آرایه‌های numbers و fruits را به ترتیب با مقادیر عددی و رشته‌ای تعریف و مقداردهی اولیه کرده‌ایم.

همینطور می‌توانیم در تایپ اسکریپت تعریف آرایه را به صورت زیر انجام دهیم:

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];
console.log("numbers:", numbers); // Output: numbers: [1, 2, 3, 4, 5]
console.log("fruits:", fruits); // Output: fruits: ["apple", "banana", "orange"]

در تایپ اسکریپت، type annotationها را اضافه می‌کنیم تا آرایه‌هایی را با تایپ‌های المنت‌های خاص : number[] و : string[] تعریف کنیم و به این ترتیب، اطمینان حاصل نماییم که فقط می‌توانیم مقادیر عددی یا رشته‌ای را به ترتیب در آرایه‌های numbers و fruits ذخیره کنیم.

Tuple

در کد پایین نحوه نوشتن یک tuple در تایپ اسکریپت را داریم:

let person: [string, number] = ["John", 30];
console.log("person:", person); // Output: person: ["John", 30]

در این مثال، یک تاپل person با type annotation صریح [string, number] تعریف کرده‌ایم، که نشان می‌دهد باید یک رشته و به دنبال آن یک عدد داشته باشیم. به این ترتیب، این کد نام و سن افراد را ذخیره می‌کند.

اما در جاوااسکریپت:

// JavaScript does not have built-in support for tuples, but we can use arrays.
let person = ["John", 30];
console.log("person:", person); // Output: person: ["John", 30]

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

Enum

نحوه تعریف یک enum در تایپ اسکریپت به صورت زیر است:

enum Direction {
    Up,
    Down,
    Left,
    Right
}
let direction: Direction = Direction.Up;
console.log("direction:", direction); // Output: direction: 0

در تایپ اسکریپت یک enum Direction با constantهای نام‌گذاری شده با Up، Down، Left و Right تعریف کرده‌ایم که به‌طور پیش‌فرض از مقادیر عددی ۰ شروع می‌شوند. مقدار Direction.Up به متغیر direction اختصاص داده شده است.

به طور مشابه در جاوااسکریپت:

// JavaScript does not have built-in support for enums, but we can use objects or constants.
const Direction = {
    Up: 0,
    Down: 1,
    Left: 2,
    Right: 3
};
let direction = Direction.Up;
console.log("direction:", direction); // Output: direction: 0

در جاوااسکریپت، enumها به صورت native پشتیبانی نمی‌شوند، بنابراین آبجکت‌ها یا constantها اغلب برای شبیه‌سازی رفتار enum مورد استفاده قرار می‌گیرند. در این مثال، آبجکت Direction را داریم که شامل constantهای نام‌گذاری شده با مقادیر عددی است، و همانند مثال تایپ اسکریپت، مقدار Direction.Up را به متغیر direction اختصاص می‌دهد.

جمع‌بندی

همانطور که در این مقاله با انواع تایپ‌های بیسیک در تایپ اسکریپت آشنا شدیم، این تایپ‌ها مزایای قابل توجهی از نظر type safety، وضوح و قابلیت نگه‌داری کد نسبت به جاوااسکریپت دارند.

تایپ اسکریپت با معرفی type annotationهای صریح و ساختارهای تایپ اضافی مانند tuples و enums، به توسعه‌دهندگان این امکان را می‌دهد تا بتوانند کدهای قوی‌تر و بدون خطا بنویسند.

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