İnterfeyslər və tip ləqəbləri — TypeScript

Bu dərsdə öyrənəcəksən

Obyektin quruluşunu interface və type ilə təsvir etmək
Qeyri-məcburi (?) və yalnız oxunan (readonly) xassələrdən istifadə etmək
İnterfeysi extends ilə genişləndirmək
interface ilə type arasındakı fərqi və struktur tipləşdirməni izah etmək

Məktəbin elektron jurnalında şagird obyekti onlarla funksiyadan keçir: siyahıya əlavə olunur, qiymətləri hesablanır, ekrana çıxarılır. Hər dəfə eyni sual yaranır: bu obyektdə hansı xassələr var? grade, yoxsa class? email həmişə olur? TypeScript-də obyektin quruluşunu bir dəfə təsvir edirsən, sonra bu təsviri hər yerdə istifadə edirsən — kompilyator isə ona əməl olunmasına nəzarət edir.

Obyektin quruluşunu təsvir etmək

Tərif

İnterfeys

Obyektin hansı xassələrə və hansı tiplərə malik olmalı olduğunu təsvir edən adlı tip. interface açar sözü ilə elan olunur və heç bir JavaScript kodu yaratmır — yalnız yoxlama üçündür.

TypeScript

interface Student {
  readonly id: number;
  name: string;
  grade: number;
  email?: string;
}

const aysel: Student = { id: 1, name: 'Aysel', grade: 9 };
const murad: Student = { id: 2, name: 'Murad', grade: 10, email: 'murad@example.com' };

function describe(s: Student): string {
  const contact = s.email ?? 'no email';
  return `#${s.id} ${s.name}, grade ${s.grade} (${contact})`;
}

console.log(describe(aysel));
console.log(describe(murad));

Gözlənilən nəticə

#1 Aysel, grade 9 (no email)
#2 Murad, grade 10 (murad@example.com)

email?: string — qeyri-məcburi xassə: obyektdə olmaya da bilər, oxuyanda isə tipi string | undefined-dır. Ona görə ?? ilə ehtiyat qiymət verdik.
readonly id: number — yalnız oxunan xassə: obyekt yaradılanda verilir, sonra onu dəyişmək olmaz.
Xassələr nöqtəli vergül və ya vergüllə ayrılır; xassələrin sırası əhəmiyyət daşımır.

İndi müqaviləni pozmağa çalışaq: xassəni unudaq, artıq xassə əlavə edək və readonly sahəni dəyişək.

TypeScript

interface Student {
  readonly id: number;
  name: string;
  grade: number;
}

const leyla: Student = { id: 3, name: 'Leyla' };
const elvin: Student = { id: 4, name: 'Elvin', grade: 8, age: 14 };
elvin.id = 5;

Text

students.ts:7:7 - error TS2741: Property 'grade' is missing in type '{ id: number; name: string; }' but required in type 'Student'.

7 const leyla: Student = { id: 3, name: 'Leyla' };
        ~~~~~

  students.ts:4:3
    4   grade: number;
        ~~~~~
    'grade' is declared here.

students.ts:8:58 - error TS2353: Object literal may only specify known properties, and 'age' does not exist in type 'Student'.

8 const elvin: Student = { id: 4, name: 'Elvin', grade: 8, age: 14 };
                                                           ~~~

students.ts:9:7 - error TS2540: Cannot assign to 'id' because it is a read-only property.

9 elvin.id = 5;
        ~~

Üç səhv, üç fərqli kod: çatışmayan xassə (TS2741), artıq xassə (TS2353) və readonly sahəyə mənimsətmə (TS2540).

Genişləndirmə və tip ləqəbləri

İnterfeys başqa interfeysi extends ilə genişləndirə bilər — siniflərdəki varislik kimi: Teacher Person-un bütün xassələrini alır və öz xassəsini əlavə edir. Tip ləqəbi (type alias) isə type açar sözü ilə istənilən tipə ad verir: obyektə, birləşməyə, kortejə, hətta primitiv tipə.

TypeScript

interface Person {
  name: string;
}

interface Teacher extends Person {
  subject: string;
}

type Point = { x: number; y: number };
type ID = number | string;

const teacher: Teacher = { name: 'Elvin', subject: 'Physics' };
const start: Point = { x: 0, y: 0 };
const code: ID = 'A-17';

console.log(`${teacher.name} teaches ${teacher.subject}`);
console.log(start, code);

Gözlənilən nəticə

Elvin teaches Physics
{ x: 0, y: 0 } A-17

ID ya ədəd, ya da sətir ola bilər — belə birləşmələri növbəti dərsdə ətraflı öyrənəcəyik.

interface, yoxsa type?

İmkan	interface	type
Obyektin quruluşunu təsvir etmək	✓	✓
Genişləndirmək	`extends`	`&` (kəsişmə)
Birləşmə, kortej, primitivə ad vermək	✗	✓
Eyni adla təkrar elan edib birləşdirmək	✓	✗

Eyni adlı iki interface avtomatik birləşir (declaration merging); iki eyni adlı type isə səhvdir.

Struktur tipləşdirmə

TypeScript tipləri adına görə yox, quruluşuna görə müqayisə edir. Obyektdə tələb olunan xassələr varsa, o, tipə uyğundur — hansı adla yaradılmasından asılı olmayaraq. Artıq xassə səhvi (TS2353) yalnız obyekt birbaşa literal kimi yazılanda verilir, çünki orada artıq xassə çox güman ki, hərf səhvidir.

TypeScript

interface Named {
  name: string;
}

function hello(thing: Named): string {
  return `Hello, ${thing.name}!`;
}

const dog = { name: 'Rex', legs: 4 };
console.log(hello(dog));
console.log(hello({ name: 'Baku' }));

Gözlənilən nəticə

Hello, Rex!
Hello, Baku!

dog heç vaxt Named kimi elan olunmayıb və artıq legs xassəsi var, amma name olduğu üçün uyğundur.

Əsas fikirlər

interface və type obyektin hansı xassələrə və tiplərə malik olduğunu təsvir edir; JavaScript kodu yaratmırlar.
prop?: T qeyri-məcburi xassədir, readonly prop: T isə yaradılandan sonra dəyişdirilə bilməz.
İnterfeys extends ilə genişlənir; type isə istənilən tipə, o cümlədən birləşməyə ad verə bilər.
Kompilyator çatışmayan (TS2741) və literalda artıq (TS2353) xassələri tutur.
TypeScript struktur tipləşdirmədən istifadə edir: quruluş uyğundursa, ad əhəmiyyət daşımır.

Özünü yoxla

10 sual. Hər düzgün cavab XP qazandırır.

1 / 10

İnterfeysdə email?: string yazılışı nə deməkdir?