对这种表达函数的特殊 JavaScript 方式感到困惑

Question

我知道声明函数（或表达它）有不同的方法，但是，我没有seen/used 之前有过类似的事情（鉴于，我是该领域的“新手”）。有人可以解释一下这个特定的函数声明是如何工作的以及何时使用它吗？无法理解 ":" 后面的函数名！

const formSubmitHandler: SubmitHandler<IFormInputs> = () => {}

(不知道跟typescript有没有关系)

import './App.css';
import { useForm, SubmitHandler } from 'react-hook-form'

type IFormInputs = {
  email: string,
  password: string
}

const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
  console.log('the form data is', data);
}


const App = () => {
  const { register, handleSubmit, watch, formState: {errors}} = useForm<IFormInputs>()

  console.log(errors, 'this is an error explanation');
  console.log(watch('email'), 'watch the email variable');

  return (
    <div style={{padding: '2rem', border: '1px black solid'}}>
    <form onSubmit={handleSubmit(formSubmitHandler)}>
      <input defaultValue='example.test.@gmail.com' {...register('email')}/>
      <br />
      {errors.password && <span>This field is required</span>}
      <br />
      <input {...register('password', { required: true })}/>
      <br />
      <br />
      <input type="submit" />
    </form>
    </div>
  )
}


export default App;

Answer 1

此代码：

const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
  console.log('the form data is', data);
}

是 TypeScript 代码，表示 formSubmitHandler 常量的类型是 SubmitHandler<IFormInputs>，这是一个带有泛型类型参数 (IFormInputs) 的类型 (SubmitHandler) . SubmitHandler 大概是一个 generic type 定义的函数类型，大概是这样的：

type SubmitHandler<DataType> = (data: DataType) => void;

分配给该常量的值是一个 arrow function 接受类型为 IFormInputs.[=27= 的单个 data 参数]

对于它的价值，这里是等效的 JavaScript 代码（在这种情况下，它只是删除类型注释）：

const formSubmitHandler = (data) => {
  console.log('the form data is', data);
}

（在这两种情况下，代码都依赖于自动分号插入，因为在赋值语句的末尾应该有一个 ; [就在结束 } 之后函数体]。鉴于作者在 console.log 上包含了 ;，赋值中缺少的 ; 可能是一个 typo/misunderstanding，而不是有意决定使用ASI.)

Answer 2

匿名函数（又名胖箭头函数 ()=>{}）在本质上与其他语言的 lambda 函数类似。它没有.this 值。

它们是 return 计算值的快速方法，无需命名函数或方法的所有开销。

如果您想了解更多信息，请查看this link

Fireship 在区分不同功能及其用途方面做得非常好 here。

使用 Typescript，您可以将匿名函数的赋值变量名称声明为箭头函数。假设我们有一个计算函数，它添加到传递给函数的值：

Javascript:

const add = (a, b) =>{
  return a+b
}

打字稿

const add = (a:number, b:number) =>{
  return a+b
}

现在 add 没有静态类型并且可以推断出来，但是，如果您需要严格的类型声明（最好），您需要为 add 定义一个类型作为函数，看起来像 (parameters)=> return类型：

type Add = (a: number, b: number) => number;

const add: Add = (a, b) => {
  return a + b;
};

对这种表达函数的特殊 JavaScript 方式感到困惑

Confused about this particular JavaScript way of expressing a function

javascript

function

typescript

arrow-functions