آموزش نصب Typescript و ایجاد برنامه چاپ Hello World در Ubuntu 22.04

در این آموزش قصد داریم به شما آموزش نصب تایپ اسکریپت و ایجاد برنامه  Hello World در Ubuntu یکی از توزیع های لینوکس بدیم.

آموزش نصب Typescript در Ubuntu

ابتدا terminal  را  با shortcut زیر یا از طریق دیگری می توانید مانند جستجو آن را باز کنید

Ctrl + Alt + T

1. نصب NodeJs

با دستورات زیر آن را نصب کنید

  1  sudo apt update  
  2  curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
  3  sudo apt-get install -y nodejs

برای اطمینان از نصب آن دستور زیر را وارد کنید

  1  node --version // print version node.js v18.16.0

۲. نصب Npm

  1  sudo apt update
  2  sudo apt install npm

برای اطمینان از نصب دستور زیر را وارد کنید

1  npm --version // print version npm 9.5.1

3. نصب Typescript

1  sudo npm install typescript
2  sudo apt install node-typescript

برای اطمینان دستور زیر را وارد کنید

  1  tsc --version // print Version 4.5.4

ایجاد پروژه و چاپ پیام Hello World

1. ابتدا یک فولدر ایجاد می کنیم با دستور زیر

  1  mkdir projectTypescript

2. وارد فولدر می شویم با دستور زیر

  1  cd projectTypescript

3. شما باید در این پوشه یک فایل tsconfig.json  ایجاد کنید با دستور زیر میتوان آن را ایجاد کرد و در سایت تایپ اسکریپت نوشته  که این فایل مشخص کننده فایل های root  و تنظیمات مورد نیاز کمپایلر برای کمپایل پروژه می باشد.

  1  tsc –init
  2  ls

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

دستور خط دو (ال اس) باللا به شما در terminal نمایش می دهد که یک فایل tsconfig,.json  ایجاد شده است.

فایل tsconfig.json  و باز کنید و کد زیر را داخل آن قرار دهید.

  1  {
  2      "compilerOptions": {
  3          "target": "es6"
  4      }
  5  }

اکما اسکریپت ۶ (es6) در اکثر مرورگر ها پشتیبانی می شود مگر اینکه شما بخواهید برنامه خود را در مرورگر های قدیمی تر که اکما اسکریپت ۶ را پشتیبانی نمی کنند اجرا کنید. در ورژن های قدیمی یک سری ویژگی (features) جاوا اسکریپت را پشتیبانی نمی کنند. مثلا:‌ برای نوشتن یک متد (method) نمی توانید از arrow funtion ها استفاده کنید.

خب یک پوشه به نام src ایجاد کنید در پوشه projectTypescript

  1  mkdir src

در پوشه src یک فایل با نام main.ts  ایجاد کنید

با استفاده دستور cat در لینوکس می توانید فایل خود ر باا فرمت مورد نظر ایجاد کنید مانند

  1   cd src
  2   cat > main.ts

بعد از نوشتن خط ۲ در terminal بعد از زدن enter می توانید دستور یا متن خود را در فایل از طریق terminal وارد کنید. ما در عکس پایین بعد از وارد کردن دستور class برروی enter کلیک کرده تا در فایل main.ts درج شود و شما می توانید ctrl + c را بزنید تا خارج شود.

ساختار فایل های ایجاد شده باید بصورت زیر باشد:

  1  MyTypeScriptProject
  2  ├── src
  3  │   └── main.ts
  4  └── tsconfig.json

کمپایل پروژه

ما از visual studio code برای نوشتن کد های برنامه و دیباگ کردن آن استفاده می کنیم.

۱. وارد visual studio code بشوید و پوشه MyTypeScriptProject را بازکنید و بعد ctrl + shift + p  را بزنید بعد tasks  را وارد کنید مانند تصویر زیر

2. گزینه "Configure Default Build Task" انتخاب کنید

3. سپس گزینه tsc:watch  انتخاب کنید

4. یک فایل جدید vscode/tasks.json.  ایجاد خواهد شد با محتوای زیر:

   1  {
   2      // See https://go.microsoft.com/fwlink/?LinkId=733558
   3      // for the documentation about the tasks.json format
   4      "version": "2.0.0",
   5      "tasks": [
   6          {
   7              "type": "typescript",
   8              "tsconfig": "tsconfig.json",
   9              "option": "watch",
  10              "problemMatcher": [
  11                  "$tsc-watch"
  12              ],
  13              "group": {
  14                  "kind": "build",
  15                  "isDefault": true
  16              }
  17          }
  18      ]
  19  }

شما الان می توانید پروژه تایپ اسکریپت و بیلد (build) بگیرید مانند تصویر زیر:

بعد شما می توانید ببینید یک فایل جدید با نام main.js  ایجاد شده است. مرورگر فقط جاوا اسکریپت می تواند اجرا کند و کد های تایپ اسکریپت به جاوا اسکریپت تبدیل می شوند تا در مرورگر اجرا شود. مانند تصویر زیر:

در تصویر بالا فایل main.js  ایجاد شده در explorer  را مشاهده می کنید. خب برای اینکه تست بکنیم ایا بدرستی کار های بالا را انجام داده ایم وارد فایل main.ts شده و کد های داخل آن را حذف کنید سپس دستور زیر را وارد کنید.

  1  console.log('hi world');

بعد terminal  را باز کنید در visual studio code مانند تصویر زیر

برروی New terminal کلیک کنید

و دستورات زیر را وارد کنید مانند

  1  cd src
  2  node main.ts

بعد از زدن دستورات بالا hi world باید چاپ شود مانند تصویر زیر

توجه داشته باشید که بعد از نوشتن هر کد در ts باید آن را build بگیرید از زبانه terminal  و بعد Run Build Task را انتخاب کنید یا ctrl + shift + B را بزنید این امر کد های ts را به js تبدیل می کند تا در مروگر قابل اجرا باشد در صورتی که این کار و انجام ندهید کد ها کمپایل نمی شوند.

 

منبع:

meziantou