تایپ اسکریپت: رابط – انجمن DEV

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

این یک سری کامل از تایپ اسکریپت ها خواهد بود که در آن شما از موضوعات اساسی مانند رشته، بولی تا پیچیده تر مانند Type Aliases، enums، Interface، Generics و غیره یاد خواهید گرفت.

فهرست مطالب

رابط

یک اعلامیه رابط راه دیگری برای نامگذاری یک نوع شی است. شما می توانید آن را با استفاده از interface کلمه کلیدی:

interface User {
    name: string,
    age: number,
}

// ✅ CORRECT
let newUser : User = {name: "John", age: 28};
// ❌ ERROR: property 'age' is missing
let newUser : User = {name: "John"};
// ❌ ERROR: missing the following properties from type 'User': name, age 
let newUser : User = {};

همچنین می توانید استفاده کنید readonly و رویکرد اختیاری در interface:

interface User {
    readonly id: number     // readonly variable
    name: string,
    age: number,
    specialKey? : string,   // optional 
}

همچنین می توانید توابع را به interface، دو راه برای این کار وجود دارد:

// Method-1
interface User {
    getDiscount(coupon: string): number     
}

// For Both you need to call this like this:
const newUser: User = {
    getDiscount: (coupon: "KIJ298DD9J") => {
        return 10;
    }
}

// Method-2
interface User {
    getDiscount: (coupon: string) => number
}

// 👉 You see I have changed the 'coupon' to 'couponName'
// You don't need to match the name of the parameter here
// It will take care of it
const newUser: User = {
    getDiscount: (couponName: "KIJ298DD9J") => {
        return 10;
    }
}

که در روش 1 شما به سادگی می توانید از () برای گفتن عملکردی مانند این دارد: getDiscount(): number و string انواع برگشتی هستند و هیچ آرگومان نمی‌گیرد.

که در روش 2 ما از یک تابع فلش مانند استفاده می کنیم getDiscount: () => number.

رابط در مقابل نوع

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

بیایید با چند مثال آنها را متمایز کنیم:

افزودن فیلدهای جدید

که در interface شما می توانید فیلدهای جدیدی را به رابط موجود اضافه کنید، اما نمی توانید فیلدهای جدیدی را به نوع موجود اضافه کنید. خطا خواهد کرد.

رابط

interface User {
    id: string;    
    email: string;
}

interface User {
    name: string;
}

// Now you can add all the three values to the User interface
const user: User = {
    id: "2323232",
    email: "foo@email.com",
    name: "Foo";
}

تایپ کنید

type User = {
    id: string;
}

type User = {
    email: string;
}

// ❌ ERROR: Duplicate identifier "User"

که در interface می توانید فیلدهای جدید اضافه کنید و آنها را هر طور که می خواهید تغییر دهید، اما در type شما نمی توانید این کار را انجام دهید یک بار در type ایجاد شده است، نمی توان آن را تغییر داد.

تمدید می شود

برای گسترش از قبل تعریف شده interface یا type هر دو رویکرد متفاوتی دارند. interface استفاده می کند extends کلمه کلیدی، در حالی که type از تقاطع استفاده می کند.

رابط

interface Car {
    model: string;
    color: string;
}

// 👇 You can extend an interface using 'extends' keywords
interface Tesla extends Car {
  autoPilotModelName: string;
};

// ✅ Use Case
const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

نوع

type Car = {
    model: string;
    color: string;
}
// 👇 In type you need to use Intersection
type Tesla = Car & {
  autoPilotModelName: string;
};

const newCar: Tesla = {
    model: "S",
    color: "red",
    autoPilotModelName: "xyz"
}

اتحاد. اتصال

که در interface شما نمی توانید یک نوع اتحادیه ایجاد کنید، اما اگر از آن استفاده می کنید می توانید این کار را انجام دهید type. بیایید مثالی بزنیم:

رابط

interface User  {
    email: string;
}

interface Admin  {
    email: string;
    adminKey: string;
}

// ❌ ERROR: '{' expected.
interface Person = User | Admin;

// ✅ CORRECT: you can create union type like this
type Person = User | Admin;

// ✅ CORRECT: However you can use union type inside the interface
interface Person {
    person: User | Admin;
}

نوع

type User = {
    email: string;
}

type Admin = {
    email: string;
    adminKey: string;
}

// ✅ You can do that.
type Person = User | Admin;

در مثال بالا، ممکن است متوجه شده باشید که زمانی که من سعی کردم یک نوع اتحادیه به اینترفیس اختصاص دهم (interface Person = User | Admin)، خطا داد. به این دلیل است که نمی توانید چیزی را به آن اختصاص دهید interface. نحو کاهش سرعت آن مشابه است class. اما هر دو سبک کاری متفاوتی دارند.

class MyClass {}

interface Hello {}

بسته شدن

در این مقاله توضیح داده ام که چیست interface است و نحوه استفاده از آن، همراه با تفاوت بین type و interface. این مقاله به شما درک اساسی از رابط را می دهد.

این مجموعه ای از درس های Typescript است که به شما کمک می کند تایپ اسکریپ را از ابتدا یاد بگیرید. اگر از این مقاله لذت بردید، فراموش نکنید که برای استفاده بعدی، ❤️ و نشانک 🏷️را بدهید و اگر سوال یا بازخوردی دارید، در نظرات زیر دریغ نکنید. در قسمت بعدی می بینمت

با من ارتباط برقرار کن