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

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

創(chuàng)建一個聯(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;
};

強制向下

有危險，但是...

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 中，可以通過設(shè)置一個插件如 todo-tree 來高亮顯示并在列表中查看。

什么是假的

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

一切請參考 MDN。

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

突然||這是什么？

一個常見的條件分支OR。
當左側(cè)為Falsy時，使用連續(xù)計算右側(cè)表達式的特性。
（下面的代碼"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。
當左側(cè)為Truthy時，使用連續(xù)計算右側(cè)表達式的特性。
也就是說，如果 loading 是 Truthy（頁面正在加載），則 Loading 組件打算將其打印到屏幕上。

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

？和？？是什么

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

空合并運算符 ??
如果左側(cè)為空，則返回右側(cè)的值，否則返回左側(cè)的值。

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

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

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

我應(yīng)該如何正確使用 ?? 和 || ？

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

不方便的例子

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

假設(shè)有一個組件可以指定任意寬度，如下所示。

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

如果調(diào)用此組件時指定寬度為 0，則始終應(yīng)用 400px。這是因為 0 是 Falsy 并移至右側(cè)的評估。

我想在函數(shù)中使用可選鏈

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

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

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

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

我想在數(shù)組中使用可選鏈

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

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}`;

上面箭頭函數(shù)的寫法沒有return

可以編寫箭頭函數(shù)，以便可以省略花括號，并且不需要返回。
我曾經(jīng)生成一個合適的密鑰。

如果上述函數(shù)的范圍適當，它將如下所示。

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]

差異更新對象

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} />     </>   );
};

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

在調(diào)用 Hooks 等時使用，其返回類型在同一層次結(jié)構(gòu)的組件中是固定的。
這在使用 apollo 客戶端的 FetchQuery 時經(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()

拆分賦值也可以處理嵌套

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

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

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

以上就是關(guān)于“React+Typescript常見的問題和技巧實例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。