فنی و مهندسی

نحوه استفاده از TypeScript در HTML

 

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

انجام پروژه در فریلنس پروژه

اگر در حال توسعه پروژه ای با جاوا اسکریپت هستید و با این نوع مشکل مواجه هستید، TypeScript مناسب ترین زبان برای حل آنها است.

 

TypeScript یک ابر مجموعه نحوی از جاوا اسکریپت است که تایپ ایستا را اضافه می کند. این به این معنی است که هنگام کار با TypeScript می توانید انواعی را به داده ها اضافه کنید و در واقع این چیزی جز نوشتن کد در جاوا اسکریپت نیست.

 

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

 

من از VS Code به عنوان IDE استفاده خواهم کرد.

 

بیایید با ایجاد فایل های اصلی شروع کنیم.

 

همانطور که می دانید، اساسا یک ظاهر پروژه ساده مانند آن است. اما من می خواهم فایل main.js را با main.ts تغییر دهم زیرا فایل های TypeScript پسوند ".ts" دارند. و من یک تابع ساده در main.ts ایجاد می کنم.

 

من فایل TypeScript را مانند فایل جاوا اسکریپت به فایل index.html اضافه کردم. و من تابع را با یک دکمه در فایل index.html فراخوانی می کنم.

 

و نتیجه:

 

دو تا خطا داد اولین مورد به این دلیل ایجاد می شود که تابع یک نوع دارد (در اینجا void). دومی از اولی ناشی می شود. از آنجایی که تابع موجود در فایل main.ts یک نوع دارد، در فایل HTML شناخته شده نیست.

 

برای خلاص شدن از شر این مشکل، باید Node.js را (در صورت موجود نبودن) و سپس بسته typescript را نصب کنیم. می توانید Node.js را با دنبال کردن این لینک نصب کنید. و با تایپ دستور زیر در ترمینال می توانید بسته typescript را نصب کنید.

 

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

طراحی لوگو با بهترین طراحان لوگو

پس از نصب بسته ها، این دستور را در ترمینال تایپ می کنم:

 

اسکریپت tsc/main.ts

 

با این دستور یک فایل main.js جدید را در اسکریپت پوشه خواهید دید. فایل تولید شده یک فایل جاوا اسکریپت معادل است که توسط Transpiler TypeScript تولید شده است.

 

و حالا در فایل index.html به جای فایل main.ts فایل main.js تولید شده را صدا می زنم.

 

<script src="script/main.js"></script>

 

اما پس از کامپایل ممکن است این خطا را دریافت کنید: "نمی توان متغیر با محدوده بلوک "myFunction" را دوباره اعلام کرد.

 

برای حل این مشکل، کد "export{}" را به خط آخر main.ts اضافه می کنم. و باید مانند شکل زیر باشد:

 

const myFunction = (): void => {
return console.log(“Hello World!”);
};export {};

و نتیجه:

 

بینگو!

 

به یاد داشته باشید که پس از هر تغییر در فایل main.ts باید کد زیر را اجرا کنیم:

سفارش ساخت سایت در فریلنس پروژه

tsc script/main.ts

مطالب ما را دنبال کنید