TypeScript indeks signaturalari

TypeScript-da indeks imzolarini tushunish

TypeScript-dagi indeks imzolari tur xavfsizligini ta’minlashda dinamik xususiyat nomlari bo‘lgan obyektlar turlarini aniqlashning kuchli usulini ta’minlaydi.

Ular qavs belgisi ( obj[key] ) orqali kirish mumkin bo‘lgan qiymat turlarini belgilash imkonini beradi, hattoki aniq xususiyat nomlari oldindan ma’lum bo‘lmasa ham.

Asosiy tushunchalar

Dynamic Property Access : Ixtiyoriy xususiyat nomlari bo‘lgan obyektlarni boshqarish
Type Safety : Dinamik xususiyatlar bo‘yicha izchil qiymat turlarini ta’minlang
Flexible Data Structures : Model lug‘atlar, Map’lar va boshqa dinamik ma’lumotlar
Runtime Safety : Kompilyatsiya vaqtida turga bog‘liq xatolarni aniqlang

Asosiy indeks imzolari

String indeks imzolari

TypeScript-dagi indeks imzolari sizga xususiyat nomlarini oldindan bilmagan, lekin qiymatlar shaklini biladigan obyektlar turlarini aniqlash imkonini beradi.

Indeks imzosi obj[key] kabi indeks orqali kiriladigan xususiyatlar turlarini belgilaydi.

Misol

// This interface represents an object with string keys and string values
interface StringDictionary {
  [key: string]: string;
}

// Creating a compliant object
const names: StringDictionary = {
  firstName: "Alice",
  lastName: "Smith",
  "100": "One Hundred"
};

// Accessing properties
console.log(names["firstName"]); // "Alice"
console.log(names["lastName"]); // "Smith"
console.log(names["100"]); // "One Hundred"

// Adding new properties dynamically
names["age"] = "30";

// This would cause an error
// names["age"] = 30; // Error: Type 'number' is not assignable to type 'string'

O‘zingiz sinab ko‘ring »

Indeks signaturasi sintaksisi ruxsat etilgan xususiyat nomlari (yoki kalitlari) tiplarini tavsiflash uchun [key: type] qavslaridan foydalanadi, undan keyin esa bu xususiyatlar qabul qilishi mumkin bo‘lgan qiymatlar tipi keladi.

Raqamlar indeksi imzolari

TypeScript ham string, ham raqamli indeks imzolarini qo‘llab-quvvatlaydi:

Misol

// Object with number indexes
interface NumberDictionary {
  [index: number]: any;
}

const scores: NumberDictionary = {
  0: "Zero",
  1: 100,
  2: true
};

console.log(scores[0]); // "Zero"
console.log(scores[1]); // 100
console.log(scores[2]); // true

// Adding a complex object
scores[3] = { passed: true };

O‘zingiz sinab ko‘ring »

Eslatma: JavaScript-da barcha obyekt kalitlari stringlar, hatto sonli kalitlar sifatida saqlanadi.

Biroq, TypeScript massivlar va obyektlardan foydalanishda mantiqiy xatolarni aniqlashga yordam berish uchun farq qiladi.

Kengaytirilgan indeks imzo naqshlari

Aralash xususiyat turlari

Siz indeks imzolarini aniq xususiyat deklaratsiyasi bilan birlashtirishingiz mumkin:

Misol

interface UserInfo {
  name: string; // Required property with specific name
  age: number;  // Required property with specific name
  [key: string]: string | number; // All other properties must be string or number
}

const user: UserInfo = {
  name: "Alice", // Required
  age: 30,      // Required
  address: "123 Main St", // Optional
  zipCode: 12345 // Optional
};

// This would cause an error
// const invalidUser: UserInfo = {
//  name: "Bob",
//  age: "thirty", // Error: Type 'string' is not assignable to type 'number'
//  isAdmin: true  // Error: Type 'boolean' is not assignable to type 'string | number'
// };

O‘zingiz sinab ko‘ring »

Important: Aniq xususiyatlarni indeks imzosi bilan birlashtirganda, aniq xususiyatlar turlari indeks imzosining qiymat turiga tayinlanishi kerak.

Faqat o‘qiladigan indeks imzolari

Yaratilgandan keyin o‘zgartirishni oldini olish uchun indeks imzolarini faqat o‘qish uchun qilishingiz mumkin:

Misol

interface ReadOnlyStringArray {
readonly [index: number]: string;
}

const names: ReadOnlyStringArray = ["Alice", "Bob", "Charlie"];

console.log(names[0]); // "Alice"

// This would cause an error
// names[0] = "Andrew"; // Error: Index signature in type 'ReadOnlyStringArray' only permits reading

O‘zingiz sinab ko‘ring »

Kalitlar to‘plamini cheklash va shakllarni o‘zgartirish uchun Mapped Types ga qarang.

Haqiqiy dunyo misollari

API javobini boshqarish

Misol

// Type for API responses with dynamic keys
interface ApiResponse<T> {
  data: {
    [resourceType: string]: T[];  // e.g., { "users": User[], "posts": Post[] }
  };
  meta: {
    page: number;
    total: number;
    [key: string]: any;  // Allow additional metadata
  };
}

// Example usage with a users API
interface User {
  id: number;
  name: string;
  email: string;
}

// Mock API response
const apiResponse: ApiResponse<User> = {
  data: {
    users: [
      { id: 1, name: "Alice", email: "alice@example.com" },
      { id: 2, name: "Bob", email: "bob@example.com" }
    ]
  },
  meta: {
    page: 1,
    total: 2,
    timestamp: "2023-01-01T00:00:00Z"
  }
};

// Accessing the data
const users = apiResponse.data.users;
console.log(users[0].name);  // "Alice"

O‘zingiz sinab ko‘ring »

Eng yaxshi amaliyotlar

Qilish va qilmaslik

Qilish:

Dinamik kalitlarga ega setlar uchun indeks imzolaridan foydalaning
Ma’lum maydonlar uchun aniq xususiyatlar bilan birlashtiring
Keep value types specific (avoid any)
Mutatsiya kerak bo‘lmaganda readonly dan foydalaning

Qilmang:

Kalitlar ma’lum bo‘lsa, sobit interfeyslarni afzal ko‘ring
Barcha xususiyatlar indeks imzosi turiga mos kelishi kerakligini unutmang
Xaritalangan turlarni qayta kashf eting - o‘zgartirishlar uchun maxsus sahifadan foydalaning

Umumiy tuzoqlar

Xususiyat nomi ziddiyatlari

interface ConflictingTypes {
  [key: string]: number;
  name: string; // Error: not assignable to string index type 'number'
}

interface FixedTypes {
  [key: string]: number | string;
  name: string; // OK
  age: number;   // OK
}

Indeks imzolari va yozuvlar

Moslashuvchan/dinamik kalitlar va boshqa xususiyatlar bilan aralashtirishda indeks imzosidan foydalaning.

Qisqacha oddiy xaritalash uchun Record<K, T> dan foydalaning.

// Index signature
interface StringMap {
[key: string]: string;
}

// Record
type StringRecord = Record<string, string>;

Xulosa

Kalitlar dinamik, lekin qiymat shakllari mos bo‘lsa, indeks imzolaridan foydalaning.

Iloji bo‘lsa, aniq xususiyatlar bilan birlashtiring va kengaytirilgan o‘zgarishlar uchun Mapped Types va Utility Types ga qarang.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish