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

مقدمه

ممکن است قبلاً هنگام استفاده از یک پروژه شروع یا ابزاری مانند Angular CLI با TypeScript کار کرده باشید. در این آموزش، نحوه راه‌اندازی یک پروژه TypeScript را بدون کمک استارت خواهید آموخت. شما همچنین یاد خواهید گرفت که چگونه کامپایل در TypeScript کار می کند و چگونه از یک linter در پروژه TypeScript خود استفاده کنید.

پیش نیازها

• آخرین نسخه Node نصب شده روی دستگاه شما
• آشنایی با  npm

مرحله 1 – شروع پروژه TypeScript

برای شروع پروژه TypeScript خود، باید یک دایرکتوری برای پروژه خود ایجاد کنید:

mkdir typescript-project

اکنون به دایرکتوری پروژه خود تغییر دهید:

cd typescript-project

با راه اندازی دایرکتوری پروژه خود، می توانید TypeScript را نصب کنید:

npm i typescript --save-dev

مهم است که پرچم --save-dev را اضافه کنید زیرا TypeScript را به عنوان یک وابستگی توسعه ذخیره می کند. این بدان معنی است که TypeScript برای توسعه پروژه شما مورد نیاز است.

با نصب TypeScript، می توانید پروژه TypeScript خود را با استفاده از دستور زیر مقداردهی اولیه کنید:

npx tsc --init

npm همچنین دارای ابزاری به نام npx است که بسته های اجرایی را اجرا می کند. npx به ما امکان می دهد بسته ها را بدون نیاز به نصب سراسری اجرا کنیم.

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

با استفاده از پرچم --init در دستور بالا، پروژه شما با ایجاد یک فایل tsconfig.json در فهرست پروژه تایپ اسکریپت پروژه شما مقداردهی اولیه می شود. این فایل tsconfig.json به شما این امکان را می دهد که پیکربندی بیشتری انجام دهید و نحوه تعامل TypeScript و کامپایلر tsc را سفارشی کنید. می‌توانید پیکربندی‌های این فایل را حذف، اضافه و تغییر دهید تا نیازهای خود را به بهترین نحو برآورده کنید.

tsconfig.json را در ویرایشگر خود باز کنید تا پیکربندی پیش فرض را پیدا کنید:

nano tsconfig.json

گزینه های زیادی وجود خواهد داشت که بیشتر آنها در مورد آنها توضیح داده شده است:

{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}

می توانید پیکربندی TypeScript خود را از طریق فایل tsconfig.json سفارشی کنید. به عنوان مثال، ممکن است ورودی outDir را از کامنت بردارید و آن را روی “./build” تنظیم کنید، که تمام فایل های TypeScript کامپایل شده شما را در آن دایرکتوری قرار می دهد.

با نصب TypeScript و نصب فایل tsconfig.json، اکنون می توانید به کدنویسی برنامه TypeScript و کامپایل آن بروید.

مرحله 2 – کامپایل پروژه TypeScript

اکنون می توانید کدنویسی پروژه TypeScript خود را شروع کنید. یک فایل جدید به نام index.ts در ویرایشگر خود باز کنید. کد TypeScript زیر را در index.ts بنویسید:

const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}

با قرار دادن این کد TypeScript، پروژه شما آماده کامپایل است. tsc را از دایرکتوری پروژه خود اجرا کنید:

npx tsc

متوجه خواهید شد که فایل جاوا اسکریپت کامپایل شده index.js و فایل index.js.map sourcemap هر دو به پوشه build اضافه شده اند، اگر آن را در فایل tsconfig.js مشخص کرده باشید.

index.js را باز کنید و کد جاوا اسکریپت کامپایل شده زیر را خواهید دید:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;

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

با استفاده از دستور زیر می توانید حالت تماشا را فعال کنید:

npx tsc -w

شما یاد گرفته اید که چگونه کامپایلر TypeScript کار می کند و اکنون می توانید فایل های TypeScript خود را با موفقیت کامپایل کنید. شما می توانید پروژه های TypeScript خود را با وارد کردن یک linter در گردش کار خود به سطح بعدی ببرید.

مرحله 3 – استفاده از Google TypeScript Style برای پر کردن و تصحیح کد خود

استفاده از لینتر هنگام کدنویسی به شما کمک می کند تا به سرعت ناسازگاری ها، خطاهای نحوی و حذفیات را در کد خود پیدا کنید. علاوه بر این، یک راهنمای سبک نه تنها به شما کمک می کند تا اطمینان حاصل کنید که کد شما به خوبی شکل گرفته و سازگار است، بلکه به شما امکان می دهد از ابزارهای اضافی برای اجرای آن سبک استفاده کنید. یک ابزار رایج برای این ها eslint است که با بسیاری از IDE ها برای کمک به فرآیند توسعه به خوبی کار می کند.

با راه‌اندازی پروژه‌تان، می‌توانید از ابزارهای دیگر در اکوسیستم TypeScript برای کمک و اجتناب از راه‌اندازی دستی در فایل tsconfig.json استفاده کنید. Google TypeScript Style یکی از این ابزارهاست. Google TypeScript Style که با نام GTS شناخته می‌شود، یک راهنمای سبک، خط خطی و تصحیح کننده کد خودکار است که همه یکجا هستند. استفاده از GTS به شما کمک می کند تا به سرعت یک پروژه TypeScript جدید را بوت کنید و از تمرکز بر جزئیات کوچک و سازمانی برای تمرکز بر طراحی پروژه خود اجتناب کنید. GTS همچنین تنظیمات پیش فرضی را ارائه می دهد. این بدان معنی است که شما نیازی به سفارشی سازی تنظیمات زیادی نخواهید داشت.

با نصب GTS شروع کنید:

npm i gts --save-dev

از اینجا، GTS را با استفاده از دستور زیر مقداردهی اولیه کنید:

npx gts init

دستور بالا همه چیزهایی را که برای شروع کار با TypeScript خود نیاز دارید، از جمله یک فایل tsconfig.json و یک راه اندازی linting را ایجاد می کند. یک فایل package.json نیز ایجاد می شود اگر قبلاً آن را نداشته باشید.

اجرای npx gts init همچنین اسکریپت های مفید npm را به فایل package.json شما اضافه می کند. به عنوان مثال، اکنون می توانید npm run compile را برای کامپایل پروژه TypeScript خود اجرا کنید. برای بررسی خطاهای پرده، اکنون می توانید npm run check را اجرا کنید.

GTS اکنون نصب شده و به درستی در پروژه TypeScript شما ادغام شده است. استفاده از GTS در پروژه‌های آینده به شما این امکان را می‌دهد تا به سرعت پروژه‌های TypeScript جدید را با تنظیمات لازم تنظیم کنید.

از آنجایی که GTS یک رویکرد مبتنی بر عقیده و بدون پیکربندی ارائه می‌کند، از قوانین معقول و معقول خود استفاده می‌کند. این موارد از بهترین شیوه‌ها پیروی می‌کنند، اما اگر نیاز به تغییر قوانین به هر طریقی دارید، می‌توانید با گسترش قوانین پیش‌فرض eslint این کار را انجام دهید. برای انجام این کار، یک فایل در فهرست پروژه خود به نام .eslintrc ایجاد کنید که قوانین سبک را گسترش می دهد:

---
extends:
- './node_modules/gts'

این به شما امکان می دهد قوانین سبک ارائه شده توسط GTS را اضافه یا تغییر دهید.

نتیجه

در این آموزش، شما یک پروژه TypeScript را با تنظیمات سفارشی شروع کردید. شما همچنین Google TypeScript Style را در پروژه TypeScript خود ادغام کردید. استفاده از GTS به شما کمک می کند تا به سرعت با یک پروژه TypeScript جدید راه اندازی و اجرا کنید. با GTS، نیازی به تنظیم دستی پیکربندی یا ادغام یک لینتر در گردش کار خود نخواهید داشت.