TypeScriptni React bilan birgalikda ishlatish dastur kodini yanada xavfsiz va aniq qiladi, chunki TypeScriptning kuchli tiplash (static typing) imkoniyatlari bilan React komponentlarining strukturasini, xususiyatlarini va holatini oldindan belgilab olish mumkin. Quyida TypeScriptni Reactda qanday ishlatish va uning asosiy aspektlari haqida batafsil tanishamiz.
1. Yangi React TypeScript loyihasini yaratish
TypeScript bilan React loyihasini yaratish uchun create-react-app vositasidan foydalanishingiz mumkin:
npx create-react-app my-app --template typescript
Bu buyruq TypeScript asosida yangi React loyihasini yaratadi va kerakli barcha TypeScript konfiguratsiyalarini (masalan, tsconfig.json fayli) o’rnatadi.
2. React komponentlarini yozish
Reactda komponentlar odatda funksiya yoki klass sifatida yaratiladi. TypeScriptda komponentlarning propslarini (xususiyatlarini) va state (holat) turlarini belgilash muhim.
2.1. Funksional komponentlar
Funksional komponentlar TypeScriptda juda oddiy va keng tarqalgan usul hisoblanadi. propslar uchun interfeys yaratish orqali ularning turlarini aniq belgilash mumkin:
import React from "react";
// Props uchun interfeys yaratish
interface GreetingProps {
name: string;
age?: number; // Majburiy emas (optional) bo'lgan props
}
// Funksional komponentni yaratish
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
{age && <p>You are {age} years old.</p>}
</div>
);
};
export default Greeting;
Bu yerda GreetingProps interfeysi name va age xususiyatlari uchun turlarni belgilaydi. React.FC<GreetingProps> yozuvi funksional komponentni propslar bilan tiplash uchun ishlatiladi.
2.2. Klass komponentlari
Klass komponentlarida ham propslar va state turlarini belgilash mumkin:
import React, { Component } from "react";
// Props va State uchun interfeys yaratish
interface CounterProps {
initialCount?: number;
}
interface CounterState {
count: number;
}
class Counter extends Component<CounterProps, CounterState> {
constructor(props: CounterProps) {
super(props);
this.state = {
count: props.initialCount || 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
Bu misolda CounterProps interfeysi propslar uchun, CounterState interfeysi esa state uchun turlarni belgilaydi. Klass Component<CounterProps, CounterState> shaklida tiplangan.
3. Xooklar bilan ishlash
React xooklari TypeScript bilan ishlatilganda ham juda qulay. Ayniqsa, useState, useEffect kabi xooklarda turlarni belgilash orqali xatolarni oldini olish mumkin.
3.1. useState bilan ishlash
useState xookini TypeScriptda ishlatishda dastlabki qiymat turiga asoslanib statening turi avtomatik ravishda aniqlanadi. Biroq, agar statening turi aniq bo’lishini xohlasangiz, uni ko’rsatishingiz mumkin:
import React, { useState } from "react";
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
Bu misolda useState<number> bilan countning turi aniq belgilangan.
3.2. useEffect bilan ishlash
useEffect xookida asinxron operatsiyalar yoki komponentning ma’lum holatiga qarab ishlovchi kod yoziladi:
import React, { useState, useEffect } from "react";
const DataFetcher: React.FC = () => {
const [data, setData] = useState<string[]>([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("https://api.example.com/data");
const result = await response.json();
setData(result);
};
fetchData();
}, []);
return (
<ul>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};
export default DataFetcher;
Bu misolda useState<string[]> yordamida dataning turi belgilangan, useEffect esa komponent yuklanganida ma’lumotlarni yuklaydi.
4. Interfeyslar va Turlar
TypeScriptda interfeyslar va turlar (interface va type) yordamida komponentlar orasidagi ma’lumotlarni aniq belgilash mumkin. Bu Reactdagi komponentlar o’rtasidagi ma’lumotlar almashinuvini xavfsiz qiladi.
4.1. Interfeyslar
Interfeyslar React komponentlari uchun props yoki statening tuzilishini aniqlash uchun ishlatiladi:
interface User {
id: number;
name: string;
email: string;
}
const UserProfile: React.FC<{ user: User }> = ({ user }) => {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
};
Bu yerda User interfeysi foydalanuvchi ma’lumotlari qanday bo’lishi kerakligini aniqlaydi va bu tur UserProfile komponentiga props sifatida qo’llaniladi.
4.2. Turlar
type kalit so’zi ham turlarni aniqlashda ishlatiladi va interfeyslarga o’xshash funksiyaga ega. Misol uchun:
type User = {
id: number;
name: string;
email: string;
};
type UserProfileProps = {
user: User;
};
const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
};
Bu misolda User turi va UserProfileProps turi aniqlangan va ular komponent uchun props sifatida ishlatilgan.
5. React Context va TypeScript
React Context API TypeScript bilan birgalikda ishlatilganda turlarning aniqligini saqlashga yordam beradi. Quyida Context API TypeScript bilan qanday ishlatilishi haqida misol keltirilgan:
import React, { createContext, useContext, useState } from "react";
// Kontekst uchun interfeys yaratish
interface AuthContextType {
user: string | null;
login: (user: string) => void;
logout: () => void;
}
// Dastlabki qiymatni aniqlash
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const AuthProvider: React.FC = ({ children }) => {
const [user, setUser] = useState<string | null>(null);
const login = (user: string) => setUser(user);
const logout = () => setUser(null);
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
// Context hooki
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
};
Bu misolda AuthContextType interfeysi AuthContextning strukturasi qanday bo’lishini aniqlaydi. useAuth custom hooki AuthContextni ishlatadi va context mavjud bo’lmagan holatlarda xatoni tashlaydi.
6. TypeScriptdagi Refs bilan ishlash
Reactda reflar yordamida DOM elementlariga yoki komponentlarga to’g’ridan-to’g’ri murojaat qilish mumkin. TypeScriptda reflar bilan ishlash uchun useRef xookida kerakli tur aniqlanishi kerak.
import React, { useRef } from "react";
const TextInputWithFocusButton: React.FC = () => {
const inputEl = useRef<HTMLInputElement>(null);
const onButtonClick = () => {
if (inputEl.current) {
inputEl.current.focus();
}
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
};
export default TextInputWithFocusButton;
Bu misolda useRef<HTMLInputElement> yordamida inputEl refi tipi aniq belgilangan, bu orqali TypeScript sizga ref bilan ishlaganda xatolardan saqlanishga yordam beradi.
Demak:
TypeScriptni React bilan ishlatish komponentlar, props, state, xooklar, va kontekst bilan aniq va xavfsiz ishlash imkonini beradi. Bu nafaqat kodni tartibli qiladi, balki xatolarni oldini olishda ham kotta yordam beradi.
Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo’lsa do’stlaringizga ham ulashing. 🫡
🔗 https://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://github.com/mukhriddin-dev
Ulashish: