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型とする
在最后
如果您有任何建议或者这是一件毫无意义的事情,请随时发表评论。
React + Typescript领域初学者的常见问题和技巧的更多相关文章
- Python初学者的一些编程技巧
#####################喜欢就多多关注哦######################### Python初学者的一些编程技巧 交换变量 ? 1 2 3 4 5 6 7 8 9 ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- 给Python初学者的一些编程技巧
展开这篇文章主要介绍了给Python初学者的一些编程技巧,皆是基于基础的一些编程习惯建议,需要的朋友可以参考下交换变量 x = 6y = 5 x, y = y, x print x>>&g ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- React + TypeScript + Taro前端开发小结
前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- React Native底|顶部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
随机推荐
- Python入门-系统模块time
1.time模块 时间戳:1970年,1月1日开始时间元祖:包含日期,时间,保存日期结构的元祖对象格式化时间日期:按照指定的标记进行格式化处理 时间戳 import time time_num = t ...
- thymeleaf的具体语法
thymeleaf模板引擎是什么?请点击我查看 文章目录 thymeleaf模板引擎是什么?请点击我查看 代码 该实例代码延续[thymeleaf模板引擎](https://blog.csdn.net ...
- Java 在Word指定段落/文本位置插入分页符
在Word插入分页符可以在指定段落后插入,也可以在特定文本位置处插入.本文,将以Java代码来操作以上两种文档分页需求.下面是详细方法及步骤. [程序环境] 在程序中导入jar,如下两种方法: 方法1 ...
- NodeJs学习日报——day3
// 导入模块 const http = require('http') // 创建web服务器实例 const server = http.createServer() // 为服务器实例绑定req ...
- 2021.08.09 P6037 Ryoku的探索(基环树)
2021.08.09 P6037 Ryoku的探索(基环树) P6037 Ryoku 的探索 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.树的性质 2.基环树的性质 ...
- Go汇编语法和MatrixOne使用介绍
目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...
- 有意思的CVE-2022-0337复现
前言 前两天在刷tw,看到了个比较有意思的一个CVE漏洞,价值奖励是10000美刀,比较好奇的是价值10000美刀的漏洞是什么样子的,漏洞利用就是需要在浏览器中进行用户交互才能触发该漏洞,但由于 Wi ...
- 推荐系统 TOP K 评价指标
目录 符号说明 示例数据 一.Hit Rate 二.Recall 三.NDCG 符号说明 \(top\_k\): 当前用户预测分最高的k个items,预测分由高到低排序 $pos$: 当前用户实际点击 ...
- 异步请求与中断 ( XHR,Axios,Fetch对比 )
随着AJAX技术的诞生,前端正式进入了局部刷新和前后端分离的新时代,最初的服务请求技术是XHR,随着技术发展和ES6的诞生,jquery ajax,axios,fetch 等技术的产生让前端的异步请求 ...
- HashMap中红黑树插入节点的调整过程
如果有对红黑树的定义及调整过程有过研究,其实很容易理解HashMap中的红黑树插入节点的调整过程. "红黑树定义及调整过程"的参考文章:<红黑树原理.查找效率.插入及变化规则 ...