TypeScript kengaytirilgan tiplar

Kengaytirilgan TypeScript turlari

TypeScript-ning ilg‘or tip tizimi murakkab turdagi munosabatlarni aniqlik bilan modellashtirish imkonini beradi.

Bu xususiyatlar, ayniqsa, mukammal turdagi xavfsizlikka ega mustahkam, parvarish qilinadigan ilovalarni yaratish uchun foydalidir.

Kengaytirilgan turdagi asosiy xususiyatlar

Mapped Types : Mavjud turlarning xususiyatlarini o‘zgartirish
Conditional Types : Shartlar asosida turlarni yarating
Template Literal Types : String shablonlari yordamida turlarni yarating
Utility Types : Umumiy o‘zgarishlar uchun o‘rnatilgan yordamchilar
Recursive Types : Daraxtga o‘xshash tuzilmalar uchun o‘z-o‘zidan mos yozuvlar turlari
Type Guards & Type Predicates : Ish vaqti turini tekshirish
Type Inference : Kengaytirilgan naqsh infer bilan mos keladi

Xaritalangan turlar

Xaritalangan turlar mavjud turlarning xususiyatlarini o‘zgartirish orqali yangi turlarni yaratishga imkon beradi.

Asosiy xaritalangan tur

Bitta shablon yordamida obyekt turining har bir xususiyatini yangi turga aylantiring.

Misol

// Convert all properties to boolean
type Flags<T> = {
  [K in keyof T]: boolean;
};

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

type UserFlags = Flags<User>;
// Equivalent to:
// {
//   id: boolean;
//   name: boolean;
//   email: boolean;
// }

O‘zingiz sinab ko‘ring »

Xaritalangan turdagi o‘zgartiruvchilar

Barcha kalitlarga readonly va ? kabi xususiyat modifikatorlarini qo‘shing yoki olib tashlang.

Misol

// Make all properties optional
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type OptionalTodo = {
  [K in keyof Todo]?: Todo[K];
};

// Remove 'readonly' and '?' modifiers
type Concrete<T> = {
  -readonly [K in keyof T]-?: T[K];
};

// Add 'readonly' and 'required' to all properties
type ReadonlyRequired<T> = {
  +readonly [K in keyof T]-?: T[K];
};

O‘zingiz sinab ko‘ring »

Kalitni qayta ko‘rib chiqish

as , string yordamchilari va shartli tekshiruvlar yordamida xaritalashda kalitlar nomini o‘zgartiring yoki filtrlang.

Misol

// Add prefix to all property names
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// {
//   getId: () => number;
//   getName: () => string;
//   getEmail: () => string;
// }

// Filter out properties
type MethodsOnly<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

O‘zingiz sinab ko‘ring »

Shartli turlar

Shartli turlar shartga bog‘liq turlarni aniqlash imkonini beradi.

Asosiy shartli turlar

Tur darajasida tekshirilgan shart asosida turlar orasidan tanlang.

Misol

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;    // true
type B = IsString<number>;    // false
type C = IsString<'hello'>;    // true
type D = IsString<string | number>; // boolean

// Extract array element type
type ArrayElement<T> = T extends (infer U)[] ? U : never;
type Numbers = ArrayElement<number[]>; // number

O‘zingiz sinab ko‘ring »

Kalit so‘zni xulosa qilish

infer bilan yangi turdagi o‘zgaruvchini kiritish orqali shartli tur ichida turning bir qismini yozib oling.

Misol

// Get return type of a function
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

// Get parameter types as a tuple
type Parameters<T> = T extends (...args: infer P) => any ? P : never;

// Get constructor parameter types
type ConstructorParameters<T extends new (...args: any) => any> =
T extends new (...args: infer P) => any ? P : never;

// Get instance type from a constructor
type InstanceType<T extends new (...args: any) => any> =
T extends new (...args: any) => infer R ? R : any;

O‘zingiz sinab ko‘ring »

Tarqalgan shartli turlar

Tarqatishning oldini olish uchun shartlar birlashmalarga qanday taqsimlanishini va ular qachon o‘ralganligini tushuning.

Misol

// Without distribution
type ToArrayNonDist<T> = T extends any ? T[] : never;
type StrOrNumArr = ToArrayNonDist<string | number>; // (string | number)[]

// With distribution
type ToArray<T> = [T] extends [any] ? T[] : never;
type StrOrNumArr2 = ToArray<string | number>; // string[] | number[]

// Filter out non-string types
type FilterStrings<T> = T extends string ? T : never;
type Letters = FilterStrings<'a' | 'b' | 1 | 2 | 'c'>; // 'a' | 'b' | 'c'

O‘zingiz sinab ko‘ring »

Shablon literal turlari

Shablon literal turlari shablon literal sintaksisidan foydalanib turlarni yaratishga imkon beradi.

Shablonning asosiy harf turlari

Shablon literallari va birlashmalaridan foydalangan holda stringlarni muayyan naqshlar bilan cheklang.

Misol

type Greeting = `Hello, ${string}`;

const validGreeting: Greeting = 'Hello, World!';
const invalidGreeting: Greeting = 'Hi there!'; // Error

// With unions
type Color = 'red' | 'green' | 'blue';
type Size = 'small' | 'medium' | 'large';

type Style = `${Color}-${Size}`;
// 'red-small' | 'red-medium' | 'red-large' |
// 'green-small' | 'green-medium' | 'green-large' |
// 'blue-small' | 'blue-medium' | 'blue-large'

O‘zingiz sinab ko‘ring »

String manipulyatsiyasi turlari

String literal tiplarini o‘zgartirish uchun o‘rnatilgan yordamchilardan foydalaning (katta harflarga o‘tkazish, bosh harfni katta qilish va h.k.).

Misol

// Built-in string manipulation types
type T1 = Uppercase<'hello'>;  // 'HELLO'
type T2 = Lowercase<'WORLD'>;  // 'world'
type T3 = Capitalize<'typescript'>;  // 'Typescript'
type T4 = Uncapitalize<'TypeScript'>;  // 'typeScript'

// Create an event handler type
type EventType = 'click' | 'change' | 'keydown';
type EventHandler = `on${Capitalize<EventType>}`;
// 'onClick' | 'onChange' | 'onKeydown'

O‘zingiz sinab ko‘ring »

Kengaytirilgan naqshlar

Metama’lumotlarni ajratib olish va API yaratish uchun xulosalar va kalitlarni o‘zgartirish bilan shablonlarni yarating.

Misol

// Extract route parameters
type ExtractRouteParams<T> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof ExtractRouteParams<`${Rest}`>]: string }
    : T extends `${string}:${infer Param}`
    ? { [K in Param]: string }
    : {};

type Params = ExtractRouteParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string; }

// Create a type-safe event emitter
type EventMap = {
  click: { x: number; y: number };
  change: string;
  keydown: { key: string; code: number };
};

type EventHandlers = {
  [K in keyof EventMap as `on${Capitalize<K>}`]: (event: EventMap[K]) => void;
};

O‘zingiz sinab ko‘ring »

Utilit turlari

TypeScript umumiy turdagi transformatsiyalar uchun bir nechta o‘rnatilgan yordamchi dasturlarni taqdim etadi.

Umumiy yordamchi dasturlar turlari

Umumiy o‘zgartirishlar uchun Partial , Pick va Omit kabi o‘rnatilgan qurilmalardan foydalaning.

Misol

// Basic types
interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

// Make all properties optional
type PartialUser = Partial<User>;

// make all properties required
type RequiredUser = Required<PartialUser>;

// make all properties read-only
type ReadonlyUser = Readonly<User>;

// pick specific properties
type UserPreview = Pick<User, 'id' | 'name'>;

// omit specific properties
type UserWithoutEmail = Omit<User, 'email'>;

// extract property types
type UserId = User['id']; // number
type UserKeys = keyof User; // 'id' | 'name' | 'email' | 'createdAt'

O‘zingiz sinab ko‘ring »

Kengaytirilgan yordamchi dasturlar turlari

Birlashmalardan a’zolarni chiqarib tashlang yoki ajratib oling va moslashtirilgan xaritalangan yordamchilarni yarating.

Misol

// Create a type that excludes null and undefined
type NonNullable<T> = T extends null | undefined ? never : T;

// Exclude types from a union
type Numbers = 1 | 2 | 3 | 'a' | 'b';
type JustNumbers = Exclude<Numbers, string>; // 1 | 2 | 3

// Extract types from a union
type JustStrings = Extract<Numbers, string>; // 'a' | 'b'

// Get the type that is not in the second type
type A = { a: string; b: number; c: boolean };
type B = { a: string; b: number };
type C = Omit<A, keyof B>; // { c: boolean }

// Create a type with all properties as mutable
type Mutable<T> = {
-readonly [K in keyof T]: T[K];
};

O‘zingiz sinab ko‘ring »

Rekursiv turlari

Rekursiv turlari daraxtga o‘xshash ma’lumotlar tuzilmalarini modellashtirish uchun foydalidir, bu yerda tur o‘ziga murojaat qilishi mumkin.

Asosiy rekursiv turi

Daraxtlar va o‘rnatilgan JSON kabi o‘z-o‘ziga havola qiluvchi tuzilmalarni modellashtiring.

Misol

// Simple binary tree
type BinaryTree<T> = {
  value: T;
  left?: BinaryTree<T>;
  right?: BinaryTree<T>;
};

// JSON-like data structure
type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | { [key: string]: JSONValue };

// Nested comments
type Comment = {
  id: number;
  content: string;
  replies: Comment[];
  createdAt: Date;
};

O‘zingiz sinab ko‘ring »

Kengaytirilgan rekursiv turlari

Ekspress bog‘langan massivlar, kataloglar daraxtlari va rekursiv holat mashinalari.

Misol

// Type for a linked list
type LinkedList<T> = {
  value: T;
  next: LinkedList<T> | null;
};

// Type for a directory structure
type File = {
  type: 'file';
  name: string;
  size: number;
};

type Directory = {
  type: 'directory';
  name: string;
  children: (File | Directory)[];
};

// Type for a state machine
type State = {
  value: string;
  transitions: {
    [event: string]: State;
  };
};

// Type for a recursive function
type RecursiveFunction<T> = (x: T | RecursiveFunction<T>) => void;

O‘zingiz sinab ko‘ring »

Eng yaxshi amaliyotlar

Murakkab turlardan qachon foydalanish kerak

Obyekt turining bir nechta xususiyatlarini o‘zgartirish kerak bo‘lganda mapped types dan foydalaning
Turingiz boshqa turga bog‘liq bo‘lsa, conditional types dan foydalaning
Stringlar bilan ishlash va andoza bo‘yicha moslashtirish (pattern matching) uchun template literal typesdan foydalaning
Keng tarqalgan o‘zgartirishlar uchun utility tiplardan foydalaning (iloji boricha o‘rnatilganlarini tanlang)
Daraxtga o‘xshash yoki ichki o‘rnatilgan ma’lumotlar tuzilmalari uchun recursive types dan foydalaning

Ishlash bo‘yicha mulohazalar

Chuqur joylashtirilgan rekursiv turlar TypeScript kompilyatorini sekinlashtirishi mumkin
Juda katta union tiplar (100+ a’zo) unumdorlik muammolariga olib kelishi mumkin
Murakkab turlarni ajratish uchun turdagi taxalluslardan foydalaning

Umumiy tuzoqlar

Xulosa chiqarish masalalarini yozing

Shartli turlar birlashma turlari bo‘yicha taqsimlanadi, bu ajablanarli bo‘lishi mumkin
infer bilan turdagi xulosalar turli kontekstlarda turlicha ishlaydi
Ayrim yordamchi dasturlar any yoki unknown bilan yaxshi ishlamaydi

Saqlash qobiliyati

Murakkab turlardan ortiqcha foydalanish kodni tushunishni qiyinlashtirishi mumkin
Murakkab turdagi o‘zgarishlarni sharhlar bilan hujjatlang
Juda murakkab turlar uchun turdagi tasdiqlar yoki yordamchi funksiyalardan foydalanishni ko‘rib chiqing

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish