我知道宣告一個函式（或表達它）有不同的方法，但是，我以前從未見過/使用過這樣的東西（假設我是該領域的“新手”）。有人可以解釋一下這個特定的函式宣告是如何作業的以及何時使用的嗎？無法繞過函式名稱后面的“：”！
const formSubmitHandler: SubmitHandler<IFormInputs> = () => {}
（不確定它是否與打字稿有關）
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='[email protected]' {...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;
uj5u.com熱心網友回復：
這段代碼：
const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
console.log('the form data is', data);
}
是 TypeScript 代碼，表示formSubmitHandler常量的型別is SubmitHandler<IFormInputs>，它是一個SubmitHandler帶有泛型型別引數 ( IFormInputs) 的型別 ( ) 。SubmitHandler大概是定義函式型別的泛型型別，可能是這樣的：
type SubmitHandler<DataType> = (data: DataType) => void;
分配給該常量的值是一個接受型別為 的單個引數的箭頭函式。dataIFormInputs
對于它的價值，這里是等效的 JavaScript 代碼（在這種情況下，這只是洗掉型別注釋）：
const formSubmitHandler = (data) => {
console.log('the form data is', data);
}
（在這兩種情況下，代碼都依賴于自動分號插入，因為;賦值陳述句的末尾應該有一個[就在}函式體關閉之后]。鑒于作者在;上包含了console.log，;賦值中缺少可能是打字錯誤/誤解，而不是有意決定使用 ASI。）
uj5u.com熱心網友回復：
匿名函式（又名胖箭頭函式 ()=>{}）本質上類似于其他語言的 lambda 函式。它沒有 .this 值。
它們是回傳計算值的快速方法，無需命名函式或方法的所有開銷。
如果您想了解更多資訊，請查看此鏈接
Fireship不區分不同的功能和它們的用途的一個很好的作業在這里。
使用 Typescript，您可以將匿名函式的分配變數名稱宣告為箭頭函式。假設我們有一個計算函式，它添加到傳遞給函式的值：
Javascript：
const add = (a, b) =>{
return a b
}
打字稿
const add = (a:number, b:number) =>{
return a b
}
現在 add 沒有靜態型別并且可以推斷，但是，如果您需要嚴格的型別宣告（最好），您需要將 add 定義為一個函式的型別，它看起來像（引數）=> 回傳型別：
type Add = (a: number, b: number) => number;
const add: Add = (a, b) => {
return a b;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/370583.html
標籤：javascript 打字稿 功能 箭头函数
下一篇：更新嵌套物件值的陣列