نحوه استفاده از رابط ها در TypeScript
ورود به سایت
معرفی
TypeScript افزونه ای از زبان جاوا اسکریپت است که از زمان اجرای جاوا اسکریپت با یک نوع تایپ کننده زمان کامپایل استفاده می کند.
TypeScript روش های متعددی را برای نمایش اشیاء در کد شما ارائه می دهد که یکی از آنها استفاده از رابط ها است. رابط های موجود در TypeScript دو سناریو استفاده دارند: می توانید قراردادی ایجاد کنید که کلاسها باید از آن پیروی کنند ، مانند اعضایی که آن کلاسها باید اجرا کنند ، و همچنین می توانید انواع را در برنامه خود نشان دهید ، درست مانند اعلان نوع معمولی. (برای اطلاعات بیشتر در مورد انواع ، نحوه استفاده از انواع اصلی در TypeScript و نحوه ایجاد انواع سفارشی در TypeScript را بررسی کنید.)
ممکن است توجه داشته باشید که رابط ها و انواع دارای مجموعه ای از ویژگی های مشابه هستند. در واقع ، تقریباً همیشه می توان یکی را جایگزین دیگری کرد. تفاوت اصلی این است که رابط ها ممکن است بیش از یک اعلان برای یک رابط داشته باشند ، که TypeScript ادغام می شود ، در حالی که انواع را فقط یک بار می توان اعلام کرد. همچنین می توانید از انواع برای ایجاد نام مستعار از انواع اولیه (مانند رشته و بولی) استفاده کنید ، که رابط ها نمی توانند انجام دهند.
رابط های موجود در TypeScript راهی قدرتمند برای نمایش ساختارهای نوع هستند. آنها به شما امکان می دهند استفاده از آن ساختارها را ایمن کرده و به طور همزمان آنها را مستند کنید ، به طور مستقیم تجربه توسعه دهنده را بهبود می بخشد.
در این آموزش ، شما رابط هایی را در TypeScript ایجاد می کنید ، نحوه استفاده از آنها را یاد می گیرید و تفاوت بین انواع معمولی و رابط ها را درک می کنید. نمونه های مختلف کد را امتحان می کنید ، که می توانید آنها را در محیط TypeScript یا TypeScript Playground خود ، محیط آنلاین که به شما امکان می دهد TypeScript را مستقیماً در مرورگر بنویسید ، دنبال کنید.
پیش نیازها
برای پیگیری این آموزش ، شما نیاز دارید:
- محیطی که در آن می توانید برنامه های TypeScript را اجرا کنید تا همراه با مثال ها دنبال کنید. برای تنظیم این دستگاه در دستگاه محلی خود ، به موارد زیر نیاز دارید.
- هر دو Node و npm (یا نخ) به منظور اجرای یک محیط توسعه که بسته های مربوط به TypeScript را مدیریت می کند ، نصب شده است. این آموزش با Node.js نسخه 14.3.0 و npm نسخه 6.14.5 آزمایش شده است. برای نصب روی macOS یا اوبونتو 18.04 ، مراحل نحوه نصب Node.js و ایجاد محیط توسعه محلی در macOS یا قسمت Installing using a PPA از نحوه نصب Node.js در اوبونتو 18.04 را دنبال کنید. اگر از زیر سیستم Windows برای Linux (WSL) استفاده می کنید ، این نیز کار می کند.
- علاوه بر این ، به TypeScript Compiler (tsc) نصب شده بر روی دستگاه خود نیاز دارید.
- شما به دانش کافی از جاوا اسکریپت ، به ویژه نحو ES6+ ، مانند تخریب ، عملگرهای استراحت و واردات/صادرات نیاز دارید. اگر به اطلاعات بیشتری در مورد این موضوعات نیاز دارید ، خواندن نحوه کدگذاری در سری JavaScript توصیه می شود.
- این آموزش به جنبه های ویرایشگرهای متنی که از TypeScript پشتیبانی می کنند اشاره می کند و خطاهای خطی را نشان می دهد. این برای استفاده از TypeScript ضروری نیست ، اما از ویژگیهای TypeScript بیشتر استفاده می کند. برای بهره مندی از این موارد ، می توانید از ویرایشگر متنی مانند Visual Studio Code استفاده کنید که از TypeScript پشتیبانی کامل دارد. همچنین می توانید این مزایا را در TypeScript Playground امتحان کنید.
همه نمونه های نشان داده شده در این آموزش با استفاده از TypeScript نسخه 4.2.2 ایجاد شده است.
ایجاد و استفاده از رابط ها در TypeScript
در این بخش ، رابط هایی را با استفاده از ویژگی های مختلف موجود در TypeScript ایجاد خواهید کرد. همچنین نحوه استفاده از رابط های ایجاد شده را خواهید آموخت.
رابط ها در TypeScript با استفاده از کلید واژه رابط و سپس نام رابط و سپس یک بلوک {} با بدنه رابط ایجاد می شوند. به عنوان مثال ، در اینجا یک رابط Logger است:
interface Logger {
log: (message: string) => void;
}مشابه ایجاد یک نوع معمولی با استفاده از اعلان نوع ، فیلدهای نوع و نوع آنها را در {} مشخص می کنید:
interface Logger {
log: (message: string) => void;
}رابط Logger نشان دهنده یک شی است که دارای یک ویژگی واحد به نام log است. این ویژگی یک تابع است که یک پارامتر واحد از نوع string را می پذیرد و void را برمی گرداند.
می توانید از رابط Logger به عنوان هر نوع دیگری استفاده کنید. در اینجا یک مثال ایجاد یک شیء تحت اللفظی مطابق با رابط Logger آورده شده است:
interface Logger {
log: (message: string) => void;
}
const logger: Logger = {
log: (message) => console.log(message),
};مقادیری که از رابط Logger به عنوان نوع خود استفاده می کنند باید دارای اعضایی مشابه اعلان رابط Logger باشند. اگر برخی از اعضا اختیاری باشند ، ممکن است حذف شوند.
از آنجا که مقادیر باید از آنچه در رابط اعلام شده است پیروی کنند ، افزودن فیلدهای اضافی باعث خطای کامپایل می شود. به عنوان مثال ، در object literal ، سعی کنید یک ویژگی جدید که در رابط وجود ندارد اضافه کنید:
interface Logger {
log: (message: string) => void;
}
const logger: Logger = {
log: (message) => console.log(message),
otherProp: true,
};در این حالت ، کامپایلر TypeScript خطای 2322 را منتشر می کند ، زیرا این ویژگی در اعلان رابط Logger وجود ندارد:
Output
Type '{ log: (message: string) => void; otherProp: boolean; }' is not assignable to type 'Logger'.
Object literal may only specify known properties, and 'otherProp' does not exist in type 'Logger'. (2322)نوع دیگر Extending
هنگام ایجاد رابط ها ، می توانید از انواع مختلف شی گسترش دهید ، و به رابط های خود اجازه دهید تمام اطلاعات مربوط به انواع توسعه یافته را شامل شوند. این به شما این امکان را می دهد که رابط های کوچک را با مجموعه ای از زمینه های مشترک بنویسید و از آنها به عنوان بلوک های سازنده برای ایجاد رابط های جدید استفاده کنید.
تصور کنید یک رابط کاربری قابل پاک کردن دارید ، مانند این یکی:
interface Clearable {
clear: () => void;
}سپس می توانید یک رابط جدید ایجاد کنید که از آن گسترش یافته و همه زمینه های آن را به ارث برده است. در مثال زیر ، رابط Logger در حال گسترش از رابط Clearble است. به خطوط برجسته توجه کنید:
interface Clearable {
clear: () => void;
}
interface Logger extends Clearable {
log: (message: string) => void;
}رابط Logger هم اکنون دارای یک عضو واضح است که یک تابع است که هیچ پارامتری را نمی پذیرد و void را برمی گرداند. این عضو جدید از رابط Clearable به ارث برده شده است. مثل این است که ما این کار را کرده ایم:
interface Logger {
log: (message: string) => void;
clear: () => void;
}هنگام نوشتن تعداد زیادی رابط با مجموعه ای از زمینه های مشترک ، می توانید آنها را در یک رابط مختلف استخراج کرده و رابط های خود را تغییر دهید تا از رابط جدیدی که ایجاد کرده اید گسترش یابد.
برای بازگشت به مثال Clearble که قبلاً استفاده شد ، تصور کنید که برنامه شما نیاز به رابط متفاوتی دارد ، مانند رابط StringList زیر ، برای نشان دادن یک ساختار داده که دارای چندین رشته است:
interface StringList {
push: (value: string) => void;
get: () => string[];
}با گسترش این رابط StringList جدید ، رابط Clearable موجود را گسترش می دهید ، شما مشخص می کنید که این رابط همچنین اعضایی را در رابط Clearable تنظیم کرده است و ویژگی روشن را به تعریف نوع رابط StringList اضافه می کند:
interface StringList extends Clearable {
push: (value: string) => void;
get: () => string[];
}رابط ها می توانند از هر نوع شیء مانند رابط ها ، انواع معمولی و حتی کلاس ها گسترش یابند.
رابط هایی با امضای قابل تماس
اگر رابط نیز قابل تماس باشد (یعنی یک تابع نیز باشد) ، می توانید با ایجاد یک امضای قابل تماس ، این اطلاعات را در اعلان رابط منتقل کنید.
یک امضای قابل تماس با افزودن یک اعلان تابع در داخل رابط که به هیچ عضوی متصل نیست و با استفاده از: به جای => هنگام تنظیم نوع بازگشتی تابع ، ایجاد می شود.
به عنوان مثال ، یک امضای قابل تماس به رابط Logger خود اضافه کنید ، مانند کد برجسته زیر:
interface Logger {
(message: string): void;
log: (message: string) => void;
}توجه داشته باشید که امضای قابل تماس شبیه به اعلان نوع یک تابع ناشناس است ، اما در نوع بازگشتی که استفاده می کنید: به جای =>. این بدان معناست که هر مقدار مقید به نوع رابط Logger می تواند مستقیماً به عنوان یک تابع فراخوانی شود.
برای ایجاد مقداری که با رابط Logger شما مطابقت داشته باشد ، باید الزامات رابط را در نظر بگیرید:
- باید قابل تماس باشد.
- باید دارای یک ویژگی به نام log باشد که یک تابع است که یک پارامتر رشته را قبول می کند.
بیایید متغیری به نام logger ایجاد کنیم که می تواند به نوع رابط Logger شما اختصاص داده شود:
interface Logger {
(message: string): void;
log: (message: string) => void;
}
const logger: Logger = (message: string) => {
console.log(message);
}
logger.log = (message: string) => {
console.log(message);
}برای مطابقت با رابط Logger ، مقدار باید قابل تماس باشد ، به همین دلیل است که متغیر logger را به یک تابع اختصاص می دهید:
interface Logger {
(message: string): void;
log: (message: string) => void;
}
const logger: Logger = (message: string) => {
console.log(message);
}
logger.log = (message: string) => {
console.log(message);
}سپس ویژگی log را به تابع logger اضافه می کنید:
interface Logger {
(message: string): void;
log: (message: string) => void;
}
const logger: Logger = (message: string) => {
console.log(message);
}
logger.log = (message: string) => {
console.log(message);
}این توسط رابط Logger مورد نیاز است. مقادیر متصل به رابط Logger نیز باید دارای ویژگی log باشند که تابعی است که یک پارامتر یک رشته را می پذیرد و void را برمی گرداند.
اگر ویژگی log را وارد نکرده باشید ، کامپایلر TypeScript خطای 2741 را به شما می دهد:
Output
Property 'log' is missing in type '(message: string) => void' but required in type 'Logger'. (2741)اگر ویژگی log در متغیر logger دارای امضای نوع ناسازگار باشد ، مانند تنظیم آن روی true ، خطای مشابهی را منتشر می کند:
interface Logger {
(message: string): void;
log: (message: string) => void;
}
const logger: Logger = (message: string) => {
console.log(message);
}
logger.log = true;در این مورد ، کامپایلر TypeScript خطای 2322 را نشان می دهد:
Output
Type 'boolean' is not assignable to type '(message: string) => void'. (2322)یکی از ویژگیهای خوب تنظیم متغیرها برای داشتن یک نوع خاص ، در این مورد تنظیم متغیر logger برای نوع رابط Logger ، این است که TypeScript اکنون می تواند نوع پارامترهای عملکرد logger و عملکرد در log را استنباط کند. ویژگی.
با حذف اطلاعات نوع از آرگومان هر دو تابع ، می توانید آن را بررسی کنید. توجه داشته باشید که در کد برجسته زیر ، پارامترهای پیام یک نوع ندارند:
interface Logger {
(message: string): void;
log: (message: string) => void;
}
const logger: Logger = (message) => {
console.log(message);
}
logger.log = (message) => {
console.log(message);
}و در هر دو مورد ، ویرایشگر شما هنوز باید بتواند نشان دهد که نوع پارامتر یک رشته است ، زیرا این نوع مورد انتظار رابط Logger است.
رابط با امضای فهرست
شما می توانید یک امضای فهرست به رابط کاربری خود اضافه کنید ، درست مانند انواع معمولی ، بنابراین به رابط اجازه می دهد تا تعداد نامحدودی از ویژگی ها را داشته باشد.
به عنوان مثال ، اگر می خواهید یک رابط DataRecord ایجاد کنید که دارای تعداد نامحدود فیلد رشته است ، می توانید از امضای فهرست برجسته زیر استفاده کنید:
interface DataRecord {
[key: string]: string;
}سپس می توانید از رابط DataRecord برای تعیین نوع هر شیئی که دارای پارامترهای متعدد رشته نوع است استفاده کنید:
interface DataRecord {
[key: string]: string;
}
const data: DataRecord = {
fieldA: "valueA",
fieldB: "valueB",
fieldC: "valueC",
// ...
};در این بخش ، با استفاده از ویژگی های مختلف موجود در TypeScript ، رابط هایی ایجاد کردید و نحوه استفاده از رابط هایی را که ایجاد کردید آموختید. در بخش بعدی ، با تفاوت بین اعلان های نوع و رابط بیشتر آشنا می شوید و با ادغام اعلانات و افزایش ماژول تمرین می کنید.
تفاوت بین Types and Interfaces
تا کنون ، مشاهده کرده اید که اعلان رابط و اعلامیه مشابه هستند و تقریباً مجموعه ای از ویژگی ها را دارند.
به عنوان مثال ، شما یک رابط Logger ایجاد کرده اید که از یک رابط Clearble توسعه یافته است:
interface Clearable {
clear: () => void;
}
interface Logger extends Clearable {
log: (message: string) => void;
}نمایش نوع یک را می توان با استفاده از دو نوع اعلان تکرار کرد:
type Clearable = {
clear: () => void;
}
type Logger = Clearable & {
log: (message: string) => void;
}همانطور که در بخشهای قبلی نشان داده شد ، اعلان رابط می تواند برای نمایش انواع اشیاء ، از توابع گرفته تا اشیاء پیچیده با تعداد نامحدودی از ویژگی ها استفاده شود. این امر با اعلانات نوع ، حتی از انواع دیگر امکان پذیر است ، زیرا شما می توانید چندین نوع را با استفاده از عملگر تقاطع و با یکدیگر قطع کنید.
از آنجا که اعلانات نوع و اعلان های رابط بسیار شبیه هستند ، باید ویژگی های خاص منحصر به فرد هر یک را در نظر بگیرید و در پایگاه کد خود سازگار باشید. یکی را برای ایجاد نمایندگی های نوع در پایگاه کد خود انتخاب کنید و فقط زمانی از ویژگی دیگر استفاده کنید که به ویژگی خاصی که فقط در دسترس آن است نیاز داشته باشید.
به عنوان مثال ، اعلان نوع دارای چند ویژگی است که اعلان رابط فاقد آن است ، مانند:
- انواع اتحادیه
- انواع نقشه برداری شده
- نام مستعار به انواع اولیه
یکی از ویژگی هایی که فقط برای اعلان رابط موجود است ادغام اعلامیه است که در قسمت بعدی با آن آشنا خواهید شد. توجه به این نکته ضروری است که ادغام اظهارنامه ممکن است مفید باشد اگر شما در حال نوشتن کتابخانه هستید و می خواهید به کاربران کتابخانه قدرت گسترش انواع ارائه شده توسط کتابخانه را بدهید ، زیرا این امر با اعلانات نوع امکان پذیر نیست.
اعلامیه ادغام
TypeScript می تواند چندین اظهارنامه را در یک واحد ادغام کند و به شما این امکان را می دهد که چندین اظهارنامه را برای یک ساختار داده یکسان بنویسید و آنها را در طول کامپایلر توسط کامپایلر TypeScript به هم متصل کرده و گویی یک نوع واحد هستند. در این بخش خواهید دید که چگونه این کار می کند و چرا هنگام استفاده از رابط ها مفید است.
رابط های TypeScript را می توان دوباره باز کرد. یعنی چندین اعلان از یک رابط یکسان می توانند ادغام شوند. این زمانی مفید است که می خواهید زمینه های جدیدی را به یک رابط موجود اضافه کنید.
به عنوان مثال ، تصور کنید که یک رابط به نام DatabaseOptions مانند زیر دارید:
interface DatabaseOptions {
host: string;
port: number;
user: string;
password: string;
}از این رابط برای انتقال گزینه ها هنگام اتصال به پایگاه داده استفاده می شود.
بعداً در کد ، یک رابط با همان نام اما با یک رشته رشته به نام dsnUrl اعلام می کنید ، مانند این:
interface DatabaseOptions {
dsnUrl: string;
}وقتی کامپایلر TypeScript شروع به خواندن کد شما می کند ، تمام اعلانات رابط DatabaseOptions را در یک واحد ادغام می کند. از نظر کامپایلر TypeScript ، DatabaseOptions در حال حاضر:
interface DatabaseOptions {
host: string;
port: number;
user: string;
password: string;
dsnUrl: string;
}رابط شامل تمام زمینه هایی است که ابتدا اعلام کرده اید ، به علاوه فیلد جدید dsnUrl که به طور جداگانه اعلام کرده اید. هر دو اعلامیه ادغام شده اند.
افزایش ماژول
ادغام بیانیه زمانی مفید است که نیاز به افزایش ماژول های موجود با ویژگی های جدید داشته باشید. یک مورد استفاده برای آن زمانی است که شما فیلدهای بیشتری را به ساختار داده ارائه شده توسط یک کتابخانه اضافه می کنید. این نسبتاً با کتابخانه Node.js به نام express رایج است ، که به شما امکان می دهد سرورهای HTTP ایجاد کنید.
هنگام کار با اکسپرس ، یک درخواست و یک شیء پاسخ به کنترل کننده های درخواست شما ارسال می شود (توابع مسئول ارائه پاسخ به درخواست HTTP). شیء درخواست معمولاً برای ذخیره داده های خاص یک درخواست خاص استفاده می شود. به عنوان مثال ، می توانید از آن برای ذخیره کاربر ثبت شده که درخواست اولیه HTTP کرده است استفاده کنید:
const myRoute = (req: Request, res: Response) => {
res.json({ user: req.user });
}در اینجا ، کنترل کننده درخواست json را با کلاینت کاربر روی کاربر ثبت شده به مشتری ارسال می کند. کاربر ثبت شده در مکان دیگری از کد به شی درخواست اضافه می شود ، با استفاده از یک واسطه سریع مسئول احراز هویت کاربر.
تعاریف نوع برای رابط درخواست بدون فیلد کاربر است ، بنابراین کد بالا خطای 2339 را نشان می دهد:
Property 'user' does not exist on type 'Request'. (2339)
برای رفع این مشکل ، باید یک ماژول برای بسته اکسپرس ایجاد کنید و از ادغام اعلان برای افزودن یک ویژگی جدید به رابط درخواست استفاده کنید.
اگر نوع شیء Request را در اعلان نوع express بررسی کنید ، متوجه می شوید که یک رابط اضافه شده در داخل یک فضای نام عمومی به نام Express است ، همانطور که در اسناد مخزن DefinitelyTyped نشان داده شده است:
declare global {
namespace Express {
// These open interfaces may be extended in an application-specific manner via declaration merging.
// See for example method-override.d.ts (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/method-override/index.d.ts)
interface Request {}
interface Response {}
interface Application {}
}
}برای استفاده از افزودن ماژول برای افزودن یک ویژگی جدید به رابط درخواست ، باید همان ساختار را در یک فایل اعلان نوع محلی تکرار کنید. به عنوان مثال ، تصور کنید که شما یک فایل با نام express.d.ts مانند فایل زیر ایجاد کرده اید و سپس آن را به گزینه انواع tsconfig.json خود اضافه کرده اید:
import 'express';
declare global {
namespace Express {
interface Request {
user: {
name: string;
}
}
}
}از دیدگاه کامپایلر TypeScript ، رابط درخواست دارای یک ویژگی کاربر است که نوع آنها روی یک شیء تنظیم شده است که دارای یک ویژگی واحد به نام name of type string است. این اتفاق می افتد زیرا همه اعلان ها برای یک رابط یکسان ادغام می شوند.
فرض کنید شما در حال ایجاد یک کتابخانه هستید و می خواهید به کاربران کتابخانه خود این امکان را بدهید که انواع ارائه شده توسط کتابخانه خود را افزایش دهند ، مانند آنچه در بالا با اکسپرس انجام دادید. در این حالت ، شما باید از اینترفیس های کتابخانه خود صادر کنید ، زیرا اظهارات نوع معمولی از افزایش ماژول پشتیبانی نمی کند.
نتیجه
در این آموزش ، شما چندین رابط TypeScript برای نشان دادن ساختارهای مختلف داده نوشته اید ، کشف کرده اید که چگونه می توانید از رابط های مختلف در کنار هم به عنوان بلوک های سازنده برای ایجاد انواع قدرتمند استفاده کنید و با تفاوت بین اعلانات نوع معمولی و رابط ها آشنا شده اید. اکنون می توانید شروع به نوشتن واسط برای ساختار داده ها در پایگاه کد خود کنید ، به این ترتیب می توانید کد ایمن و همچنین اسناد را داشته باشید.
برچسب‌ها:Interfaces, TypeScript, جاوا اسکریپت, خرید سرور, سرور مجازی, سرورلینوکس, کامپایلر TypeScript
