useState из Javascript в Typescript

Преобразование существующего кода Javascript в Typescript немного утомительно 😂.

Из-за слабо типизированной природы JavaScript определение того, какие типы данных пересылаются в JavaScript, может быть сложным.

В приведенном ниже примере показано преобразование useState из JS в TS.

Без машинописного текста:

Большинство разработчиков React могут быть знакомы с приведенным ниже фрагментом кода. Здесь компонент LoginInput — это обычное поле ввода, которое принимает реквизиты, включая заполнитель, значение и событие onChange.

import React from 'react';

function LoginInput(props) {
    return (
        <input 
            placeholder={props.placeHolder} 
            value={props.value} 
            onChange={props.changeEvent}/>
    );
}

export default LoginInput;

Затем компонент App, который действует как родительский для этого компонента LoginInput. В этом файле прописана логика обработки событий. Здесь useState используется для обработки состояния пользователя, вошедшего в систему. По умолчанию указан пароль 123.

import React, { useState } from 'react';
import LoginInput from './loginInput';

const  App = () => {
    const [user, setUser]  = useState({username: "", password: ""});

  const usernamehandler = (event) => {
    setUser({usename: event.target.value, password: "123"});
  }

  return (
    <div className="App">
      <LoginInput 
        placeHolder='Username' 
        value={user.username} 
        changeEvent={usernamehandler}
      />
    </div>
  );
}

export default App;

Теперь пришло время конвертации 😊.

С помощью машинописного текста:

При преобразовании важно помнить, что Typescript всегда требует тип данных всех элементов и переменных. Сначала мы конвертируем LoginInput в файл .tsx, как показано ниже.

import React from 'react';

interface InputFields {
    placeHolder: string;
    value: string | number | readonly string[] | undefined;
    changeEvent: React.ChangeEventHandler<HTMLInputElement>;
}

function LoginInput(props: InputFields) {
    return (
        <input 
            placeholder={props.placeHolder} 
            value={props.value} 
            onChange={props.changeEvent}/>
    );
}

export default LoginInput;

Здесь все поля, поступающие через реквизиты, должны быть включены в интерфейс. Поскольку мы используем событие onChange, тип, указанный как React.ChangeEventHandler, с типом элемента HTMLInputElement.

import React, { useState } from 'react';
import LoginInput from './loginInput';

interface User {
  username: string;
  password: string;
}

const App = () => {
  const [user, setUser]  = useState<User>({username: "", password: ""});

  const usernamehandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    const username = (event.target as HTMLInputElement).value;
    setUser({username: username, password: "123"})
  }
  return (
    <div className="App">
      <LoginInput 
        placeHolder='Username' 
        value={user.username} 
        changeEvent={usernamehandler}
      />
    </div>
  );
}

export default App;

В useState вместе с ним необходимо указать тип данных. Следовательно, создается интерфейс User. Также лучше указать тип event.target для предотвращения нежелательных ошибок (не обязательно).

Примечание. Базовым типом для всех других типов тегов DOM является HTMLElement.
Например, тип HTMLInputElement расширяет HTMLElement и имеет значение свойства, отсутствующее в типе HTMLElement.

Ссылка:

Понимание использования хука useState, нажмите здесь.
Узнайте больше о машинописном тексте, нажмите здесь.

Пожалуйста, не стесняйтесь давать предложения.

Спасибо

Если вам понравилась эта статья, я был бы признателен, если бы вы подписались на мои советы в будущем😊

useState из Javascript в Typescript

Вопросы по теме