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

基本上它是由命名约定“组件名+Props”提供的，所以使用它。

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

TextField 的类型TextFieldProps可以被继承，但是如果你想使用它的 name 属性

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

常用注释前缀注解注释（FIXME、TODO等）

在 VSCode 中，可以通过设置一个插件如 todo-tree 来高亮显示并在列表中查看。

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 {hoge || "HOGE"};
};

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 && }
      {hoge}
    
  );
};

可选链 ?.
如果引用为 null（null 或 undefined），则表达式被缩短并返回 undefined 而不是错误。

空合并运算符 ??
如果左侧为空，则返回右侧的值，否则返回左侧的值。