React和TypeScript入门者常遇到哪些难题及实用技巧？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1643个文字，预计阅读时间需要7分钟。
React与TypeScript领域初学者的常见问题与技巧，创建一个联合类型的常量：`const NAME={ HOGE: hoge, FUGA: fuga } as const; keyof typeof NAME=HOGE | FUGA; 创建常量值的联合类型 typeof NAME[keyof typeof NAME]`
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Keyconst 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 来高亮显示并在列表中查看。
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型とする
在最后
如果您有任何建议或者这是一件毫无意义的事情，请随时发表评论。
本文共计1643个文字，预计阅读时间需要7分钟。
React与TypeScript领域初学者的常见问题与技巧，创建一个联合类型的常量：`const NAME={ HOGE: hoge, FUGA: fuga } as const; keyof typeof NAME=HOGE | FUGA; 创建常量值的联合类型 typeof NAME[keyof typeof NAME]`
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Keyconst 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 来高亮显示并在列表中查看。
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型とする
在最后
如果您有任何建议或者这是一件毫无意义的事情，请随时发表评论。