چگونه TypeScript به شما در نوشتن کد بهتر کمک می کند

TypeScript در حال تسخیر وب است. در این مقاله به شما یک نمای کلی از مزایای TypeScript و اینکه چگونه می‌تواند به شما در ایجاد وب‌سایت‌هایی با باگ های کمتر کمک کند، ارائه می‌دهم.

شما یاد خواهید گرفت که چگونه TypeScript در رسیدگی به موارد لبه، گرفتن اشتباهات نوع، refactoring کد و اینکه چگونه انواع کدها را آسان تر می کند، کمک می کند.

آخرین نظرسنجی وضعیت جاوا اسکریپت نشان داد که توسعه دهندگان زمان بیشتری را صرف نوشتن TypeScript می کنند تا کد جاوا اسکریپت. نظرسنجی خود GitHub ادعای ساده‌تری دارد و می‌گوید که TypeScript تنها چهارمین زبان پرکاربرد در این پلتفرم است - پس از جاوا اسکریپت - اما میزان استفاده از آن تقریباً 40٪ در یک سال افزایش یافته است. چرا این تغییر اتفاق می افتد؟

Type چیست؟

ممکن است بدانید که در جاوا اسکریپت (مانند سایر زبان‌های برنامه‌نویسی)، انواع داده‌های مختلفی مانند رشته‌ها، اعداد، آرایه‌ها، اشیاء، توابع، بولی، مقادیر تعریف‌نشده و null وجود دارد. اینها همه تایپ هستند.

اما جاوا اسکریپت به صورت پویا type می شود، به این معنی که متغیرها می توانند نوع را تغییر دهند. می توانید مقدار یک متغیر را روی یک رشته در یک خط تنظیم کنید و همان متغیر را روی یک عدد در خط دیگر تنظیم کنید، به عنوان مثال:

let value = 'Hello';
value = 3;

از یک طرف این یک فایده زبان است. یعنی ساده و بسیار انعطاف پذیر است. لازم نیست خود را با تنظیم انواع محدود کنید.

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

اگر به طور تصادفی از نوع  های اشتباه استفاده کنید، با خطا مواجه خواهید شد. آیا سعی کرده اید طول تعریف نشده را بدست آورید؟ سعی نکنید، برای شما یک خطا ایجاد می کند. اما شاید یک مورد لبه داشتید که ارزش شما را تغییر داد و متوجه آن نبودید:

value = 3;
...
console.log(value.length); // TypeError: Cannot read properties of undefined

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

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

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

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

شما قبلاً از TypeScript استفاده می کنید

بیایید اصول اولیه را مرور کنیم: TypeScript اطلاعات نوع را به شما می دهد. انواع متغیرهای شما، نوع آرگومان‌هایی که باید به توابع خود منتقل کنید و نوع داده‌هایی که آنها برمی‌گردانند را به شما می‌گوید.

اما اگر به شما بگویم که از TypeScript حتی در جاوا اسکریپت ساده استفاده می کنید، چه؟

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

function getGreeting(str) {
	return `Hello ${str}!`;
}

let input = 'Bob'; // Type: string
let greeting = getGreeting(input); // Type: string
let greetingLength = greeting.length; // Type: number

console.log(greeting, greetingLength);

اگر ماوس را روی متغیر input نگه دارید، VS Code به شما می گوید که نوع آن یک رشته است. این کاملاً واضح است، زیرا ما یک رشته را در همان خط به آن اختصاص داده ایم.

اما اگر جلوتر برویم و نوع getGreeting را بررسی کنیم، می گوید که یک رشته است. این کمی جالب تر است. مقدار Greeting از یک تابع می آید. چگونه بفهمیم که یک رشته است؟

VS Code با کمک TypeScript تابع را تجزیه و تحلیل می کند، هر مسیر بازگشتی ممکن را بررسی می کند و به این نتیجه می رسد که تنها چیزی که این تابع می تواند برگرداند یک رشته است.

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

برای اینکه کمی بیشتر به این مثال بمانیم، اگر ماوس را روی متغیر طول بکشیم، خواهیم دید که نوع آن یک عدد است. این ممکن است دوباره بدیهی به نظر برسد، اما منطق پشت آن هوشمندتر از آن چیزی است که به نظر می رسد.

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

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

بررسی آرگومان های مورد نیاز برای توابع داخلی

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

در اینجا ما یک مقدار ورودی داریم، دوباره آن را به 'bob' تبدیل می کنیم و سپس رشته را با حروف بزرگ می نویسیم. کاراکتر اول را می گیریم، آن را بزرگ می کنیم، سپس بقیه رشته را با حروف کوچک اضافه می کنیم.

let input = 'bob';
let formattedInput = 
	input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
let formattedLength = formattedInput.length;

console.log(greeting, greetingLength);

ما می توانیم امضای تابع این توابع را بررسی کنیم. می بینیم که charAt به یک پارامتر عدد نیاز دارد، toUpperCase به هیچ پارامتری نیاز ندارد، و تابع slice دارای دو پارامتر اختیاری است که می توانند عدد باشند یا تعریف نشده باشند.

اینها  TypeScript Annotations هستند. علامت سوال به این معنی است که یک مقدار اختیاری است، و کاراکترهای pipe به این معنی است که یک نوع می تواند این یا آن باشد.

به طور خلاصه، ما می دانیم که ورودی فرمت شده ما از نوع رشته است.

جایی که جاوا اسکریپت دیگر نمی تواند انواع آن را تشخیص دهد

بیایید منطقی را استخراج کنیم که input ما را به یک تابع تبدیل می کند. انواع باید ثابت بمانند، درست است؟ خوب، نه دقیقا. اکنون ورودی ما با حروف بزرگ از نوع any است.

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput = capitalize(input); // Type: any
let formattedLength = formattedInput.length;

جالب هست! چی شد؟ تابع ما همیشه باید یک رشته برگرداند، درست است؟ اگر به کل پایه کد در این مورد خاص نگاه کنید، بله. باید یک رشته را برگرداند.

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

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

ممکن است متوجه شوید که مثال قبلی با تابع getGreeting متفاوت بود. در آنجا، مهم نیست که ورودی چیست، تابع همیشه یک رشته را برمی گرداند. اما در اینجا خروجی به ورودی بستگی دارد.

در مورد Edge Cases در جاوا اسکریپت چطور؟

آیا در صورت دریافت input اشتباه در جاوا اسکریپت، می‌توانیم از دریافت خطا جلوگیری کنیم؟ آره.

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

حالا این تابع از کار نخواهد افتاد. اما من یک باگ معرفی کردم.

function capitalize(str) {
    if (typeof str !== 'string') return;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput = capitalize(input); // Type: string or undefined
let formattedLength = formattedInput.length;

اگر امضای تابع یا نوع مقدار جدید را بررسی کنیم، از any به undefined |  string تغییر کرده است.از یک جهت که بسیار تمیز است. ما مقادیر بازگشتی ممکن را محدود کردیم و فقط با نگاه کردن به مقدار برگشتی، درک بهتری از عملکرد تابع داریم. از طرف دیگر، در صورت بازگشت تعریف نشده، برنامه در خط بعدی با شکست مواجه می شود. شما نمی توانید طول تعریف نشده را بررسی کنید.

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

اگر تابع capitalize را ننوشتید و ندانید دقیقا چگونه کار می کند چه؟

شاید در فایل دیگری نیز قرار دارد و شما به سادگی فرض کرده اید که همیشه یک رشته را برمی گرداند. شاید عملکردی که استفاده می کنید بسیار طولانی تر و بسیار پیچیده تر باشد.

شاید تابع را بررسی کرده باشید، اما فقط خط آخر آن را بررسی کرده باشید و بگویید "خب، این تابع یک رشته را برمی گرداند". و شما کاملاً آن را از دست می دهید در یک خط متفاوتT که می تواند در وسط تابع نیز باشد، عبارت بازگشت دیگری وجود دارد که نوع متفاوتی از مقدار را برمی گرداند.

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

در جاوا اسکریپت، باید حواستان به موارد لبه باشد، سناریوهای مختلف و ورودی‌های کاربر را آزمایش کنید و تست‌های واحد کامل بنویسید تا مطمئن شوید منطق شما شکست نمی‌خورد.

آیا خوب نیست که ویرایشگر به شما بگوید که مشکل دارید؟

کد را به TypeScript تبدیل کنید

بنابراین پس از این همه مقدمه، اجازه دهید در نهایت این کد را به TypeScript تبدیل کنیم. برای انجام این کار، اجازه دهید به سادگی پسوند را از js. به ts. تغییر دهیم و ببینیم چه اتفاقی می افتد.

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

function capitalize(str) {
    if (typeof str !== 'string') return;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput = capitalize(input);
let formattedLength = formattedInput.length; // Error

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

برای این کار به یک فایل tsconfig.json در ریشه پروژه خود نیاز داریم. این ممکن است اکنون کمی ترسناک به نظر برسد، اما به احتمال زیاد این فایل زمانی که پروژه ای با هر یک از فریم ورک ها ایجاد می کنید، به طور خودکار برای شما ایجاد می شود. آنچه در حال حاضر مهم است این است که حالت strictرا روی true تنظیم کرده ایم.

{
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "lib": ["DOM", "ESNext"],
      "moduleResolution": "node",
      "noImplicitAny": true,
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./src",
      "paths": {
        "*": ["src/*"]
      },
      "outDir": "./dist",
      "rootDir": "./src",
      "strictPropertyInitialization": false,
      "noEmit": false,
    },
    "include": ["src/**/*.ts", "src/index.js"],
    "exclude": ["node_modules"]
  }

این باگ های بیشتری را نشان می دهد زیرا با این تنظیم باید انواع آرگومان های تابع خود را تعریف کنیم.

function capitalize(str) { // Error
    if (typeof str !== 'string') return;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput = capitalize(input);
let formattedLength = formattedInput.length; // Error

بنابراین اجازه دهید مشخص کنیم که تابع capitalize ما با تنظیم آرگومان بر روی str: string به یک رشته نیاز دارد. و این همه انواعی است که باید در این مورد اضافه کنیم، زیرا این تنها چیزی است که TypeScript نمی تواند خودش آن را بفهمد.

function capitalize(str: string) {
    if (typeof str !== 'string') return;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput = capitalize(input);
let formattedLength = formattedInput.length; // Error

یک تصور اشتباه در مورد TypeScript این است که شما باید انواع را به همه چیز اضافه کنید. اگرچه این تمرین بدی نیست، اما به شدت ضروری نیست. TypeScript بسیار هوشمند است. کد را تجزیه و تحلیل می کند و انواع موارد را تا حد امکان مشخص می کند.

البته می توانیم انواع را در جاهای دیگر مشخص کنیم. با تنظیم let formattedInput: string می‌توانیم مشخص کنیم که باید مقدار formattedInput ما یک رشته باشد. تمام مشکل ما اینجاست. ما فکر می کردیم که این یک رشته است، اما در برخی موارد، اینطور نبود.

function capitalize(str: string) {
    if (typeof str !== 'string') return;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput: string = capitalize(input); // Error
let formattedLength = formattedInput.length;

این بلافاصله مشکل ما را برجسته می کند. ما می خواهیم که یک رشته باشد، اما تابع ما ممکن است تعریف نشده برگردد. می‌توانیم در popover بخوانیم که undefined را نمی‌توان به تایپ رشته اختصاص داد.

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

function capitalize(str: string): string {
    if (typeof str !== 'string') return; // Error
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

let input = 'bob';
let formattedInput: string = capitalize(input);
let formattedLength = formattedInput.length;

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

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

اصلاح مجدد کد

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

export function getGreeting(firstName: string, lastName: string) {
    const formattedFirstName = capitalize(firstName);
    const formattedLastName = capitalize(lastName);
    return `Hello ${formattedFirstName} ${formattedLastName}!`;
}

function capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

اگر تصمیم بگیریم که باید این کد را دوباره فاکتور کنیم چه؟ به جای ارسال دو رشته، می‌خواهیم در یک شی که دارای ویژگی‌های firstName و lastName است، عبور دهیم.

در TypeScript می‌توانیم شکل یک شی را دقیقاً تعریف کنیم. می‌توانیم تعریف کنیم که باید پارامتر شخص را به یک شی با ویژگی firstName و lastName منتقل کنیم، که هر دو باید رشته باشند.

می توانیم برای این آرگومان یک نوع تعریف کنیم. می گوییم که طبق قرارداد یک نوع Person با P بزرگ داریم. این نوع یک شی را با ویژگی های firstName و lastName توصیف می کند که هر دو رشته هستند.

حتی اگر بخواهیم می‌توانیم چیزهای بیشتری اضافه کنیم، مانند افزودن یک ویژگی birthday که دارای نوع Date است. اما بیایید این را اختیاری کنیم زیرا فعلاً نمی خواهیم با آن مقابله کنیم.

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

type Person = {
    firstName: string,
    lastName: string,
    birthDay?: Date
}

export function getGreeting(person: Person) {
    const formattedFirstName = capitalize(firstName);
    const formattedLastName = capitalize(lastName);
    return `Hello ${formattedFirstName} ${formattedLastName}!`;
}

function capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

اکنون می توانیم تعیین کنیم که آرگومان person ما از نوع Person باشد.

همانطور که ما این تغییر را انجام می دهیم، ویرایشگر به رنگ قرمز روشن می شود. می گوید که من سعی می کنم از متغیرهایی استفاده کنم که وجود ندارند. در این تابع، من به firstName و lastName اشاره می کنم، و اکنون فقط یک شخص وجود دارد.

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

بیایید خطای این فایل را برطرف کنیم و firstName و lastName را با person.firstName و person.lastName جایگزین کنیم. TypeScript در استفاده از متغیرهایی که وجود ندارند بسیار حساس است.

مثال بهتری برای شما می زنم: اگر در اینجا اشتباه تایپی داشته باشم چه می شود؟ اگر نامه ای از firstName را از دست بدهم چه می شود؟ این می تواند یک مشکل به راحتی در جاوا اسکریپت نادیده گرفته شود. با این حال، در اینجا نه تنها مشخص شده است که چنین ویژگی در یک Person وجود ندارد، بلکه حتی نشان می دهد که ممکن است بخواهید به جای آن از firstName استفاده کنید.

type Person = {
    firstName: string,
    lastName: string,
    birthDay?: Date
}

export function getGreeting(person: Person) {
    const formattedFirstName = capitalize(person.frstName);
    const formattedLastName = capitalize(person.lastName);
    return `Hello ${formattedFirstName} ${formattedLastName}!`;
}

function capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

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

import { getGreeting } from "./utils";

let greeting = getGreeting({ firstName: 'bob', lastName:  'marley' });

console.log(greeting);

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

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

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

اگر بخواهیم مطمئن شویم که متغیر ما از نوع Person است، می توانیم نوع را وارد کرده و روی این شی تنظیم کنیم. ابتدا باید آن را در فایل utility ایمپورت کنیم و سپس بتوانیم آن را به عنوان تابع خود وارد کنیم، سپس آن را به شی خود اختصاص دهیم.

import { Person, getGreeting } from "./utils";

let person: Person = {
    firstName: 'bob',
    lastName: 'dylan'
}

let greeting = getGreeting(person);

console.log(greeting);

نتیجه

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

به طور خلاصه، سه دلیل اصلی وجود دارد که می‌خواهید از TypeScript استفاده کنید:

اطلاعات نوع در مورد توابع دریافت می کنید
میدانید چی برگشت داده می شود
شما می دانید که آنها از شما چه انتظاراتی دارند، حتی بدون اینکه به خود تابع نگاه کنید

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

تایپ اسکریپت در زمان بازآفرینی کمک زیادی می کند. این به شما اجازه نمی دهد هیچ بخشی از کد خود را که باید تغییر دهید از دست بدهید و به شما اجازه نمی دهد از اشتباهات املایی خلاص شوید.