reactjs - 试图将 calc 应用程序转换为打字稿，这个函数应该是什么类型？

Question

• 我正在尝试将此计算器应用程序转换为 TypeScript。

• 这三个函数，（handleClick、handleEqual、handleClear）为什么打字稿没有对我大喊大叫来指定它们函数的类型？只有一个参数是一个数字，我为 val:number 指定了参数的类型。但这真的是我所需要的吗？

• 您推荐的网站可以帮助您确定类型吗？似乎相当混乱。

    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" && !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>
      )
    }

标签： reactjstypescript

Answer 1

是的，这就是你在这个组件中所需要的。Typescpript 能够根据使用情况推断很多。例如，您不需要声明您input的状态是 a string，因为它根据初始值的类型假设它""。

此代码中的打字稿类型存在问题，但它们将出现在您的Button组件上。 Button正在接收一个handleClick以 anumber作为参数的函数。那样行吗？您如何处理单击*按钮？你如何调用一个只能接受的函数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;}到ButtonPropsthen 中修复错误Button但在中创建一个新错误App：

“按钮”组件不接受文本作为子元素。

所以我们需要将childrenprop 读取为string. 我们的Button会是这样的：

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

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

现在我们在 App 中得到一个不同的错误：

类型 '(val: number) => void' 不可分配给类型 '(val: string) => void'

这给我们带来了完整的循环。我们只需更改handleClick函数的类型，就完成了！

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

代码沙盒链接