React + Typescript领域初学者的常见问题和技巧(最新)

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领域初学者的常见问题和技巧的文章就介绍到这了,更多相关React Typescript常见问题内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    IE脚本错误如何做Web脚本错误解决技巧

    IE脚本错误如何做Web脚本错误解决技巧,,这个问题是由于这样的事实,对网页的HTML源代码和客户端脚本不正确的工作,如微软Jscript或Visual Basic脚本

    单反设置技巧|单反怎么调节

    单反设置技巧|单反怎么调节,,1. 单反怎么调节佳能相机全自动档指的是AUTO档(傻瓜模式),就是所有的摄影参数都由相机自动调整,用户只需要按下快

    lol瞎子快捷键|英雄联盟瞎子玩法技巧

    lol瞎子快捷键|英雄联盟瞎子玩法技巧,,英雄联盟瞎子玩法技巧有读取。要玩好必须知道盲僧玩法连招方式,我简单介绍几种常用的:1. QAAQ打出的

    求和快捷键技巧|求和的快捷方式

    求和快捷键技巧|求和的快捷方式,,求和的快捷方式方法一:快捷键alt+=快速输入求和公式进行求和操作技巧:1、鼠标先选择我们需要求和的单元格

    Word打印技术字使用技巧

    Word打印技术字使用技巧,,如果要打印文件,则没有打印机,打印机的计算机不安装Word。应该怎么做这里的文字由萧边编写的印刷技术。我希望你能

    保持笔记本电脑的一些知识和技巧

    保持笔记本电脑的一些知识和技巧,,笔记本的价格比前些年便宜很多,但和其他电脑相比还是贵的,所以我们在使用笔记本时一定要注意它的维护。下

    DIY也有计算电脑安装7原则的技巧。

    DIY也有计算电脑安装7原则的技巧。,,首先我们纠正一个概念,很多人会说是不兼容的DIY真的没有技术含量。现在我要告诉你,cuanji不等于DIY,这不

    超级书如何超这种购买技巧

    超级书如何超这种购买技巧,,最近,有些朋友说他们想买笔记本,不知道该怎么办超级书而且似乎听说超级大自然不是很好,是这样吗你能告诉我超级本

    Windows关键应用技巧

    Windows关键应用技巧,, 快速查看系统参数:同时按下windows键和pause 键就能打开系统信息窗口。当你在寻找电脑的故障根源,急于查看系统信