Typescript միջերեսը և տեսակը նման չեն

Դադարեցրեք ինտերֆեյսի օգտագործումը և սխալ մուտքագրեք

Ինտերֆեյսը ինչ-որ բանի հասանելիության մասին է

Ավտոմեքենա

Դուք մեքենա ունեք: Ավտոմեքենան բարդ է մեխանիզմ: Դուք պարզ օգտվող եք: Պետք չէ, որ դուք բոլորը իմանաք, դուք պետք է իմանաք, թե ինչպես օգտագործել փոխանցման տուփը, պտտել անիվը, սեղմել սկավառակը կամ ընդմիջումներ կատարել: Փոխանցման տուփ, անիվ, խախտում է մեքենայի միջերեսը:

Ինտերֆեյսը համալիրի պարզեցման մասին է

Խանութ և բանկ

Դուք գրում եք առցանց խանութ և պետք է ավելացնեք վճարումներ: Դուք չեք սկսի բանկ ստեղծել: Միլիարդ գործարքներով աղյուսակ չեք ստեղծի։ Դժվար է։ Դուք կօգտագործեք գրավոր համակարգեր մեկ եղանակով՝ վճարում: Բարդ համակարգ՝ հեշտ օգտագործվող ինտերֆեյսով: Վճարեք դրա ինտերֆեյսի մեթոդը:

Ինտերֆեյսը դա սահմանափակումների, օգտագործման կանոնների մասին է

Բանկի API

Երբ դուք օգտագործում եք վճարման մեթոդը, դուք պետք է իմանաք, թե ինչպես համակարգին ասեք, թե ինչ եք սպասելու կամ ինչ եք անելու: Համակարգը սպասում է լրացված կանխորոշված ​​տվյալների կառուցվածքներին: Բանկի հետ ձեր կապի պայմանագիր: Մեր բանկը սպասում է հաջորդ պայմանագրին.

interface Payment {
  amount: number;
  currencyId: number;
}

և հաջողությունից հետո կուղարկի հաջորդ պայմանագիրը

interface Transaction {
  id: string;
  direction: string; // in, out
  status: string; // success, waiting, error
}

Դուք չ կարիք չունեք իմանաք, թե ինչպես է այն աշխատում գլխարկի տակ, դուք պետք է իմանաք, թե ինչպես հաղորդակցվել ինտերֆեյսի (բանկի API) հետ:

Ինտերֆեյսը դա հաղորդակցման ձեռնարկի մասին է

Մենք ստեղծում ենք վճարման գործընթացը ձեռքով (API)

interface BankAPI {
  pay(Payment): Promise<Transaction>;
}

const monoBank: BankAPI = application.getBank();

const payment: Payment = {
  "amount": 1000,
  "currencyId": 840 // USD
}

const transaction: Transaction = await monoBank.pay(payment);
// do something with transaction

Մենք ոչինչ չգիտենք իրականացման մասին։ Մենք գիտենք միայն, թե ինչպես ստեղծել տվյալներ վճարման համար և ինչ պատասխան կարելի է ստանալ:

Ինտերֆեյս դրա հաղորդակցման համար

Բոլոր հաղորդակցությունները հավելվածի շերտերի միջև (ծառայություն, պահեստ, վերահսկիչ), համակարգի մասերի միջև (ձև և վերահսկիչ կամ դիտեք մոդել կամ ներկայացնող), համակարգերի միջև (API) — դրա ինտերֆեյսները:

interface User{
  showGoods():Good[];
}

interface Moderator {
  showUsers():User[];
  create(user:User):void;
}

interface Admin extends User, Moderator { // union
  deleteUser(user:User):void;
  deleteGood(user:User):void;
}

Մուտքագրեք տվյալների մանրամասնացման մասին

Մուտքագրեք տվյալների համակցման տեսակները՝ միավորում, բացառում, ջոկում և այլն

Մեր գործարքը կարող է նկարագրվել ըստ տեսակների

interface Transaction {
  id: string;
  direction: string; // in, out
  status: string; // success, waiting, error
}

type PaymentDirection = "in" | "out";
type PaymentStatus = "success" | "waiting" | "error";

interface TypedTransaction {
  id: string;
  direction: PaymentDirection;
  status: PaymentStatus;
}

Տեխնիկապես Transaction և TypedTransaction ունեն նույն կառուցվածքը (ինտերֆեյս)

Մուտքագրեք այն տվյալների մասին է, ոչ թե կառուցվածքի

// BAD
type Transaction = {
  id: string;
  direction: string; // in, out
  status: string; // success, waiting, error
}
// GOOD 
interface Transaction {
  id: string;
  direction: string;
  status: string;
}

Երբ դա ինչ-որ բանի տեսակ է

interface Dog {
  sit(): void;
}

interface Bird {
  fly(): void;
}

type Animal = Dog | Bird;

Մուտքագրեք այն ինտերֆեյսի աջակցության մասին է

interface Form<Fields> {
  setFieldValue(fieldName: keyof Fields, value: any): void;
  setFieldError(fieldName: keyof Fields, error: string): void;
}

interface Payment {
  amount: number;
  currencyId: number;
}

const createPaymentForm: Form<Payment> = application.getPaymentForm();
createPaymentForm.setFieldValue('amount', 12); // CORRECT
createPaymentForm.setFieldValue('balance', 12); // WRONG TYPE
// because `balance` is not field of Payment 
interface Admin {
  delete(user:User):void;
  create(user:User):void;
  showList():User[];
}

type User = Pick<Admin, "showList">; // its keep part of data structure
// you can use it as type or as interface

Նախընտրեք օգտագործել միջերեսը: Երբ դուք չեք կարող խնդիր լուծել ինտերֆեյսի միջոցով, օգտագործեք տեսակը

Եզրակացություն

Օգտագործեք INTERFACE՝

- նկարագրել տվյալների կառուցվածքը (DTO, պարամետրեր, ձևեր, React բաղադրիչի հենարաններ)
- նկարագրել վարքագիծը (հանրային մեթոդներ)

Օգտագործեք TYPE՝

- սահմանել տիպի պրիմիտիվներ
- սահմանել բարդ տիպեր — պայմանական, միավորում, բացառում, հավաքում և տվյալների տեսակների այլ համակցություններ

Շնորհակալություն կարդալու համար։ Մտածեք միջերեսների առումով: