چگونه یک پروژه TypeScript جدید راه اندازی کنیم

Summarize this content to 400 words in Persian Lang

TypeScript یک جاوا اسکریپت با نحو برای انواع است.

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

1. راه اندازی

قبل از نصب TypeScript بر روی سیستم خود، ابتدا باید Node.js را نصب کنید. برای نصب آن می توانید اسناد رسمی را بررسی کنید.
دستور زیر را تایپ کنید تا مطمئن شوید Node.js نصب شده است. این دستور نسخه Node.js را ارائه می دهد.

> node –version

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک دایرکتوری جدید ایجاد کنید و به داخل آن بروید.

> mkdir code && cd code

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مقدار دهی اولیه کنید package.json فایل. این یک فایل است که شامل تمام بسته ها یا وابستگی های نصب شده برای برنامه است.

> npm init -y

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

> npm install typescript –save-dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

–save-dev پرچم نشان می دهد که ما TypeScript را برای اهداف توسعه نصب می کنیم و به این بسته برای تولید نیاز نداریم.
فایل پیکربندی TypeScript را راه اندازی کنید.

> npx tsc –init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. راه اندازی پروژه

ایجاد فایل ها و پوشه های جدید در داخل code پوشه

> touch index.html
> mkdir src dest
> touch src/main.ts

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه داشته باشید: مرورگر فقط می تواند جاوا اسکریپت را بفهمد، بنابراین باید TypeScript را در جاوا اسکریپت کامپایل کنید.
محل خروجی جاوا اسکریپت کامپایل را مشخص کنید. سفارشی کردن tsconfig.json فایل برای خروجی در داخل .dest پوشه

// tsconfig.json
…
“outDir”: “./dest”, /* Specify an output folder for all emitted files. */
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این … سه نقطه نشان می دهد که کد آنها بیشتر است.
یک اسکریپت ایجاد کنید که تغییرات فایل TypeScript شما را مشاهده کند و به طور خودکار آن را در جاوا اسکریپت کامپایل کند. ما یک اسکریپت جدید ایجاد خواهیم کرد start درون package.json فایل.

// package.json
{
“name”: “code”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“start”: “tsc –watch”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“description”: “”,
“devDependencies”: {
“typescript”: “^5.5.3”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مقداری کد داخل فایل TypeScript خود اضافه می کنیم src/main.ts

const username: string = “Jane Doe”;
console.log(`Hello, ${username}!`)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در حال حاضر، ما اجرا می کنیم start اسکریپت برای مشاهده تغییرات فایل TypeScript.

> npm run start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این start دستور script به طور خودکار یک فایل جدید به نام ایجاد می کند main.js درون dest پوشه ای که فایل جاوا اسکریپت کامپایل شده ما است.
داخل ما index.html ما فایل جاوا اسکریپت کامپایل شده خود را پیوند داده و آن را در مرورگر باز می کنیم. سپس، کنسول را بررسی کنید تا مطمئن شوید پیام ثبت شده است.

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
TypeScript Project Set Up

Press F12 and check your browser console. There you will see the message which we have written.

src=]]>”./dest/main.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، می توانید کد خود را اضافه کرده و پروژه خود را ایجاد کنید!

> node --version

> mkdir code && cd code

> npm init -y

> npm install typescript --save-dev

> npx tsc --init

> touch index.html
> mkdir src dest
> touch src/main.ts

// tsconfig.json
...
"outDir": "./dest", /* Specify an output folder for all emitted files. */
...

// package.json
{
  "name": "code",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "typescript": "^5.5.3"
  }
}

const username: string = "Jane Doe";
console.log(`Hello, ${username}!`)

> npm run start

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">