React?+?Typescript領(lǐng)域初學(xué)者的常見問(wèn)題和技巧(最新)
React + Typescript領(lǐng)域初學(xué)者的常見問(wèn)題和技巧
創(chuàng)建一個(gè)聯(lián)合類型的常量 Key
const NAME = {
HOGE: "hoge",
FUGA: "fuga"
} as const;
keyof typeof NAME
// => "HOGE" | "FUGA"創(chuàng)建常量值的聯(lián)合類型
typeof NAME[keyof typeof NAME] // => "hoge" | "fuga"
沮喪
const { hoge, piyo } = router.query as {
hoge: string;
piyo: string;
};強(qiáng)制向下
有危險(xiǎn)，但是...
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 中，可以通過(guò)設(shè)置一個(gè)插件如 todo-tree 來(lái)高亮顯示并在列表中查看。
| 評(píng)論 | 意義 |
|---|---|
| FIXME: | 有缺陷的代碼。我有強(qiáng)烈的意愿去解決它。 |
| TODO: | 該怎么辦。比 FIXME 弱。要修復(fù)的功能。 |
| NOTE: | 在強(qiáng)調(diào)實(shí)現(xiàn)的意圖以及為什么要這樣寫的時(shí)候?qū)憽?/td> |
| HACK: | 我想重構(gòu)。 |
| REVIEW: | 需要審查或查看。 |
| WARNING: | 當(dāng)心。 |
什么是假的
False、undefined、null、NaN、0等，分別為真/假值，為假。
一切請(qǐng)參考 MDN。
// false, undefined, null, NaN, 0などのときは以下のエラーログを出力する
if (!hoge) {
console.error("hoge がありません");
}
console.log(hoge);突然||這是什么？
一個(gè)常見的條件分支OR。
當(dāng)左側(cè)為Falsy時(shí)，使用連續(xù)計(jì)算右側(cè)表達(dá)式的特性。
（下面的代碼"HOGE"是Truthy）
也就是說(shuō)，如果 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"
什么是突然&&？
一個(gè)常見的條件分支AND。
當(dāng)左側(cè)為Truthy時(shí)，使用連續(xù)計(jì)算右側(cè)表達(dá)式的特性。
也就是說(shuō)，如果 loading 是 Truthy（頁(yè)面正在加載），則 Loading 組件打算將其打印到屏幕上。
const HogeComponent = ({ loading, hoge }) => {
return (
<>
{loading && <Loading />}
<Typography>{hoge}</Typography>
</>
);
};？和？？是什么
可選鏈 ?.
如果引用為 null（null 或 undefined），則表達(dá)式被縮短并返回 undefined 而不是錯(cuò)誤。
空合并運(yùn)算符 ??
如果左側(cè)為空，則返回右側(cè)的值，否則返回左側(cè)的值。
- 如果用戶未定義，則返回未定義
- 當(dāng) user 中包含的屬性 hoge 為 null 或 undefined 時(shí)顯示“hoge”
const piyoList = userList?.map((user) => ({
hoge: user?.hoge ?? "hoge",
fuga: user?.fuga ?? "fuga",
piyo: user?.piyo ?? "piyo",
}));我應(yīng)該如何正確使用 ?? 和 || ？
|| 運(yùn)算符經(jīng)常被混淆，因?yàn)樗??? 運(yùn)算符的判斷。
undefined || 如果只想在null的時(shí)候做有限的判斷，使用??操作符的好處是別人在看代碼的時(shí)候更容易理解意圖，根據(jù)情況，可能會(huì)出現(xiàn)無(wú)意的行為。可以想象。
不方便的例子
例如，當(dāng)將數(shù)字 0 作為參數(shù)傳遞時(shí)，|| 是不合適的。（因?yàn)?Falsey 值包含 0）
假設(shè)有一個(gè)組件可以指定任意寬度，如下所示。
const WidthComponent = ({ width }) => {
return <div style={{ minWidth: width || "400px" }}>橫幅をきめる</div> };如果調(diào)用此組件時(shí)指定寬度為 0，則始終應(yīng)用 400px。這是因?yàn)?0 是 Falsy 并移至右側(cè)的評(píng)估。
我想在函數(shù)中使用可選鏈
可以通過(guò)編寫 functionName ?. () 來(lái)實(shí)現(xiàn)。
當(dāng)然，多個(gè)可選鏈也可以一起使用。
const productName = product?.getName?.();
通過(guò)使用它，可以減少以下冗余描述。
const productName = product?.getName ? product.getName() : undefined;
我想在數(shù)組中使用可選鏈
const product = products?.[0]通過(guò)描述是可能的。
如果你想在數(shù)組索引之后有一個(gè)可選鏈，請(qǐng)?jiān)?code>[]后面寫?
const user = userList?.[3]?.hoge ?? "HOGE"
基于上述的小測(cè)驗(yàn)
const userList = [
{hoge:"hoge1",piyo:"piyo1"},
{hoge:"hoge2",piyo:"piyo2"},
{hoge:"hoge3",piyo:"piyo3"},
]
const user = userList?.[3]?.hoge ?? "HOGE"
console.log(user); // 何が出るかな？最好使用模板文字進(jìn)行字符串連接的理論
雖然取決于站點(diǎn)，但使用模板文字進(jìn)行字符串連接基本上更好。
const mergeString = (hoge: string, fuga: string, piyo: string) =>
`${hoge}_${fuga}_${piyo}`;上面箭頭函數(shù)的寫法沒有return
可以編寫箭頭函數(shù)，以便可以省略花括號(hào)，并且不需要返回。
我曾經(jīng)生成一個(gè)合適的密鑰。
如果上述函數(shù)的范圍適當(dāng)，它將如下所示。
const mergeString = (hoge: string, fuga: string, piyo: string) => {
return `${hoge}_${fuga}_${piyo}`;
};合并數(shù)組
const hoge = [1, 2, 3]; const fuga = [4, 5, 6]; const piyo = [...hoge, ...fuga]; // => [1,2,3,4,5,6]
差異更新對(duì)象
const defaultValue = {
hoge: "hoge",
fuga: "fuga",
piyo: "piyo",
};
const inputValue = {
hoge: "hogehoge",
fuga: "fugafuga",
};
const result = { ...defaultValue, ...inputValue };
// => {hoge: "hogehoge", fuga: "fugafuga", piyo: "piyo"}將參數(shù)一起傳遞給組件
type HogeProps = {
hoge: string;
piyo: string;
};
export const Hoge: React.VFC<HogeProps> = (props) => {
return (
<>
<ChildComponent {...props} /> </> );
};拆分分配可以用另一個(gè)名字來(lái)完成
在調(diào)用 Hooks 等時(shí)使用，其返回類型在同一層次結(jié)構(gòu)的組件中是固定的。
這在使用 apollo 客戶端的 FetchQuery 時(shí)經(jīng)常出現(xiàn)。應(yīng)該。
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()拆分賦值也可以處理嵌套
也可以對(duì)嵌套的人進(jìn)行拆分分配！
type APIResponse = {
code: string;
data: {
hoge: string;
fuga?: string;
piyo?: string;
}[];
};
const {
code,
data: [{ hoge, fuga, piyo }],
} = res; // res は APIResponse型とする在最后
如果您有任何建議或者這是一件毫無(wú)意義的事情，請(qǐng)隨時(shí)發(fā)表評(píng)論。
到此這篇關(guān)于React + Typescript領(lǐng)域初學(xué)者的常見問(wèn)題和技巧的文章就介紹到這了,更多相關(guān)React Typescript常見問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Hooks: useEffect()調(diào)用了兩次問(wèn)題分析
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問(wèn)題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
React?Context源碼實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context源碼實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react中antd Upload手動(dòng)上傳的示例
本文主要介紹了react中antd Upload手動(dòng)上傳的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了React中state屬性和生命周期的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
簡(jiǎn)談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動(dòng)實(shí)現(xiàn)Recoil狀態(tài)管理基本原理實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react hooks中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-08-08
理解react中受控組件和非受控組件及應(yīng)用場(chǎng)景
當(dāng)涉及到React框架時(shí),了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作
這篇文章主要介紹了react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
react 組件實(shí)現(xiàn)無(wú)縫輪播示例詳解
這篇文章主要為大家介紹了react 組件實(shí)現(xiàn)無(wú)縫輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10