تایپ اسکریپت

تایپ اسکریپ (TypeScript) برگرفته از جاوا اسکریپت است که به جاوا اسکریپت ساده کامپایل می شود. بیایید دقیق تر آن را بررسی کنیم:

• typed – می توانید متغیر، پارامتر و انواع داده های برگشتی را تعریف کنید.
• superset – تایپ اسکریپت برخی از ویژگی های اضافی را در خود جای میدهد. در واقع جاوا اسکریپت معمولی همه ویژگی های تایپ اسکریپت را دارد، اما نه برعکس.
• به جاوا اسکریپت ساده کامپایل می شود – TypeScript توسط مرورگر قابل اجرا نیست. بنابراین ابزارهای موجود به کامپایل تایپ اسکریپت شما در جاوا اسکریپت برای درک مرورگر کمک می کند.

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

پیش نیاز ها :

• درک نسبی از جاوا اسکریپت
• Node.js به صورت لوکال نصب باشد.
• نرم افزار محیط توسعه Visual Studio Code روی سیستم تان نصب باشد.

قدم اول : نصب و کامپایل تایپ اسکریپت

اولین قدم برای کار با TypeScript این است که پکیج آن را بر روی سیستم خود نصب کنید. با اجرای دستور زیر در ترمینال VSCode خود پکیج تایپ اسکریپت را به صورت سراسری نصب کنید:

npm install -g typescript

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

mkdir typescript_test

به دایرکتوری که ساختید بروید:

cd typescript_test

اکنون باید یک فایل TypeScript جدید ایجاد کنید. فایل های تایپ اسکریپت با پسوند .ts ساخته می شوند.

اکنون می توانید VS Code را باز کرده و با کلیک بر روی File و سپس New File یک فایل جدید ایجاد کنید. پس از آن، با کلیک بر روی File و سپس Save As… آن را ذخیره کنید. می توانید نام این فایل را app.ts بگذارید. نام فایل مهم نیست، اما اطمینان از پسوند نوع فایل .ts مهم است.

خط اول این فایل باید با export {}; شروع شود تا VS Code آن را به عنوان یک ماژول تشخیص دهد.

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

export {};

function welcomePerson(person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
firstName: "James",
lastName: "Quick"
};

welcomePerson(james);

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

خرید هاست وردپرس | خرید هاست لینوکس

در قطعه کد زیر، یک رابط برای یک شی Person با دو ویژگی firstName و lastName وجود دارد. سپس، تابع WelcomePerson تغییر یافت تا فقط اشیاء Person را بپذیرد.

export {};

function welcomePerson(person: Person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}

const james = {
firstName: "James",
lastName: "Quick"
};

welcomePerson(james);

interface Person {
firstName: string;
lastName: string;
}

وقتی که بخواهید رشته ای را به تابع WelcomePerson منتقل کنید، فایده این موضوع مشخص می شود.

بعنوان مثال جایگزینی james :

welcomePerson(james);

با ‘james’ :

welcomePerson('James');

از آنجایی که ما با یک فایل TypeScript کار می کنیم، VS Code بلافاصله بازخوردی را به شما ارائه می دهد و به شما اطلاع می دهد که تابع یک شی را انتظار دارد نه یک رشته را. خروجی:

OutputArgument of type '"James"' is not assignable to parameter of type 'Person'.

اکنون که یک فایل TypeScript فعال دارید، می توانید آن را در جاوا اسکریپت کامپایل کنید. برای انجام این کار باید تابع را فراخوانی کرده و به آن بگویید که کدام فایل را کامپایل کند. برای این کار می توانید از ترمینال داخلی در VS Code استفاده کنید.

tsc app.ts

اگر قبلاً خطا را برطرف نکرده‌ باشید، یک خروجی خطا را مشاهده خواهید کرد:

Outputapp.ts:13:15 - error TS2345: Argument of type '"James"' is not assignable to parameter of type 'Person'.

با ارسال صحیح شی Person به جای رشته، خطا را برطرف کنید. سپس دوباره کامپایل کنید. حالا یک فایل جاوا اسکریپت معتبر دریافت میکنید.

با اجرای دستور ls در ترمینال، فایل ها در مسیر فعلی ما نمایش داده می شوند:

ls

فایل ts اصلی خود و همچنین یک فایل js جدید را خواهید دید:

Outputapp.js
app.ts

حالا فایل app.js را در VS Code باز کنید.

"use strict";
exports.__esModule = true;
function welcomePerson(person) {
console.log("Hey " + person.firstName + " " + person.lastName);
return "Hey " + person.firstName + " " + person.lastName;
}
var james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);

توجه داشته باشید که رشته‌های الگو، که یکی از ویژگی‌ های ES6 هستند، برای الحاق رشته‌های ساده از ES5 کامپایل شده‌اند.

قدم دوم : ساخت فایل پیکربندی تایپ اسکریپت

تا اینجای کار توانستید، یک فایل را مستقیماً کامپایل کنید. اما در یک پروژه واقعی، ممکن است بخواهید نحوه کامپایل شدن همه فایل ها را سفارشی کنید. به عنوان مثال، ممکن است بخواهید آنها را به جای ES5 در ES6 کامپایل کنید. برای این کار باید یک فایل پیکربندی TypeScript ایجاد کنید.

برای ایجاد یک فایل پیکربندی TypeScript، می توانید دستور زیر را اجرا کنید :

tsc --init

شما این خروجی را دریافت خواهید کرد:

Outputmessage TS6071: Successfully created a tsconfig.json file.

فایل tsconfig.json جدید خود را باز کنید و محتویات آن را ببینید.

در این فایل تنظیماتی به نام “target” وجود دارد که روی “es5” تنظیم است. آن را به “es6” تغییر دهید.

با اعمال این تغییرات در tsconfig.json، دستور tsc را در ترمینال خود اجرا کنید:

tsc

اکنون فایل جاوا اسکریپت تازه ایجاد شده را باز کنید:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function welcomePerson(person) {
console.log(`Hey ${person.firstName} ${person.lastName}`);
return `Hey ${person.firstName} ${person.lastName}`;
}
const james = {
firstName: "James",
lastName: "Quick"
};
welcomePerson(james);

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

چیز دیگری که می توانید تغییر دهید این است که فایل های جاوا اسکریپت شما پس از ایجاد در کجا ذخیره می شوند. این تغییرات را می توان در “outDir” مشخص کرد.

شما می توانید “outDir” خود را از دایرکتوری فعلی به دایرکتوری dist مانند زیر تغییر دهید:

"outDir": "./dist"

می توانید از دستورات cd و ls در ترمینال خود برای مشاهده محتویات دایرکتوری dist استفاده کنید:

cd dist
ls

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

Outputapp.js

جمع بندی

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