Как с typescript перевести на jsx следующий код

@Norail · Регистрация: 07.01.2023

Студворк — интернет-сервис помощи студентам

loginForm.tsx

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, {FC, useContext, useState} from 'react';
import {Context} from "../index";
import {observer} from "mobx-react-lite";
 
const LoginForm: FC = () => {
    const [email, setEmail] = useState<string>('')
    const [password, setPassword] = useState<string>('')
    const {store} = useContext(Context);
 
    return (
        <div>
            <input
                onChange={e => setEmail(e.target.value)}
                value={email}
                type="text"
                placeholder='Email'
            />
            <input
                onChange={e => setPassword(e.target.value)}
                value={password}
                type="password"
                placeholder='Пароль'
            />
            <button onClick={() => store.login(email, password)}>
                Логин
            </button>
            <button onClick={() => store.registration(email, password)}>
                Регистрация
            </button>
        </div>
    );
};
 
export default observer(LoginForm);

index.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import axios from 'axios';
import {AuthResponse} from "../models/response/AuthResponse";
import {store} from "../index";
import {IUser} from "../models/IUser";
 
export const API_URL = `http://localhost:5000/api`
 
const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})
 
$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})
 
$api.interceptors.response.use((config) => {
    return config;
},async (error) => {
    const originalRequest = error.config;
    if (error.response.status == 401 && error.config && !error.config._isRetry) {
        originalRequest._isRetry = true;
        try {
            const response = await axios.get<AuthResponse>(`${API_URL}/refresh`, {withCredentials: true})
            localStorage.setItem('token', response.data.accessToken);
            return $api.request(originalRequest);
        } catch (e) {
            console.log('НЕ АВТОРИЗОВАН')
        }
    }
    throw error;
})
 
export default $api;

AuthREsponse.ts

JavaScript
1
2
3
4
5
6
7
import {IUser} from "../IUser";
 
export interface AuthResponse {
    accessToken: string;
    refreshToken: string;
    user: IUser;
}

IUser.ts

JavaScript
1
2
3
4
5
export interface IUser {
    email: string;
    isActivated: boolean;
    id: string;
}

AuthServise

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import $api from "../http";
import {AxiosResponse} from 'axios';
import {AuthResponse} from "../models/response/AuthResponse";
 
export default class AuthService {
    static async login(email: string, password: string): Promise<AxiosResponse<AuthResponse>> {
        return $api.post<AuthResponse>('/login', {email, password})
    }
 
    static async registration(email: string, password: string): Promise<AxiosResponse<AuthResponse>> {
        return $api.post<AuthResponse>('/registration', {email, password})
    }
 
    static async logout(): Promise<void> {
        return $api.post('/logout')
    }
 
}

AauthServise

JavaScript
1
2
3
4
5
6
7
8
9
10
import $api from "../http";
import {AxiosResponse} from 'axios';
import {AuthResponse} from "../models/response/AuthResponse";
import {IUser} from "../models/IUser";
 
export default class UserService {
    static fetchUsers(): Promise<AxiosResponse<IUser[]>> {
        return $api.get<IUser[]>('/users')
    }
}

store.ts

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import {IUser} from "../models/IUser";
import {makeAutoObservable} from "mobx";
import AuthService from "../services/AuthService";
import axios from 'axios';
import {AuthResponse} from "../models/response/AuthResponse";
import {API_URL} from "../http";
 
export default class Store {
    user = {} as IUser;
    isAuth = false;
    isLoading = false;
 
    constructor() {
        makeAutoObservable(this);
    }
 
    setAuth(bool: boolean) {
        this.isAuth = bool;
    }
 
    setUser(user: IUser) {
        this.user = user;
    }
 
    setLoading(bool: boolean) {
        this.isLoading = bool;
    }
 
    async login(email: string, password: string) {
        try {
            const response = await AuthService.login(email, password);
            console.log(response)
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async registration(email: string, password: string) {
        try {
            const response = await AuthService.registration(email, password);
            console.log(response)
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async logout() {
        try {
            const response = await AuthService.logout();
            localStorage.removeItem('token');
            this.setAuth(false);
            this.setUser({} as IUser);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async checkAuth() {
        this.setLoading(true);
        try {
            const response = await axios.get<AuthResponse>(`${API_URL}/refresh`, {withCredentials: true})
            console.log(response);
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        } finally {
            this.setLoading(false);
        }
    }
}

App.tsx

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, {FC, useContext, useEffect, useState} from 'react';
import LoginForm from "./components/LoginForm";
import {Context} from "./index";
import {observer} from "mobx-react-lite";
import {IUser} from "./models/IUser";
import UserService from "./services/UserService";
 
const App: FC = () => {
    const {store} = useContext(Context);
    const [users, setUsers] = useState<IUser[]>([]);
 
    useEffect(() => {
        if (localStorage.getItem('token')) {
            store.checkAuth()
        }
    }, [])
 
    async function getUsers() {
        try {
            const response = await UserService.fetchUsers();
            setUsers(response.data);
        } catch (e) {
            console.log(e);
        }
    }
 
    if (store.isLoading) {
        return <div>Загрузка...</div>
    }
 
    if (!store.isAuth) {
        return (
            <div>
                <LoginForm/>
                <button onClick={getUsers}>Получить пользователей</button>
            </div>
        );
    }
 
    return (
        <div>
            <h1>{store.isAuth ? `Пользователь авторизован ${store.user.email}` : 'АВТОРИЗУЙТЕСЬ'}</h1>
            <h1>{store.user.isActivated ? 'Аккаунт подтвержден по почте' : 'ПОДТВЕРДИТЕ АККАУНТ!!!!'}</h1>
            <button onClick={() => store.logout()}>Выйти</button>
            <div>
                <button onClick={getUsers}>Получить пользователей</button>
            </div>
            {users.map(user =>
                <div key={user.email}>{user.email}</div>
            )}
        </div>
    );
};
 
export default observer(App);

index.tsx

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, {createContext} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Store from "./store/store";
 
interface State {
    store: Store,
}
 
export const store = new Store();
 
export const Context = createContext<State>({
    store,
})
 
ReactDOM.render(
    <Context.Provider value={{
        store
    }}>
        <App />
    </Context.Provider>,
  document.getElementById('root')
);

@Usaga · 20.01.2026, 02:46

Norail, это обычный проект на React, который собирается обычным для этого проекта образом: используя WebPack или Vite.

Документацию по React смотреть не пробовал?..

Добавлено через 9 минут
И здесь ещё не хватает файла package.json

krvsa · 20.01.2026, 08:42

Сообщение от Norail

Как с typescript перевести на jsx следующий код

Там этого TS считай что и нет...

Файлы с описанием типов просто выкидываешь.
Потом убираешь типы, что после двоеточий. Потом все типы, что в угловых скобках.

@Norail · 20.01.2026, 13:17 **[ТС]**

не понимаю на что заменить <AuthResponse>, если так просто напишите чтоб я понял

@Usaga · 20.01.2026, 13:22

Norail, ни на что не заменять.

krvsa · 20.01.2026, 13:33

Сообщение от Norail

не понимаю на что заменить <AuthResponse>, если так просто напишите чтоб я понял

Так просто и писал выше:
- Сам файл удалить.
- Всякое упоминание удалить.

@voraa · 20.01.2026, 13:36

Сообщение от Norail

не понимаю на что заменить <AuthResponse>,

Сообщение от krvsa

Потом убираешь типы, что после двоеточий. Потом все типы, что в угловых скобках.

Просто типы убрать

JavaScript
1
2
    const [email, setEmail] = useState<string>('')
    const [password, setPassword] = useState<string>('')

Превращается в

JavaScript
1
2
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

JavaScript
1
2
3
    static async login(email: string, password: string): Promise<AxiosResponse<AuthResponse>> {
        return $api.post<AuthResponse>('/login', {email, password})
    }

Превращается в

JavaScript
1
2
3
    static async login(email, password) {
        return $api.post('/login', {email, password})
    }

krvsa · 20.01.2026, 14:12

В продолжении темы "о TS"...
И вот эти файлы называют "тайпскриптовыми"... Там этого TS шиш да маленько!

@Norail · 20.01.2026, 19:11 **[ТС]**

как будет выглядеть файлы store.js,IUser.js,AuthREsponse
LoginForm

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, {FC, useContext, useState} from 'react';
import {Context} from "../index";
import {observer} from "mobx-react-lite";
 
const LoginForm = observer(() => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const {store} = useContext(Context);
 
    return (
        <div>
            <input
                onChange={e => setEmail(e.target.value)}
                value={email}
                type="text"
                placeholder='Email'
            />
            <input
                onChange={e => setPassword(e.target.value)}
                value={password}
                type="password"
                placeholder='Пароль'
            />
            <button onClick={() => store.login(email, password)}>
                Логин
            </button>
            <button onClick={() => store.registration(email, password)}>
                Регистрация
            </button>
        </div>
    );
});
 
export default LoginForm;

http/index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import axios from 'axios';
 
 
export const API_URL = `http://localhost:5000/api`
 
const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})
 
$api.interceptors.request.use((config) => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
    return config;
})
 
$api.interceptors.response.use((config) => {
    return config;
},async (error) => {
    const originalRequest = error.config;
    if (error.response.status == 401 && error.config && !error.config._isRetry) {
        originalRequest._isRetry = true;
        try {
            const response = await axios.get(`${API_URL}/refresh`, {withCredentials: true})
            localStorage.setItem('token', response.data.accessToken);
            return $api.request(originalRequest);
        } catch (e) {
            console.log('НЕ АВТОРИЗОВАН')
        }
    }
    throw error;
})
 
export default $api;

authresponse.js

JavaScript
1
2
3
4
5
6
7
import {IUser} from "../IUser";
 
export interface AuthResponse {
    accessToken: string;
    refreshToken: string;
    user: IUser;
}

IUser.js

JavaScript
1
2
3
4
5
export interface IUser {
    email: string;
    isActivated: boolean;
    id: string;
}

AuthServise.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import $api from "../http";
 
export default class AuthService {
    static async login(email, password){
        return $api.post('/login', {email, password})
    }
 
    static async registration(email, password) {
        return $api.post('/registration', {email, password})
    }
 
    static async logout() {
        return $api.post('/logout')
    }
 
}

UserServise

JavaScript
1
2
3
4
5
6
7
import $api from "../http";
 
export default class UserService {
    static fetchUsers() {
        return $api.get('/users')
    }
}

App.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, {FC, useContext, useEffect, useState} from 'react';
import LoginForm from "./components/LoginForm";
import {Context} from "./index";
import {observer} from "mobx-react-lite";
import {IUser} from "./models/IUser";
import UserService from "./services/UserService";
 
const App = observer(() =>{
    const {store} = useContext(Context);
    const [users, setUsers] = useState([]);
 
    useEffect(() => {
        if (localStorage.getItem('token')) {
            store.checkAuth()
        }
    }, [])
 
    async function getUsers() {
        try {
            const response = await UserService.fetchUsers();
            setUsers(response.data);
        } catch (e) {
            console.log(e);
        }
    }
 
    if (store.isLoading) {
        return <div>Загрузка...</div>
    }
 
    if (!store.isAuth) {
        return (
            <div>
                <LoginForm/>
                <button onClick={getUsers}>Получить пользователей</button>
            </div>
        );
    }
 
    return (
        <div>
            <h1>{store.isAuth ? `Пользователь авторизован ${store.user.email}` : 'АВТОРИЗУЙТЕСЬ'}</h1>
            <h1>{store.user.isActivated ? 'Аккаунт подтвержден по почте' : 'ПОДТВЕРДИТЕ АККАУНТ!!!!'}</h1>
            <button onClick={() => store.logout()}>Выйти</button>
            <div>
                <button onClick={getUsers}>Получить пользователей</button>
            </div>
            {users.map(user =>
                <div key={user.email}>{user.email}</div>
            )}
        </div>
    );
});
 
export default App;

index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, {createContext} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Store from "./store/store";
 
 
 
export const store = new Store();
 
export const Context = createContext({
    store,
})
 
ReactDOM.render(
    <Context.Provider value={{
        store
    }}>
        <App />
    </Context.Provider>,
  document.getElementById('root')
);

krvsa · 21.01.2026, 09:22

Сообщение от Norail

как будет выглядеть файлы store.js,IUser.js,AuthREsponse

Это вопрос?

IUser.js и AuthREsponse вообще не нужны. Там были описаны интерфейсы для TS.

Добавлено через 47 секунд
Файл store.js ты не показал...

@Norail · 21.01.2026, 13:29 **[ТС]**

вот store.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import {makeAutoObservable} from "mobx";
import AuthService from "../services/AuthService";
import axios from 'axios';
import {API_URL} from "../http";
 
export default class Store {
    user = {};
    isAuth = false;
    isLoading = false;
 
    constructor() {
        makeAutoObservable(this);
    }
 
    setAuth(bool) {
        this.isAuth = bool;
    }
 
    setUser(user) {
        this.user = user;
    }
 
    setLoading(bool) {
        this.isLoading = bool;
    }
 
    async login(email, password) {
        try {
            const response = await AuthService.login(email, password);
            console.log(response)
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async registration(email, password) {
        try {
            const response = await AuthService.registration(email, password);
            console.log(response)
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async logout() {
        try {
            const response = await AuthService.logout();
            localStorage.removeItem('token');
            this.setAuth(false);
            this.setUser(this.users);
        } catch (e) {
            console.log(e.response?.data?.message);
        }
    }
 
    async checkAuth() {
        this.setLoading(true);
        try {
            const response = await axios.get<AuthResponse>(`${API_URL}/refresh`, {withCredentials: true})
            console.log(response);
            localStorage.setItem('token', response.data.accessToken);
            this.setAuth(true);
            this.setUser(response.data.user);
        } catch (e) {
            console.log(e.response?.data?.message);
        } finally {
            this.setLoading(false);
        }
    }
}

ст акими файлами регистрация не работает а логин работает

@voraa · 21.01.2026, 13:59

Сообщение от Norail

ст акими файлами регистрация не работает а логин работает

Так наверно ошибки выдает.
В 65 строке тип <AuthResponse> не убран.

@Norail · 21.01.2026, 14:15 **[ТС]**

спасибо заработало
а в store.js на 56 строке this.setUser(this.user); правильно?

krvsa · 21.01.2026, 14:28

Сообщение от Norail

а в store.js на 56 строке this.setUser(this.user); правильно?

Там у тебя не так

Сообщение от Norail

JavaScript
1
this.setUser(this.users);

Там какой-то users, не user.

@voraa · 21.01.2026, 15:45

Сообщение от krvsa

Там какой-то users, не user.

Вот ts бы наверняка ошибку бы заметил.

@Norail · 21.01.2026, 16:04 **[ТС]**

S от ctrl + s прявиль

krvsa · 21.01.2026, 16:18

Сообщение от voraa

Вот ts бы наверняка ошибку бы заметил.

Ага.

Добавлено через 5 минут
Norail, что делает метод setUser...

Сообщение от Norail

JavaScript
1
2
3
setUser(user) {
        this.user = user;
}

Он записывает некое значение параметра user в свойство экземпляра класса - this.user.

Какой тогда смысл в команде

Сообщение от Norail

JavaScript
1
this.setUser(this.user);

this.user записать в this.user?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Usaga 14136 / 9360 / 1350 Регистрация: 21.01.2016 Сообщений: 35,181
	20.01.2026, 02:46
	Norail, это обычный проект на React, который собирается обычным для этого проекта образом: используя WebPack или Vite. Документацию по React смотреть не пробовал?.. Добавлено через 9 минут И здесь ещё не хватает файла `package.json` 0

@Norail 0 / 0 / 0 Регистрация: 07.01.2023 Сообщений: 51
	20.01.2026, 13:17 [ТС]
	не понимаю на что заменить <AuthResponse>, если так просто напишите чтоб я понял 0

@Usaga 14136 / 9360 / 1350 Регистрация: 21.01.2016 Сообщений: 35,181
	20.01.2026, 13:22
	Norail, ни на что не заменять. 0

krvsa 3827 / 1664 / 429 Регистрация: 14.03.2022 Сообщений: 4,192
	20.01.2026, 14:12
	В продолжении темы "о TS"... И вот эти файлы называют "тайпскриптовыми"... Там этого TS шиш да маленько! 0

@Norail 0 / 0 / 0 Регистрация: 07.01.2023 Сообщений: 51
	21.01.2026, 14:15 [ТС]
	спасибо заработало а в store.js на 56 строке this.setUser(this.user); правильно? 0

@Norail 0 / 0 / 0 Регистрация: 07.01.2023 Сообщений: 51
	21.01.2026, 16:04 [ТС]
	S от ctrl + s прявиль 0