کامپایلر تایپ اسکریپت و پیکربندی آن

همانطور که می دانید در تایپ اسکریپت برای کامپایل کردن کدهای تایپ اسکریپت به جاوا اسکریپت از دستور tsc filename.ts استفاده می کردیم به صورتی که به جای Filename باید نام فایل مورد نظر برای کامپایل را بیاوریم. مشکل اینجاست که در پروژه های واقعی شاید ده ها فایل داشته باشیم و نمی توان بعد از هر تغییر کوچک، این دستور را برای هر کدام از آن ها اجرا کرد، این کار بسیار وقت گیر است. جدا از این مشکل، تنظیمات جالب دیگری نیز برای کامپایلر تایپ اسکریپت وجود دارد که مشخص می کند چه چیز هایی کامپایل شود و به چه نسخه ای کامپایل شود و غیره. ما به تمام این تنظیمات دسترسی داریم و در این فصل می خواهم شما را با آن ها آشنا کنم.

اولین کار، خودکار کردن دستور tsc است که اتفاقا عملیات ساده ای دارد. در تایپ اسکریپت حالتی به نام watch mode وجود دارد که با استفاده از آن به تایپ اسکریپت می گوییم فایل های ما را زیر نظر داشته باشد و هنگامی که یکی از فایل ها تغییر کرد، خودش کدها را کامپایل کند تا ما هر بار دستور tsc را اجرا نکنیم. برای انجام این کار باید دستور زیر را در ترمینال خود وارد کنید:

tsc app.ts --watch

با اجرای این دستور فایل app.ts زیر نظر گرفته می شود و با هر بار تغییر عملیات کامپایل شدن خودکار انجام خواهد شد. البته این دستور یک حالت خلاصه نیز دارد که به شکل زیر نوشته می شود:

tsc app.ts -w

هر کدام را که اجرا کنید مشکلی نخواهید داشت. توجه داشته باشید که این حالت مثل سرور مجازی برای رفرش کردن خودکار صفحات ما است، یعنی نباید از ترمینال خود خارج بشوید و گرنه حالت watch mode از بین می رود. بهترین کار استفاده از ترمینال درون خود visual studio code است. در visual studio code ترمینال را از منوی view انتخاب کنید. سپس دستور watch mode را اجرا کنید. حالا اگر می خواهید دستورات دیگری را در ترمینال خود اجرا کنید، علامت مثبت (+) روی ترمینال را بزنید تا ترمینال قبلی باز نگه داشته شده و ترمینال جدیدی برایتان باز شود.

از این به بعد اگر کدی را تغییر داده و فایل را ذخیره کنید (کلیدهای Ctrl + S) کدهای فایل app.ts به صورت خودکار برایتان کامپایل می شوند. در حال حاضر مشکل اینجاست که این روش تنها روی یک فایل خاص تمرکز می کند اما در پروژه های بزرگ تر فایل های بیشتری داریم و نمی توانیم برای تک تک آن ها watch mode ایجاد کنیم. راه حل چیست؟

فرض کنید فایل دیگری نیز داشته باشیم که مخصوص ارسال آمار بازدید بوده و نامش analytics.ts باشد. من فعلا محتوای ساده ی زیر را درون آن قرار می دهم:

console.log('Sending data...');

همچنین فرض محتویات فایل app.ts نیز به شکل زیر باشد:

const userName = 'Amir';

console.log(userName);

حالا به فایل index.html بروید و فایل analytics.ts را نیز درون آن وارد کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Understanding TypeScript</title>
  <script src="app.js" defer></script>
  <script src="analytics.js" defer></script>
</head>
<body>
  
</body>
</html>

هنوز analytics.js وجود ندارد اما بعدا به وجود خواهد آمد. حالا می توانیم به تایپ اسکریپت بگوییم که تمام این فایل ها جز یک پروژه هستند بنابراین باید watch mode را برای تمام پروژه تنظیم کنید. برای انجام این کار باید در ترمینال خود بگویید:

tsc --init

این کار به تایپ اسکریپت می گوید هر جا که این دستور اجرا شد (هر پوشه ای باشد) تمام فایل ها و پوشه های درون آن جزو پروژه ی ما هستند. با اجرای این کد و زدن اینتر یک فایل جدید به نام tsconfig.json ایجاد می شود. اگر این فایل را باز کنید شاهد انواع و اقسام دستورات مختلف خواهید بود که اکثرشان کامنت و غیر فعال شده اند:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

ما در این فصل (و تا پایان این دوره) اکثر این گزینه ها را بررسی خواهیم کرد. این گزینه ها مربوط به پیکربندی و تنظیمات کامپایلر تایپ اسکریپت است و فعلا با آن ها کاری نداریم. در حال حاضر این فایل را ببندید و به همان فایل analytics.ts یا app.ts برگردید (یکی از فایل های پروژه). حالا فقط کافی است که دستور زیر را اجرا کنید:

tsc

دیگر نیازی به مشخص کردن فایل های خاص نیست، بلکه با اجرای tsc تمام فایل های این پروژه (در صورت تغییر) دوباره کامپایل می شوند. البته می توانید این دستور را با watch mode ترکیب کنید، یعنی در ترمینال بگویید:

tsc -w

توجه کنید که در دستور بالا نام فایل خاصی را مشخص نکرده ایم بنابراین تمام فایل ها وارد watch mode شده و هر زمان که هر فایلی تغییر کند و ذخیره شود، کدهایش به صورت خودکار کامپایل خواهند شد.

امیدوارم از بحث بررسی ساختار کامپایلر تایپ اسکریپت استفاده ی کافی را برده باشید.