• 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 弱。要修复的功能。
    注意: 注意: 在强调实现的意图以及为什么要这样写的时候写。
    哈克: 我想重构。
    审查: 需要审查或查看。
    警告: 当心。

    什么是假的

    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型とする

    在最后

    如果您有任何建议或者这是一件毫无意义的事情,请随时发表评论。

  • 相关阅读:
    nvm的简介、安装、使用(简单明了)
    Hbase之SnapShot快照操作
    微信小程序 校园周边美食商城分享系统
    计算机毕业设计springboot+vue基本微信小程序的健康管理系统
    【LeetCode】301.删除无效的括号
    【毕设项目推荐】学长做过的那些有趣的毕设项目 - 毕设项目分享 (单片机 嵌入式 物联网 stm32)
    7年坚定投身“高清头显”,纳德光学聚焦打造高清头显领导品牌
    上游模式用于实验室用冷冻机压力和真空度的高精度控制
    redis的key超时策略和key淘汰机制(面试题详解)
    ObjectMapper 类处理数据转换(json字符床转集合和对象)
  • 原文地址:https://www.cnblogs.com/kiwis2/p/16386936.html