Блог

• Я пытаюсь преобразовать это приложение-калькулятор в машинописный текст.
• три функции (handleClick, handleEqual, handleClear) почему typescript НЕ кричит на меня, чтобы я указал что-то о типе их функций? Только один принимает аргумент, который является числом, я указал тип аргумента для val:число. Но действительно ли это все, что мне здесь нужно?
• Есть ли сайт, который вы рекомендуете, который может помочь разобраться в типах? Кажется довольно запутанным.

     import React, { useState } from 'react';
    import * as math from 'mathjs';
    import '../styling/App.css';
    import { Button } from './button';
    import { Input } from './input'
    import { ClearButton } from './clear-button';
  
    const App = () => {
      const [input, setInput] = useState('');
  
      const handleClick = (val: number) => {
        setInput(input   val)
      }
  
      const handleEqual = () => {
        setInput(math.evaluate(input))
      }
  
      const handleClear = () => {
        setInput('');
      }
  
      return (
        <div className="App">
          <div className="calc-wrapper">
            <Input input={input}/>
            <div className="row">
              <Button handleClick={handleClick}>7</Button>
              <Button handleClick={handleClick}>8</Button>
              <Button handleClick={handleClick}>9</Button>
              <Button handleClick={handleClick}>/</Button>
            </div>
            <div className="row">
              <Button handleClick={handleClick}>4</Button>
              <Button handleClick={handleClick}>5</Button>
              <Button handleClick={handleClick}>6</Button>
              <Button handleClick={handleClick}>*</Button>
            </div>
            <div className="row">
              <Button handleClick={handleClick}>1</Button>
              <Button handleClick={handleClick}>2</Button>
              <Button handleClick={handleClick}>3</Button>
              <Button handleClick={handleClick}> </Button>
            </div>
            <div className="row">
              <Button handleClick={handleClick}>.</Button>
              <Button handleClick={handleClick}>0</Button>
              <Button handleClick={handleEqual}>=</Button>
              <Button handleClick={handleClick}> </Button>
            </div>
            <ClearButton handleClear={handleClear} />
          </div>
        </div>
      );
    }
  
    export default App;
   

Теперь я отредактировал, чтобы добавить свой компонент кнопки

     import React, {FC} from 'react';
    import '../styling/button.css';

    // create types for props
    type ButtonProps = {
      // HandleClick needs to a be a function type with a parameter that takes a ReactNode (since that's the type of props.children in this case, and you want to pass it into that function
      handleClick: (children: React.ReactNode) => void; // basically, clicking the reusable component I made, the arg is a ReactNode 
      // don't need to specify children prop, <ButtonProps> has it by default
    }

                    // set type for value
    const isOperator = (val: React.ReactNode) => {
      // isNaN() only takes a number parm, and only checks whether a number is set to specal value of 'NaN'
      return (typeof val === "number" amp;amp; !isNaN(val)) || val === "." || val === "=";
    }

    // generic type, FC
    export const Button: FC <ButtonProps> = ({children, handleClick}) => {
      return (
        <div className={`button-wrapper ${isOperator(children) ? null : "operator"}`}
            onClick={() => handleClick(children)}
        >
          {children}
        </div>
      )
    }
 

Да, это действительно все, что вам нужно в этом компоненте. Typescpript способен сделать множество выводов на основе использования. Например, вам не нужно объявлять, что ваше input состояние является a string , потому что оно предполагает это в зависимости от типа начального значения "" .

В этом коде есть проблемы с типами машинописи, но они будут отображаться в вашем Button компоненте. Button получает handleClick функцию, которая принимает a number в качестве своего аргумента. Это нормально? Как вы справляетесь с нажатием на * кнопку? Как вы вызываете функцию, которая может принимать только a number ?

Если наша кнопка действительно принимает реквизиты точно так, как мы их предоставляем, то это будет выглядеть примерно так:

 interface ButtonProps {
  handleClick: (val: number) => void;
  children: ReactNode; // this is the default so it's not actually needed here
}

const Button: React.FC<ButtonProps> = ({ handleClick, children }) => (
  <button onClick={() => handleClick(children)}>{children}</button>
);
 

Мы получим сообщение об ошибке при вызове handleClick(children) :

Аргумент типа ‘ReactNode’ не может быть присвоен параметру типа ‘number’.

Тип «неопределенный» не может быть присвоен типу «номер»

Хорошо, значит, мы не можем допустить ничего children подобного . Если мы добавим {children: number;} в ButtonProps , то это исправит ошибку, Button но создаст новую ошибку в App :

Компоненты «Кнопки» не принимают текст в качестве дочерних элементов.

Поэтому нам нужно прочитать children опору как string . Наша Button будет выглядеть так:

 interface ButtonProps {
  handleClick: (val: string) => void;
  children: string;
}

const Button: React.FC<ButtonProps> = ({ handleClick, children }) => (
  <button onClick={() => handleClick(children)}>{children}</button>
);
 

Теперь мы получаем другую ошибку в приложении:

Тип ‘(val: число) => пусто’ не может быть присвоен типу ‘(val: строка) =>> пусто’

Что приводит нас к полному кругу. Мы просто меняем тип handleClick функции, и все готово!

 const handleClick = (val: string) => {
  setInput(input   val);
};
 

Ссылка на песочницу Кода