React+Typescript常見的問題和技巧實例分析

蝸牛 互聯網技術資訊 2022-06-18 46 0

這篇“React+Typescript常見的問題和技巧實例分析”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“React+Typescript常見的問題和技巧實例分析”文章吧。

創建一個聯合類型的常量 Key

const?NAME?=?{
??HOGE:?"hoge",
??FUGA:?"fuga"
}?as?const;
keyof?typeof?NAME
//?=>?"HOGE"?|?"FUGA"

創建常量值的聯合類型

typeof?NAME[keyof?typeof?NAME]
//?=>?"hoge"?|?"fuga"

沮喪

const?{?hoge,?piyo?}?=?router.query?as?{
??hoge:?string;
??piyo:?string;
};

強制向下

有危險,但是...

const?{?hoge,?piyo?}?=?router.query?as?unknown?as?{
??hoge:?number;
??piyo:?number;
};

Material-Extend UI 類型

基本上它是由命名約定“組件名+Props”提供的,所以使用它。

type?ExtendsProps?=?TextFieldProps?&?{
??hoge:?number;
};

使用 Material-UI 屬性類型

TextField 的類型TextFieldProps可以被繼承,但是如果你想使用它的 name 屬性

type?Props?=?{
??name:?TextFieldProps["name"];
};

常用注釋前綴注解注釋(FIXME、TODO等)

在 VSCode 中,可以通過設置一個插件如 todo-tree 來高亮顯示并在列表中查看。

評論 意義
FIXME: 有缺陷的代碼。我有強烈的意愿去解決它。
TODO: 該怎么辦。比 FIXME 弱。要修復的功能。
NOTE: 在強調實現的意圖以及為什么要這樣寫的時候寫。
HACK: 我想重構。
REVIEW: 需要審查或查看。
WARNING: 當心。

什么是假的

False、undefined、null、NaN、0等,分別為真/假值,為假。

一切請參考 MDN。

//?false,?undefined,?null,?NaN,?0などのときは以下のエラーログを出力する
if?(!hoge)?{
??console.error("hoge?がありません");
}
console.log(hoge);

突然||這是什么?

一個常見的條件分支OR。
當左側為Falsy時,使用連續計算右側表達式的特性。
(下面的代碼"HOGE"Truthy
也就是說,如果 hoge 是 Falsy,"HOGE"可以輸出到屏幕上。

const?HogeComponent?=?({?hoge?})?=>?{
??return?<div>{hoge?||?"HOGE"}</div>;
};
const?a1?=?false?||?"hoge";?//?f?||?t?returns?"hoge"
const?a2?=?"hoge"?||?false;?//?t?||?f?returns?"hoge"

什么是突然&&?

一個常見的條件分支AND。
當左側為Truthy時,使用連續計算右側表達式的特性。
也就是說,如果 loading 是 Truthy(頁面正在加載),則 Loading 組件打算將其打印到屏幕上。

const?HogeComponent?=?({?loading,?hoge?})?=>?{
??return?(
????<>
??????{loading?&&?<Loading?/>}
??????<Typography>{hoge}</Typography>
????</>
??);
};

?和??是什么

可選鏈 ?.
如果引用為 null(null 或 undefined),則表達式被縮短并返回 undefined 而不是錯誤。

空合并運算符 ??
如果左側為空,則返回右側的值,否則返回左側的值。

  • 如果用戶未定義,則返回未定義

  • 當 user 中包含的屬性 hoge 為 null 或 undefined 時顯示“hoge”

const?piyoList?=?userList?.map((user)?=>?({
??hoge:?user?.hoge????"hoge",
??fuga:?user?.fuga????"fuga",
??piyo:?user?.piyo????"piyo",
}));

我應該如何正確使用 ?? 和 || ?

|| 運算符經常被混淆,因為它包含 ?? 運算符的判斷。
undefined || 如果只想在null的時候做有限的判斷,使用??操作符的好處是別人在看代碼的時候更容易理解意圖,根據情況,可能會出現無意的行為??梢韵胂?。

不方便的例子

例如,當將數字 0 作為參數傳遞時,|| 是不合適的。(因為 Falsey 值包含 0)

假設有一個組件可以指定任意寬度,如下所示。

const?WidthComponent?=?({?width?})?=>?{
??return?<div?style={{?minWidth:?width?||?"400px"?}}>橫幅をきめる</div>?};

如果調用此組件時指定寬度為 0,則始終應用 400px。這是因為 0 是 Falsy 并移至右側的評估。

我想在函數中使用可選鏈

可以通過編寫 functionName ?. () 來實現。
當然,多個可選鏈也可以一起使用。

const?productName?=?product?.getName?.();

通過使用它,可以減少以下冗余描述。

const?productName?=?product?.getName???product.getName()?:?undefined;

我想在數組中使用可選鏈

const product = products?.[0]通過描述是可能的。
如果你想在數組索引之后有一個可選鏈,請在[]后面寫?

const?user?=?userList?.[3]?.hoge????"HOGE"

基于上述的小測驗

const?userList?=?[
??{hoge:"hoge1",piyo:"piyo1"},
??{hoge:"hoge2",piyo:"piyo2"},
??{hoge:"hoge3",piyo:"piyo3"},
]
const?user?=?userList?.[3]?.hoge????"HOGE"
console.log(user);?//?何が出るかな?

最好使用模板文字進行字符串連接的理論

雖然取決于站點,但使用模板文字進行字符串連接基本上更好。

const?mergeString?=?(hoge:?string,?fuga:?string,?piyo:?string)?=>
??`${hoge}_${fuga}_${piyo}`;

上面箭頭函數的寫法沒有return

可以編寫箭頭函數,以便可以省略花括號,并且不需要返回。
我曾經生成一個合適的密鑰。

如果上述函數的范圍適當,它將如下所示。

const?mergeString?=?(hoge:?string,?fuga:?string,?piyo:?string)?=>?{
??return?`${hoge}_${fuga}_${piyo}`;
};

合并數組

const?hoge?=?[1,?2,?3];
const?fuga?=?[4,?5,?6];
const?piyo?=?[...hoge,?...fuga];?//?=>?[1,2,3,4,5,6]

差異更新對象

const?defaultValue?=?{
??hoge:?"hoge",
??fuga:?"fuga",
??piyo:?"piyo",
};
const?inputValue?=?{
??hoge:?"hogehoge",
??fuga:?"fugafuga",
};
const?result?=?{?...defaultValue,?...inputValue?};
//?=>?{hoge:?"hogehoge",?fuga:?"fugafuga",?piyo:?"piyo"}

將參數一起傳遞給組件

type?HogeProps?=?{
??hoge:?string;
??piyo:?string;
};
export?const?Hoge:?React.VFC<HogeProps>?=?(props)?=>?{
??return?(
????<>
??????<ChildComponent?{...props}?/>?????</>???);
};

拆分分配可以用另一個名字來完成

在調用 Hooks 等時使用,其返回類型在同一層次結構的組件中是固定的。
這在使用 apollo 客戶端的 FetchQuery 時經常出現。應該。

type?Response?=?{
??loading:boolean;
??data:?unknown;
}
const?getResponse?=?():Response?=>?({
??loading:?true;
??data?:?{
????hoge:?"hoge";
????fuga:?"fuga";
??}
})
const?{data,?loading}?=?getResponse();?//?通常の分割代入
//?別名の分割代入
const?{data:?data2,?loading:?loading2}?=?getResponse()

拆分賦值也可以處理嵌套

也可以對嵌套的人進行拆分分配!

type?APIResponse?=?{
??code:?string;
??data:?{
????hoge:?string;
????fuga?:?string;
????piyo?:?string;
??}[];
};

const?{
??code,
??data:?[{?hoge,?fuga,?piyo?}],
}?=?res;?//?res?は?APIResponse型とする

以上就是關于“React+Typescript常見的問題和技巧實例分析”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看