آموزش نصب و پیکربندی TypeScript در پروژه های جدید

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

TypeScript در پروژه‌های جدید: چرا انتخاب هوشمندانه است؟

انتخاب TypeScript برای پروژه‌های جاوا اسکریپت، دیگر صرفاً یک گزینه پیشرفته نیست، بلکه به یک ضرورت تبدیل شده است. این زبان، با افزودن قابلیت‌های نوع‌بندی استاتیک، مشکلات رایج در پروژه‌های بزرگ جاوا اسکریپت را به شکل چشمگیری کاهش می‌دهد. از جمله مزایای اصلی استفاده از TypeScript می‌توان به موارد زیر اشاره کرد که آن را به ابزاری قدرتمند برای توسعه‌دهندگان تبدیل کرده است:

• افزایش پایداری و کاهش خطاها: سیستم نوع‌بندی استاتیک TypeScript به برنامه‌نویسان امکان می‌دهد تا خطاهای مرتبط با نوع داده را در زمان توسعه، پیش از اجرای کد، شناسایی کنند. این ویژگی باعث می‌شود باگ‌های کمتری به محیط عملیاتی راه پیدا کنند و کدی قابل اعتمادتر داشته باشیم. این امر به خصوص در پروژه‌های تیمی بزرگ که تعاملات پیچیده‌ای بین بخش‌های مختلف کد وجود دارد، اهمیت دوچندانی پیدا می‌کند.
• تجربه توسعه‌دهنده بهبود یافته (Developer Experience): ویرایشگرهای کد پیشرفته مانند VS Code با پشتیبانی کامل از TypeScript، ویژگی‌هایی مثل تکمیل خودکار کد (IntelliSense)، بررسی خطاها در لحظه و ابزارهای Refactoring را به ارمغان می‌آورند. این قابلیت‌ها بهره‌وری توسعه‌دهنده را به شکل چشمگیری بالا می‌برند و سرعت کدنویسی را افزایش می‌دهند.
• مقیاس‌پذیری و نگهداری آسان‌تر: با تعریف دقیق انواع داده، درک و مدیریت کد در پروژه‌های بزرگ و پیچیده آسان‌تر می‌شود. زمانی که چندین توسعه‌دهنده روی یک کدبیس کار می‌کنند، داشتن اطلاعات شفاف درباره نوع داده‌ها، از سردرگمی جلوگیری کرده و فرآیند نگهداری و گسترش پروژه را ساده‌تر می‌کند. این ویژگی برای شرکت‌ها و تیم‌های بزرگ که نیاز به توسعه طولانی‌مدت و پایدار دارند، حیاتی است.
• همگام با آخرین استانداردهای ECMAScript: TypeScript امکان استفاده از جدیدترین ویژگی‌های جاوا اسکریپت (ECMAScript) را فراهم می‌کند و آن‌ها را به نسخه‌های قدیمی‌تر جاوا اسکریپت تبدیل (ترنسپایل) می‌کند تا سازگاری با مرورگرها و محیط‌های مختلف حفظ شود. این یعنی می‌توانید از امکانات مدرن زبان استفاده کنید، بدون آنکه نگران پشتیبانی مرورگرهای قدیمی باشید.

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

پیش‌نیازهای راه‌اندازی TypeScript: ابزارهای ضروری

پیش از آنکه به سراغ نصب و پیکربندی TypeScript برویم، نیاز به نصب چند ابزار پایه بر روی سیستم خود دارید. این ابزارها برای مدیریت بسته‌ها، اجرای کد و ویرایش پروژه شما ضروری هستند:

• Node.js و npm (یا Yarn): Node.js یک محیط زمان اجرا برای جاوا اسکریپت است که به شما امکان می‌دهد کد جاوا اسکریپت را در سمت سرور اجرا کنید. npm (Node Package Manager) که همراه با Node.js نصب می‌شود، ابزاری برای مدیریت بسته‌های نرم‌افزاری است. Yarn نیز جایگزینی محبوب برای npm است که عملکرد مشابهی دارد. برای اطمینان از نصب بودن Node.js و npm، می‌توانید دستورات `node -v` و `npm -v` را در ترمینال خود اجرا کنید.
• ویرایشگر کد مناسب: یک ویرایشگر کد کارآمد، بخش جدایی‌ناپذیری از فرآیند توسعه است. Visual Studio Code (VS Code) یکی از بهترین گزینه‌ها برای توسعه TypeScript محسوب می‌شود، چرا که پشتیبانی عالی از IntelliSense، دیباگ کردن و اکستنشن‌های متنوع را ارائه می‌دهد. Sublime Text، WebStorm و Atom نیز از دیگر گزینه‌های محبوب هستند.
• آشنایی اولیه با خط فرمان و جاوا اسکریپت: برای کار با TypeScript، آشنایی با نحوه کار با ترمینال (Command Line) و دستورات پایه آن، و همچنین تسلط بر مفاهیم اساسی جاوا اسکریپت ضروری است.

گام اول: نصب TypeScript در پروژه جدید

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

نصب TypeScript سراسری (Global Installation)

اگرچه امکان نصب TypeScript به صورت سراسری با دستور `npm install -g typescript` وجود دارد، اما برای پروژه‌های جدید، نصب محلی به عنوان وابستگی توسعه (dev dependency) به شدت توصیه می‌شود. دلیل این امر این است که نصب محلی، نسخه‌ TypeScript را به پروژه خاص شما محدود می‌کند و از تداخل‌های احتمالی با نسخه‌های مختلف در پروژه‌های دیگر جلوگیری می‌کند. همچنین، این رویکرد به تیم‌های توسعه‌دهنده کمک می‌کند تا مطمئن شوند همه اعضا از یک نسخه TypeScript استفاده می‌کنند و هماهنگی کدها به حداکثر می‌رسد. پس از نصب، می‌توانید با دستور `tsc -v` از نسخه نصب شده مطمئن شوید.

ایجاد و مقداردهی اولیه دایرکتوری پروژه

برای شروع، یک دایرکتوری جدید برای پروژه خود ایجاد کنید و وارد آن شوید. این دایرکتوری، محفظه اصلی تمام فایل‌های پروژه شما خواهد بود:

mkdir my-ts-project cd my-ts-project

سپس، پروژه npm خود را مقداردهی اولیه کنید. این دستور یک فایل `package.json` در ریشه پروژه شما ایجاد می‌کند که اطلاعات مربوط به پروژه و وابستگی‌های آن را نگهداری می‌کند:

npm init -y

با این کار یک فایل `package.json` با تنظیمات پیش‌فرض ایجاد می‌شود.

نصب TypeScript محلی به عنوان وابستگی توسعه

اکنون TypeScript را به صورت محلی در پروژه خود نصب می‌کنیم. استفاده از پرچم `–save-dev` بسیار مهم است، زیرا TypeScript تنها در زمان توسعه پروژه مورد نیاز است و در نسخه نهایی که برای کاربران منتشر می‌شود، نیازی به آن نیست (چون کد TypeScript به جاوا اسکریپت کامپایل می‌شود).

npm install typescript –save-dev

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

گام دوم: پیکربندی اولیه پروژه TypeScript با tsconfig.json

فایل tsconfig.json قلب هر پروژه TypeScript است. این فایل به کامپایلر TypeScript (tsc) می‌گوید که چگونه فایل‌های .ts شما را کامپایل و به جاوا اسکریپت تبدیل کند. در این بخش، نحوه ایجاد و پیکربندی tsconfig.json را بررسی می‌کنیم.

ایجاد فایل tsconfig.json

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

npx tsc –init

دستور npx به شما امکان می‌دهد بسته‌های اجرایی npm را بدون نیاز به نصب سراسری اجرا کنید. این دستور، یک فایل tsconfig.json با تنظیمات پیش‌فرض در ریشه پروژه شما ایجاد می‌کند. حالا می‌توانید آن را در ویرایشگر کد خود باز کرده و تنظیمات آن را مطابق نیازهای پروژه خود تغییر دهید.

بررسی و پیکربندی گزینه‌های کلیدی compilerOptions

بخش compilerOptions در tsconfig.json حاوی گزینه‌های متعددی است که رفتار کامپایلر را کنترل می‌کنند. در اینجا به برخی از مهم‌ترین و پرکاربردترین آن‌ها می‌پردازیم:

• target: این گزینه مشخص می‌کند که کد TypeScript شما به کدام نسخه از استاندارد ECMAScript کامپایل شود. برای مثال، es2020 یا esnext برای استفاده از جدیدترین ویژگی‌ها، و es5 برای سازگاری با مرورگرهای قدیمی‌تر.
• module: سیستم ماژول‌بندی خروجی را تعیین می‌کند (مانند commonjs برای Node.js و esnext برای مرورگرها و ابزارهای باندل‌کننده).
• outDir: پوشه‌ای را مشخص می‌کند که فایل‌های جاوا اسکریپت کامپایل شده در آن قرار می‌گیرند. معمولاً از ./dist یا ./build استفاده می‌شود.
• rootDir: ریشه فایل‌های منبع TypeScript شما را تعیین می‌کند. معمولاً ./src است.
• strict: فعال‌سازی این گزینه (تنظیم روی true) تمام گزینه‌های بررسی نوع سخت‌گیرانه TypeScript را فعال می‌کند. این کار به نوشتن کدهای ایمن‌تر و با کیفیت‌تر کمک زیادی می‌کند و به شدت توصیه می‌شود.
• esModuleInterop: سازگاری بهتر بین ماژول‌های ES (import/export) و CommonJS (require/module.exports) را فراهم می‌کند.
• forceConsistentCasingInFileNames: اطمینان می‌دهد که نام فایل‌ها و ارجاعات به آن‌ها در سراسر پروژه، از نظر حروف کوچک و بزرگ، سازگار باشند تا از مشکلات مربوط به سیستم‌عامل‌های حساس به حروف کوچک و بزرگ جلوگیری شود.
• skipLibCheck: بررسی نوع فایل‌های کتابخانه‌ای (node_modules) را نادیده می‌گیرد و سرعت کامپایل را افزایش می‌دهد.
• lib: کتابخانه‌های استاندارد جاوا اسکریپت که در دسترس کد شما هستند (مثلاً dom برای برنامه‌های مرورگر، es2015 برای ویژگی‌های ECMAScript 2015).
• declaration: اگر روی true تنظیم شود، TypeScript علاوه بر فایل‌های .js، فایل‌های اعلان نوع (.d.ts) را نیز تولید می‌کند که برای استفاده کتابخانه‌های شما در سایر پروژه‌های TypeScript مفید هستند.
• sourceMap: با فعال کردن این گزینه، فایل‌های Source Map (.js.map) تولید می‌شوند که دیباگ کردن کد کامپایل شده را با ارجاع به فایل‌های اصلی TypeScript آسان‌تر می‌کند.

یک دوره آموزش TypeScript جامع، مانند آنچه در مجتمع فنی تهران ارائه می‌شود، به تفصیل این گزینه‌ها را همراه با مثال‌های عملی توضیح می‌دهد و شما را در پیکربندی tsconfig.json یاری می‌کند.

مثال یک فایل tsconfig.json بهینه برای یک پروژه جدید:

{ “compilerOptions”: { “target”: “es2020”, “module”: “commonjs”, “outDir”: “./dist”, “rootDir”: “./src”, “strict”: true, “esModuleInterop”: true, “forceConsistentCasingInFileNames”: true, “skipLibCheck”: true, “lib”: [“es2020”, “dom”], “declaration”: true, “sourceMap”: true }, “include”: [“src//.ts”], “exclude”: [“node_modules”, “dist”] }

پیکربندی دقیق tsconfig.json ستون فقرات هر پروژه TypeScript است و به کامپایلر اجازه می‌دهد تا کد را مطابق با بهترین شیوه‌ها و نیازهای پروژه، با بالاترین کیفیت ممکن تولید کند.

گزینه‌های مهم CompilerOptions در یک نگاه

گزینه	توضیح	مقدار پیشنهادی
target	نسخه ECMAScript خروجی	es2020
module	سیستم ماژول‌بندی خروجی	commonjs
outDir	پوشه خروجی فایل‌های کامپایل شده	./dist
rootDir	ریشه فایل‌های منبع TypeScript	./src
strict	فعال‌سازی بررسی نوع سخت‌گیرانه	true
esModuleInterop	سازگاری ماژول‌های ES و CommonJS	true
sourceMap	ایجاد Source Map برای دیباگ	true
declaration	ایجاد فایل‌های اعلان نوع (.d.ts)	true

گام سوم: نوشتن اولین کد TypeScript و کامپایل آن

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

ساخت یک فایل TypeScript

ابتدا، یک پوشه src در ریشه پروژه خود ایجاد کنید (اگر در tsconfig.json، rootDir را ./src تنظیم کرده‌اید). سپس، یک فایل جدید به نام index.ts در داخل پوشه src ایجاد کرده و کد TypeScript زیر را در آن قرار دهید:

// src/index.ts interface Person { name: string; age: number; } function greet(person: Person): string { return `Hello, my name is ${person.name} and I am ${person.age} years old.`; } const user: Person = { name: “Alice”, age: 30 }; console.log(greet(user)); function calculateSum(a: number, b: number): number { return a + b; } const result: number = calculateSum(5, 10); console.log(`The sum is: ${result}`);

در این مثال، یک رابط Person تعریف کرده‌ایم که تضمین می‌کند شیء user دارای مشخصه‌های name (از نوع رشته) و age (از نوع عدد) باشد. تابع greet نیز یک پارامتر از نوع Person می‌گیرد و یک رشته برمی‌گرداند. تابع calculateSum نیز دو عدد را دریافت و حاصل جمع را بازمی‌گرداند.

کامپایل دستی کد

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

npx tsc

پس از اجرای این دستور، اگر تنظیمات outDir در tsconfig.json روی ./dist باشد، فایلی به نام index.js در پوشه dist ایجاد می‌شود. این فایل، نسخه جاوا اسکریپت کامپایل شده کد شماست. همچنین، اگر sourceMap را فعال کرده باشید، فایل index.js.map نیز برای دیباگ بهتر تولید خواهد شد.

// dist/index.js (مثال خروجی کامپایل شده) “use strict”; function greet(person) { return `Hello, my name is ${person.name} and I am ${person.age} years old.`; } const user = { name: “Alice”, age: 30 }; console.log(greet(user)); function calculateSum(a, b) { return a + b; } const result = calculateSum(5, 10); console.log(`The sum is: ${result}`);

حالت Watch برای کامپایل خودکار

اجرای دستی دستور npx tsc پس از هر تغییر در کد، می‌تواند خسته‌کننده باشد. برای حل این مشکل، می‌توانید کامپایلر را در حالت تماشا (Watch Mode) قرار دهید تا هر زمان که تغییری در فایل‌های TypeScript ایجاد می‌کنید، به صورت خودکار کد شما را مجدداً کامپایل کند:

npx tsc -w

این حالت، گردش کار توسعه را بسیار روان‌تر می‌کند و به شما امکان می‌دهد تا بدون وقفه، روی کدنویسی تمرکز کنید. در دوره آموزش TypeScript، کار با این قابلیت‌ها به تفصیل آموزش داده می‌شود.

گام چهارم: یکپارچه‌سازی ابزارهای توسعه: Linting و Formatting

یکی از ارکان اصلی توسعه نرم‌افزار حرفه‌ای، حفظ کیفیت و یکنواختی کد است. ابزارهای Linting و Formatting دقیقاً برای همین منظور به کار می‌روند. آموزش TypeScript بدون پرداختن به این ابزارها ناقص است. در مجتمع فنی تهران، در دوره تایپ اسکریپت بر اهمیت استفاده از این ابزارها تاکید می‌شود.

معرفی ESLint برای TypeScript

ESLint یک ابزار قدرتمند برای Linting کد جاوا اسکریپت و TypeScript است. این ابزار به شناسایی الگوهای مشکل‌ساز، خطاهای احتمالی و عدم رعایت استانداردهای کدنویسی کمک می‌کند. برای استفاده از ESLint با TypeScript، نیاز به نصب پلاگین‌های مرتبط دارید:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin –save-dev

• eslint: هسته اصلی ESLint.
• @typescript-eslint/parser: پارس‌کننده مخصوص TypeScript برای ESLint.
• @typescript-eslint/eslint-plugin: مجموعه‌ای از قوانین Linting مخصوص TypeScript.

سپس، یک فایل پیکربندی به نام .eslintrc.js یا .eslintrc.json در ریشه پروژه خود ایجاد کنید:

// .eslintrc.js module.exports = { parser: ‘@typescript-eslint/parser’, extends: [ ‘eslint:recommended’, ‘plugin:@typescript-eslint/recommended’, ‘plugin:@typescript-eslint/eslint-recommended’ ], parserOptions: { ecmaVersion: 2020, sourceType: ‘module’ }, rules: { // قوانین سفارشی خود را اینجا اضافه کنید ‘indent’: [‘error’, 2], ‘linebreak-style’: [‘error’, ‘unix’], ‘quotes’: [‘error’, ‘single’], ‘semi’: [‘error’, ‘always’] } };

در نهایت، یک اسکریپت Linting به فایل package.json خود اضافه کنید تا به راحتی بتوانید کد خود را بررسی کنید:

// package.json { “name”: “my-ts-project”, “version”: “1.0.0”, “description”: “”, “main”: “dist/index.js”, “scripts”: { “lint”: “eslint “{src,apps,libs}//.ts” –fix”, “test”: “echo “Error: no test specified” && exit 1″ }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “@typescript-eslint/eslint-plugin”: “^4.0.0”, “@typescript-eslint/parser”: “^4.0.0”, “eslint”: “^7.0.0”, “typescript”: “^4.0.0” } }

معرفی Prettier برای فرمت‌بندی کد

Prettier یک فرمت‌کننده کد است که کد شما را به طور خودکار با رعایت سبک کدنویسی یکپارچه، فرمت می‌کند. این ابزار به همراه ESLint، تضمین می‌کند که کد شما همیشه خوانا و مرتب باشد.

npm install prettier –save-dev

یک فایل پیکربندی به نام .prettierrc در ریشه پروژه خود ایجاد کنید:

// .prettierrc { “singleQuote”: true, “semi”: true, “tabWidth”: 2, “trailingComma”: “all”, “printWidth”: 80 }

می‌توانید Prettier را با ESLint یکپارچه کنید تا از تداخل قوانین فرمت‌بندی جلوگیری شود. برای این کار، پلاگین‌های زیر را نصب کنید:

npm install eslint-config-prettier eslint-plugin-prettier –save-dev

و فایل .eslintrc.js خود را به‌روزرسانی کنید:

// .eslintrc.js (پس از اضافه کردن Prettier) module.exports = { parser: ‘@typescript-eslint/parser’, extends: [ ‘eslint:recommended’, ‘plugin:@typescript-eslint/recommended’, ‘plugin:prettier/recommended’ // اضافه کردن Prettier به ESLint ], parserOptions: { ecmaVersion: 2020, sourceType: ‘module’ }, rules: { ‘prettier/prettier’: ‘error’, // قوانین سفارشی خود را اینجا اضافه کنید ‘indent’: [‘error’, 2], ‘linebreak-style’: [‘error’, ‘unix’], ‘quotes’: [‘error’, ‘single’], ‘semi’: [‘error’, ‘always’] } };

در نهایت، یک اسکریپت فرمت‌بندی به package.json اضافه کنید:

// package.json (اضافه کردن اسکریپت فرمت) { // … “scripts”: { “lint”: “eslint “{src,apps,libs}//.ts” –fix”, “format”: “prettier –write “{src,apps,libs}//.{ts,json,md}””, “test”: “echo “Error: no test specified” && exit 1″ }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “@typescript-eslint/eslint-plugin”: “^4.0.0”, “@typescript-eslint/parser”: “^4.0.0”, “eslint”: “^7.0.0”, “eslint-config-prettier”: “^7.0.0”, “eslint-plugin-prettier”: “^3.0.0”, “prettier”: “^2.0.0”, “typescript”: “^4.0.0” } }

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

گام پنجم: مدیریت اسکریپت‌ها در package.json و گردش کار توسعه

مدیریت صحیح اسکریپت‌ها در فایل package.json، نقشی کلیدی در بهینه‌سازی گردش کار توسعه دارد. این اسکریپت‌ها به شما امکان می‌دهند تا وظایف تکراری مانند کامپایل، تست، Linting و فرمت‌بندی کد را به سادگی و با یک دستور کوتاه اجرا کنید. این بخش از آموزش TypeScript، بر ایجاد یک محیط کارآمد برای پروژه‌های جدید متمرکز است.

افزودن اسکریپت‌های مفید

برای یک پروژه TypeScript، می‌توانید اسکریپت‌های زیر را به بخش “scripts” در فایل package.json خود اضافه کنید:

• build: این اسکریپت، مسئول کامپایل نهایی پروژه TypeScript شما به جاوا اسکریپت است. “build”: “npx tsc”
• start: برای اجرای فایل‌های جاوا اسکریپت کامپایل شده (معمولاً در محیط Node.js). این دستور پس از اجرای build استفاده می‌شود. “start”: “node dist/index.js”
• dev: این اسکریپت برای حالت توسعه کاربرد دارد و می‌تواند شامل اجرای کامپایلر در حالت Watch Mode (npx tsc -w) یا استفاده از ابزارهای باندل‌کننده (مانند Webpack یا Rollup) باشد تا تغییرات کد را به صورت زنده بازتاب دهد. “dev”: “npx tsc -w”
• lint: برای اجرای ESLint و بررسی کیفیت و استانداردهای کد. پرچم –fix تلاش می‌کند تا خطاهای قابل اصلاح را به صورت خودکار برطرف کند. “lint”: “eslint “{src,apps,libs}//.ts” –fix”
• format: برای اجرای Prettier و فرمت‌بندی خودکار کد. “format”: “prettier –write “{src,apps,libs}//.{ts,json,md}””

نمونه package.json با اسکریپت‌های توسعه TypeScript

با اضافه کردن این اسکریپت‌ها، فایل package.json شما به شکل زیر در می‌آید:

{ “name”: “my-ts-project”, “version”: “1.0.0”, “description”: “A new TypeScript project setup”, “main”: “dist/index.js”, “scripts”: { “build”: “npx tsc”, “start”: “node dist/index.js”, “dev”: “npx tsc -w”, “lint”: “eslint “{src,apps,libs}//.ts” –fix”, “format”: “prettier –write “{src,apps,libs}//.{ts,json,md}””, “test”: “echo “Error: no test specified” && exit 1″ }, “keywords”: [“typescript”, “setup”, “project”], “author”: “Your Name”, “license”: “MIT”, “devDependencies”: { “@typescript-eslint/eslint-plugin”: “^4.0.0”, “@typescript-eslint/parser”: “^4.0.0”, “eslint”: “^7.0.0”, “eslint-config-prettier”: “^7.0.0”, “eslint-plugin-prettier”: “^3.0.0”, “prettier”: “^2.0.0”, “typescript”: “^4.0.0” } }

با تعریف این اسکریپت‌ها، تنها با اجرای دستوراتی مانند npm run build یا npm run dev، می‌توانید به سرعت وظایف مربوط به پروژه خود را انجام دهید. این روش، نه تنها سرعت توسعه را افزایش می‌دهد، بلکه باعث می‌شود تا تمامی اعضای تیم، از یک گردش کار استاندارد و یکپارچه پیروی کنند. در دوره تایپ اسکریپت و کلاس آموزش TypeScript در مجتمع فنی تهران، این بخش به عنوان یک مهارت ضروری برای توسعه‌دهندگان حرفه‌ای آموزش داده می‌شود.

گام ششم: ساختار پیشنهادی یک پروژه جدید TypeScript

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

پوشه‌ها و فایل‌های اصلی

یک ساختار رایج و مؤثر برای پروژه‌های TypeScript شامل پوشه‌ها و فایل‌های زیر است:

• src/: این پوشه، خانه کد منبع TypeScript شماست. تمام فایل‌های .ts و منطق اصلی برنامه در اینجا قرار می‌گیرند.
  • src/index.ts: نقطه ورود اصلی برنامه شما. این فایل جایی است که اجرای برنامه از آن آغاز می‌شود.
  • src/types/: برای نگهداری فایل‌های تعریف نوع گلوبال یا نوع‌های خاصی که در سراسر پروژه استفاده می‌شوند (مانند global.d.ts). این کار به مدیریت بهتر و تفکیک مسئولیت‌ها کمک می‌کند.
  • src/utils/: توابع کمکی (utility functions) و ماژول‌های کوچکی که در بخش‌های مختلف پروژه کاربرد دارند، در اینجا قرار می‌گیرند. این رویکرد، از تکرار کد جلوگیری می‌کند.
  • src/components/ یا src/models/: بر اساس نوع پروژه (مثلاً وب اپلیکیشن یا بک‌اند)، می‌توانید پوشه‌هایی برای سازماندهی منطقی‌تر کد خود ایجاد کنید. برای مثال، در یک پروژه فرانت‌اند، components/ برای کامپوننت‌های رابط کاربری و در یک پروژه بک‌اند، models/ برای مدل‌های داده مناسب است.
• dist/ (یا build/): این پوشه، محل قرارگیری خروجی کامپایل شده کدهای TypeScript شما (فایل‌های .js و .js.map) است. این پوشه هرگز نباید در کنترل نسخه (Version Control) قرار گیرد.
• node_modules/: این پوشه توسط npm ایجاد می‌شود و شامل تمام وابستگی‌های پروژه شماست. این پوشه نیز نباید در کنترل نسخه قرار گیرد.
• .gitignore: فایلی که مشخص می‌کند کدام فایل‌ها و پوشه‌ها توسط سیستم کنترل نسخه (مانند Git) نادیده گرفته شوند. معمولاً node_modules/ و dist/ در این فایل ذکر می‌شوند.
• tsconfig.json: فایل پیکربندی کامپایلر TypeScript (که پیش‌تر به آن پرداختیم).
• package.json: فایل اطلاعات پروژه و اسکریپت‌های npm.
• .eslintrc.json (یا .eslintrc.js): فایل پیکربندی ESLint.
• .prettierrc: فایل پیکربندی Prettier.

این ساختار پیشنهادی، به شما کمک می‌کند تا با تفکیک مسئولیت‌ها و سازماندهی منطقی فایل‌ها، پروژه‌ای خوانا، قابل نگهداری و مقیاس‌پذیر داشته باشید. در آموزش TypeScript مجتمع فنی تهران، بر این اصول تاکید می‌شود تا دانشجویان بتوانند پروژه‌هایی با کیفیت بالا ایجاد کنند. شرکت در یک دوره تایپ اسکریپت جامع، این فرصت را فراهم می‌آورد تا این مهارت‌های اساسی را بیاموزید و به کار گیرید.

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

سوالات متداول (FAQ)

چرا باید در پروژه‌های جدید از TypeScript استفاده کنیم؟

TypeScript با افزودن نوع‌بندی استاتیک به جاوا اسکریپت، به کاهش باگ‌ها، بهبود تجربه توسعه‌دهنده (IntelliSense) و افزایش مقیاس‌پذیری و نگهداری آسان‌تر کد در پروژه‌های بزرگ کمک می‌کند.

آیا می‌توان TypeScript را در یک پروژه جاوا اسکریپت موجود ادغام کرد؟

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

تفاوت اصلی بین npx tsc –init و npm install typescript –save-dev چیست؟

npm install typescript –save-dev پکیج TypeScript را به صورت محلی در پروژه شما نصب می‌کند، در حالی که npx tsc –init فایل پیکربندی tsconfig.json را ایجاد می‌کند تا کامپایلر TypeScript بتواند رفتار خود را مطابق با نیازهای پروژه تنظیم کند.

چگونه می‌توانم تنظیمات tsconfig.json را برای یک پروژه خاص بهینه‌سازی کنم؟

با تغییر گزینه‌های موجود در بخش compilerOptions (مانند target، module، outDir، strict و lib) می‌توانید tsconfig.json را متناسب با محیط و نیازهای خاص پروژه خود سفارشی‌سازی کنید. آموزش TypeScript مجتمع فنی تهران، راهنمایی‌های عملی در این زمینه ارائه می‌دهد.

بهترین روش برای مدیریت وابستگی‌های نوع (Type Dependencies) در TypeScript چیست؟

برای کتابخانه‌هایی که به صورت پیش‌فرض شامل فایل‌های اعلان نوع (.d.ts) نیستند، می‌توانید از پکیج‌های @types/ استفاده کنید که از طریق npm قابل نصب هستند (مثلاً npm install @types/node –save-dev).

کلاس آموزش TypeScript در مجتمع فنی تهران چه مزایایی دارد؟

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

آیا برای شروع دوره تایپ اسکریپت نیاز به آشنایی عمیق با جاوا اسکریپت دارم؟

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