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

معرفی TypeScript

TypeScript یک زبان برنامه نویسی سطح بالا و منبع باز است که توسط مایکروسافت توسعه یافته، که تایپ استاتیک را با حاشیه نویسی دیتا تایپ به جاوا اسکریپت اضافه می کند.

TypeScript یک زبان برنامه‌نویسی است که بر پایه JavaScript ساخته شده و قابلیت های بیشتری از جمله استفاده از تایپ‌ ها به صورت گسترده و ایجاد کد های خواناتر را در اختیار برنامه‌نویسان قرار می‌دهد.  از آنجایی که مرورگرها نمی‌توانند کد های TypeScript را درک کنند، با استفاده از کامپایلر TypeScript  کد ها به javaScript تبدیل (کامپایل) و درنهایت اجرا میشوند.  در این فرآیند، کامپایلر بررسی میکند که آیا کدهای TypeScript شما Error هایی دارند یا خیر و با نمایش آنها امکان اصلاحشان را فراهم میکند. در نهایت، فایل خروجی کامپایلر یک فایل JavaScript است که می‌توانید آن را در مرورگرها اجرا کنید.

چگونه از تایپ اسکریپت استفاده کنیم؟

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

Extension vsCode

شما میتوانید مطابق تصویر زیر از اکستنشن VSCode Typescript Compiler برای کامپایل کردن فایل های تی اس خود استفاده کنید. پس اول آن را نصب کرده و فعال کنید.

سپس برای کار کردن آن، یک فایل به نام master.ts ساخته و مطابق تصویر روی آیکون مورد نظر کلیک کرده و گزینه compile to file را زده و به همین راحتی در هر فایل مقصدی که میخواهید، خروجی خود را داشته باشید.

آیا میدانید مدرسه پرنیان، کلاس طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

کلیک کنید

حالا که همه چیز آماده شد، پس بزن بریم سراغ سینکتکس …

TypeScript Types

TypeScript از دیتا تایپ های ساده (اولیه) که ممکن است بشناسید پشتیبانی می کند، مثل: string, number و ..

هنگام ایجاد یک متغیر، دو روش اصلی وجود دارد که TypeScript یک تایپ را اختصاص می دهد:

• Explicit صراحتا نوشتن نوع – پیشنهاد میشود!

let firstName: string = `arsam`;

Implicit ضمنی و ننوشتن تایپ،مانند کاری که در جاوا اسکریپت میکردیم.

let firstName = `arsam`;

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

Type: any

any  دیتا تایپی است که بررسی تایپ را غیرفعال می کند و به طور موثر امکان استفاده از همه دیتا تایپ ها را می دهد. مثال زیر را در نظر بگیرید:

let v: any = true; v = `arsam`; // no error as it can be `any` type console.log(v); // no error as it can be `any` type

Type: unknown

شبیه any اما امن تر و یک جایگزین برای آن!

let w: unknown = 1; w = `arsam`; // no error console.log(w)

Type: undefined & null

undefined و null انواعی هستند که به ترتیب به جاوا اسکریپت اولیه undefined و null اشاره می کنند.

let y: undefined = undefined; console.log(typeof y); let z: null = null; console.log(typeof z);

TypeScript Arrays

TypeScript یک نحوه خاص برای تایپ آرایه ها دارد.

پیشنهاد مطالعه مقاله آرایه ها در جاوااسکریپت را به شما میدهم!

const num: number[] = [1,2,3]; console.log(num); console.log(num[2]); const names: string[] = [`ali`, `aliani`]; console.log(names[0]);

در آرایه names از کد بالا اگر بنویسید:

names.push(“arsam”); // no error

اروری نخواهد داشت و اگر بنویسید :

names.push(3)

ارور خواهد داشت، آن هم بخاطر عدم تطابق دیتا تایپ ها!

کلمه کلیدی فقط خواندنی(Readonly) می تواند از تغییر آرایه ها جلوگیری کند.

const names: readonly string[] = [`arsam`];

TypeScript Tuples

برای تعریف یک تاپل، نوع هر عنصر در آرایه را مشخص کنید:

// define our tuple let ourTuple: [number, boolean, string]; // initialize correctly ourTuple = [5, false, `arsam`]; console.log(ourTuple);

مراقب باشید تا ترتیب را در مقدار دهی اشتباه نکنید!

در کد زیر، هیچ مقدار امنی برای اندیس های بزرگتر از 3 تعیین نشده است.

// define our tuple let ourTuple: [number, boolean, string]; // initialize correctly ourTuple = [5, false, `arsam`]; // We have no type safety in our tuple for indexes 3+ ourTuple.push(`parsa`); console.log(ourTuple);

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

Readonly Tuple

قطعا فقط خواندنیست و نمیتوان چیزی به آن اضافه کرد، وگرنه به ارور خواهیم خورد!

// instead use our readonly tuple const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, `arsam`]; // throws error as it is readonly. ourReadonlyTuple.push(`error push!`);

Destructuring Tuples

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

const graph: [number, number] = [55.2, 41.3]; const [x, y] = graph;

TypeScript Object

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

const car: { type: string, model: string, year: number } = { type: `Toyota`, model: `Corolla`, year: 2009 }; console.log(car);

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

const car = { type: `Toyota`, }; car.type = `Ford`; // no error car.type = 2; // Error: Type `number` is not assignable to type `string`.

Optional Properties

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

const car: { type: string, mileage: number } = { // Error: Property `mileage` is missing in type `{ type: string; }` but required in type `{ type: string; mileage: number; }`. type: `Toyota`, }; car.mileage = 2000; or const car: { type: string, mileage?: number } = { // no error type: `Toyota` }; car.mileage = 2000;

TypeScript Enums

enum یک “کلاس” ویژه است که نشان دهنده گروهی از ثابت ها (متغیرهای غیرقابل تغییر) است.به طور پیش فرض، enums اولین مقدار را به 0 مقداردهی اولیه می کند و به هر مقدار اضافی 1 اضافه می کند:

enum CardinalDirections { North, East, South, West }; let currentDirection = CardinalDirections.North; console.log(currentDirection); // 0 let para2 = CardinalDirections.East; console.log(para2); // 1

شاید برایتان جالب باشد که بدانید خروجی کد بالا ، زیر میشود:

var CardinalDirections; (function (CardinalDirections) { CardinalDirections[CardinalDirections[`North`] = 0] = `North`; CardinalDirections[CardinalDirections[`East`] = 1] = `East`; CardinalDirections[CardinalDirections[`South`] = 2] = `South`; CardinalDirections[CardinalDirections[`West`] = 3] = `West`; })(CardinalDirections || (CardinalDirections = {})); ; let currentDirection = CardinalDirections.North; console.log(currentDirection); let para2 = CardinalDirections.East; console.log(para2);

یا مثال زیر :

enum CardinalDirections { North = 1, East, South, West }; // logs 1 since we initialized the first value to something other than `0` console.log(CardinalDirections.North); // logs 4 as it continued on from the initial `1` value console.log(CardinalDirections.West);

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

enum StatusCodes { NotFound = 404, Success = 200, Accepted = 202, BadRequest = 400 }; // logs 404 console.log(StatusCodes.NotFound); // logs 200 console.log(StatusCodes.Success);

Enum ها همچنین می توانند شامل رشته ها باشند. این به دلیل خوانایی و هدف آنها نسبت به شماره های عددی رایج تر است.

enum CardinalDirections { North = `North`, East = `East`, South = `South`, West = `West` }; // logs `North` console.log(CardinalDirections.North); // logs `West` console.log(CardinalDirections.West);

Type Aliases

نام مستعار نوع اجازه تعریف انواع نام سفارشی (یک مستعار) را می دهد.

type CarYear = number; type CarType = string; type CarModel = string; type Car = { year: CarYear, type: CarType, model: CarModel }; const carYear: CarYear = 2001 const carType: CarType = `Toyota` const carModel: CarModel =`Corolla` const car: Car = { year: carYear, type: carType, model: carModel }; console.log(car);

TypeScript Functions

TypeScript یک نحوه خاص برای تایپ پارامترهای تابع و مقادیر بازگشتی دارد.

function getTime(): number { return new Date().getTime(); } console.log(getTime());

Void Return Type

از نوع void می توان برای نشان دادن اینکه تابعی هیچ مقداری را بر نمی گرداند استفاده کرد.

(doesn’t return any value)

function printHello(): void { console.log(`hello arsam`); } printHello();

پارامترهای تابع با یک نحو مشابه به عنوان اعلان متغیر تایپ می شوند.

function para(a: number, b: number) { return a * b; } console.log(para(2,5))

Named Parameters

تایپ پارامترهای نامگذاری شده از همان الگوی تایپ پارامترهای عادی پیروی می کند.

function divide({ dividend, divisor }: { dividend: number, divisor: number }) { return dividend / divisor; } console.log(divide({dividend: 10, divisor: 2}));

TypeScript Casting

مواقعی وجود دارد که هنگام کار با انواع، لازم است نوع یک متغیر نادیده گرفته شود، مانند زمانی که انواع نادرست توسط یک کتابخانه ارائه شده است.

let x: unknown = `arsam`; console.log((x as string).length);

Casting with <>

استفاده از <> مانند casting با as عمل می کند.

let x: unknown =`arsam`; console.log((<string>x).length);

TypeScript Classes

اعضای یک کلاس (ویژگی ها و روش ها) مشابه متغیرها، تایپ می شوند.

class Person { name: string; } const person = new Person(); person.name = `arsam`;

همچنین به اعضای کلاس اصلاح کننده های خاصی داده می شود که روی دیده شدن تأثیر می گذارد. به بیان ساده تر یعنی می‌توانید به اعضای خاصی از یک کلاس دسترسی داشته باشید و آن‌ها را اصلاح کنید. این کار با استفاده از مدیفایرهای دسترسی (Access Modifiers) انجام می‌شود که شامل public، private و protected می‌شوند.

public – (پیش‌فرض) اجازه دسترسی به عضو کلاس را از هر کجا می‌دهد

private – فقط اجازه دسترسی به عضو کلاس از داخل کلاس را می دهد

protected – اجازه دسترسی به عضو کلاس را از خود و هر کلاسی که آن را به ارث می برد، می دهد

به طور کلی، استفاده از مدیفایرهای دسترسی در TypeScript به شما این امکان را می‌دهد که دسترسی به اعضای خاصی از یک کلاس را محدود کنید و کنترل بیشتری بر روی دسترسی در برنامه‌ی خود داشته باشید.

class Person { private name: string; public constructor(name: string) { this.name = name; } public getName(): string { return this.name; } } const person = new Person(`arsam`); console.log(person.getName()); // person.name isn`t accessible from outside the class since it`s private

Parameter Properties

class Person { // name is a private member variable public constructor(private name: string) {} public getName(): string { return this.name; } } const person = new Person(`arsam`); console.log(person.getName());

TypeScript Basic Generics

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

به طور کلی به شما این امکان را می‌دهد تا توابع و کلاس‌هایی را بنویسید که با انواع داده‌ای مختلف کار می‌کنند، بدون اینکه نیاز به نوشتن نسخه جداگانه‌ای از آن‌ها برای هر نوع داده‌ای داشته باشید. این باعث می شود که نوشتن کد هایی که قابلیت استفاده مجدد (reusable code)در بخش های مختلف پروژه دارند، را آسان‌تر کند، درحالی که شما نیازی به نوشتن نسخه جداگانه‌ای از کد برای هر نوع داده‌ای نداشته باشید.

function createPair<S, T>(v1: S, v2: T): [S, T] { return [v1, v2]; } console.log(createPair<string, number>(`hello`, 42)); // [`hello`, 42]

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

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