TypeScript tipni avtomatik aniqlash

TypeScript-da turdagi xulosani tushunish

Tur xulosasi - TypeScript-ning aniq turdagi izohlarni talab qilmasdan, ularning ishlatilishi va kontekstiga asoslangan holda o‘zgaruvchilar, funksiya qaytishlari va ifodalarga avtomatik ravishda turlarni aniqlash va belgilash qobiliyatidir.

Bu kuchli xususiyat turi xavfsizligini ta’minlagan holda batafsil ma’lumotni kamaytiradi.

Asosiy tushunchalar

Type inference : Belgilangan qiymatlardan turdagi avtomatik aniqlash
Contextual typing : Atrofdagi kontekstdan olingan turlar
Best common type : Mos turni topish algoritmi
Widening/Narrowing : Turlar kengayadi yoki foydalanish bilan cheklanadi
Qachon sodir bo‘ladi : o‘zgaruvchini initsializatsiya qilishda, return qiymatlarida, standart parametrlarda, callback-larda, literallarda

Misol

// TypeScript infers these variable types
let name = "Alice"; // inferred as string
let age = 30; // inferred as number
let isActive = true; // inferred as boolean
let numbers = [1, 2, 3]; // inferred as number[]
let mixed = [1, "two", true]; // inferred as (string | number | boolean)[]

// Using the inferred types
name.toUpperCase(); // Works because name is inferred as string
age.toFixed(2); // Works because age is inferred as number
// name.toFixed(2); // Error: Property 'toFixed' does not exist on type 'string'

O‘zingiz sinab ko‘ring »

Funksiyani qaytarish turi xulosasi

TypeScript funksiyaning qaytish iboralari asosida qaytariladigan turini xulosa qilishi mumkin:

Misol

// Return type is inferred as string
function greet(name: string) {
  return `Hello, ${name}!`;
}

// Return type is inferred as number
function add(a: number, b: number) {
  return a + b;
}

// Return type is inferred as string | number
function getValue(key: string) {
   if (key === "name") {
    return "Alice";
   } else {
    return 42;
   }
}
// Using the inferred return types
let greeting = greet("Bob"); // inferred as string
let sum = add(5, 3); // inferred as number
let value = getValue("age"); // inferred as string | number

O‘zingiz sinab ko‘ring »

Kontekstli yozish

TypeScript iboralar yuzaga keladigan kontekstga qarab turlarni chiqarishi mumkin:

Misol

// The type of the callback parameter is inferred from the array method context
const names = ["Alice", "Bob", "Charlie"];

// Parameter 'name' is inferred as string
names.forEach(name => {
  console.log(name.toUpperCase());
});

// Parameter 'name' is inferred as string, and the return type is inferred as number
const nameLengths = names.map(name => {
  return name.length;
});

// nameLengths is inferred as number[]

// Parameter types in event handlers are also inferred
document.addEventListener("click", event => {
  // 'event' is inferred as MouseEvent
  console.log(event.clientX, event.clientY);
});

O‘zingiz sinab ko‘ring »

Obyekt harflarida xulosa yozing

Obyekt literallari bilan ishlaganda, TypeScript xususiyatlar turlarini aniqlaydi:

Misol

// TypeScript infers the type of this object
const user = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  active: true,
  details: {
    age: 30,
    address: {
      city: "New York",
      country: "USA"
    }
  }
};

// Accessing inferred properties
console.log(user.name.toUpperCase());
console.log(user.details.age.toFixed(0));
console.log(user.details.address.city.toLowerCase());

// Type errors would be caught
// console.log(user.age); // Error: Property 'age' does not exist on type '...'
// console.log(user.details.name); // Error: Property 'name' does not exist on type '...'
// console.log(user.details.address.zip); // Error: Property 'zip' does not exist on type '...'

O‘zingiz sinab ko‘ring »

Kengaytirilgan naqshlar

Const assertion’lar

Misol

// Regular type inference (widens to string)
let name = "Alice";  // type: string

// Const assertion (narrows to literal type)
const nameConst = "Alice" as const;  // type: "Alice"

// With objects
const user = {
  id: 1,
  name: "Alice",
  roles: ["admin", "user"] as const  // readonly tuple
} as const;

// user.name = "Bob";  // Error: Cannot assign to 'name' because it is a read-only property

O‘zingiz sinab ko‘ring »

Qo‘riqchilar turi va oqim tahlili

Misol

O‘zingiz sinab ko‘ring »

Eng yaxshi amaliyotlar

TypeScript-ning turdagi xulosasi bilan ishlash uchun ba’zi eng yaxshi amaliyotlar:

Misol

// 1. Let TypeScript infer simple types
let message = "Hello"; // Good: no need for explicit type here

// 2. Provide explicit types for function parameters
function formatName(firstName: string, lastName: string) {
  return `${firstName} ${lastName}`;
}

// 3. Consider adding return type annotations for complex functions
function processData(input: string[]): { count: number; items: string[] } {
  return {
    count: input.length,
    items: input.map(item => item.trim())
  };
}

// 4. Use explicit type annotations for empty arrays or objects
const emptyArray: string[] = []; // Without annotation, inferred as any[]
const configOptions: Record<string, unknown> = {}; // Without annotation, inferred as {}

// 5. Use type assertions when TypeScript cannot infer correctly
const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;

O‘zingiz sinab ko‘ring »

Aniq turlardan qachon foydalanish kerak

Turi haqida xulosa chiqarish kuchli bo‘lsa-da, aniq turdagi izohlar tavsiya etiladigan holatlar mavjud:

Aniq turlar uchun tavsiya etiladi

Public API Contracts : Kutubxona kodidagi funksiya parametrlari va qaytish turlari
Complex Types : Xulosa qilingan tur juda keng yoki murakkab bo‘lsa
Documentation : Kodni o‘z-o‘zidan hujjatlashtirish uchun
Type Safety : Muayyan cheklovlarni qo‘llash kerak bo‘lganda
Empty Collections : Bo‘sh massivlar yoki keyinroq to‘ldiriladigan obyektlar

Ishlash bo‘yicha mulohazalar

Misol

// Good: Explicit type for complex return values
function processData(input: string[]): { results: string[]; count: number } {
  return {
    results: input.map(processItem),
    count: input.length
  };
}

// Good: Explicit type for empty arrays
const items: Array<{ id: number; name: string }> = [];

// Good: Explicit type for configuration objects
const config: {
  apiUrl: string;
  retries: number;
  timeout: number;
} = {
  apiUrl: "https://api.example.com",
  retries: 3,
  timeout: 5000
};

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish