React ? TypeScript? ???? ?? useState ??? ??? ???? ????. useState? ??? ?? ??? ??? ??? ? ?? ?? React ?????. TypeScript? ?? ??? ??? ????? useState? ????? ???? ??? ???? ?? ?????. Typescript? useState? JavaScript? useState? ??? ???, ??? Typescript? ?? ???? ???? ?? ???? ?? ?? ??? ??? ???? ??? ???????.

TypeScript?? useState? ?? ???

?? ??? ???? TypeScript? ?? ?? ???? ?? ??? ??? ? ????.

const [count, setCount] = useState(0); // type is inferred as number
const [text, setText] = useState(''); // type is inferred as string

??? ? ??? ??? ??? ?? ??? ????? ???? ???.

const [user, setUser] = useState<User | null>(null);

? ??? User? ??? ??? ???? ????? ?? ?????. ?? ???? , ??? User ????? null? ? ??? TypeScript? ????.

?? ??? ??? ??

typescript? ??? ? ??? ??? ???? ??? ? ???? ??? ??? ??? ?? ???? ??? ?? ?? ?????. ??? ??? ???? ?? ??? ????? ??? ??????? ??? ? ??? ? ?? ?? ?? ???? ?? ?? ? ????.

??? ?? ??? ??? ??? ?????.

• ???? null??? ???? ?????.
• ??? ?? ?? ??
• ?? ??? ???? ????.

type Status = 'idle' | 'loading' | 'success' | 'error';
const [status, setStatus] = useState<Status>('idle');

??? ?? ?? ?? ??? ?????.

• ???? ??? ???? ?????
• ?? ?? ??
• ??? ??? ??? ??? ????.

const [isLoading, setIsLoading] = useState(false);
const [count, setCount] = useState(0);

??? ?? ?? ??

Typescript? useState? ??? ?? ??? ??? ? ?? ?????. ? ?? ???? ????? ???????.

??

?? ?? ?? ??:

const [items, setItems] = useState<string[]>([]);
// or let TypeScript infer
const [numbers, setNumbers] = useState([1, 2, 3]);

?? ?? ?? ??:

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);

??

?? ?? ?? ??:

interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User>({ name: '', age: 0 });

??? ???? ?? ??:

interface FormData {
  username: string;
  email: string;
  age?: number;
}

const [formData, setFormData] = useState<FormData>({
  username: '',
  email: ''
});

???? ?? ? ?? ??

???? ????:

??? ??? ??? ??? ?? ?? ???? ???? ?? ??? ???? ?????.

type RequestState<T> = 
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function useData<T>() {
  const [state, setState] = useState<RequestState<T>>({ status: 'idle' });
  // ... rest of the logic
}

??? RequestState ??? ??? '??'? ???? ??? ??? ??? ? ??? ?????. ??? 'error'? ? error ??? ??? ? ?? ???.

useState? ???? Guard ??

Tye Guard? TypeScript? ?? ??? ???? ??? ??? ????? ?????.

const [count, setCount] = useState(0); // type is inferred as number
const [text, setText] = useState(''); // type is inferred as string

??? TypeScript? ?? ?? ??? if ?? ??? ???? null? ???? ?? ?? ????. ?? ??? ??? ???? ? ??? ??? ?????.

???? ??

useState? ???? ??? ??? ? ? ?? ?? ??? ??? ???? ?? ?????.

const [user, setUser] = useState<User | null>(null);

??? TypeScript? ?? ?? ?? ???? prevCount ? prevUser? ?? ??? ??? ?????. ?? ??? ????? ? ?? ???? ?????.

?? ??

typescript?? useState? ???? ???? ??? ???? ??? ? ???? ??? ???? ? ??? ???. ???? ??? ???? ?? ??? ???? ?? ???? ??? ??? ??? ? ????.

type Status = 'idle' | 'loading' | 'success' | 'error';
const [status, setStatus] = useState<Status>('idle');

??

TypeScript React ?? ???? useState? ???? ???? ??? ???? ?? ??? ??? ??????? ???? ? ??????. ???? ?? ???? ?? ? ??? ???? ?? ??? ??? ??? ???? ??? ??? ????. ???? ?? ??? ???? ?? ?? ???. ??? ??? ??? ???? ??? ? ?? ???? ?? ???? ? ???? ???? ???.

? ????? ???? ?? ????? ?? ???? TypeScript?? useState? ????? ??? ??? ??? ?? ???? React ??????? ???? ? ??? ???. ???? TypeScript? ?? ??? ??? ?? ? ????.

? ??? TypeScript React? useState ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!