0326 今日总结
关键词：
今日工作
问题，原因，解决方式，优化，巧妙实现，新知识
问题1：React + TS，如何获取组件的 props 类型；
先说答案：
tsx
type AA = React.ComponentProps<typeof CodeBlock>;
type BB = React.ElementRef<typeof CodeBlock>;查看示例：
tsx
type RefProps = {
highLight: () => void;
}
type CodeBlockProps = {
title: string;
}
const CodeBlock = React.forwardRef<RefProps, CodeBlockProps>((props, ref) => (
<button ref={ref} className="CodeBlock">
{props.children}
</button>
));
// 获取组件的 props
type AA = React.ComponentProps<typeof CodeBlock>;
// 获取 使用 forwardRef 包裹的组件的 ref props
type BB = React.ElementRef<typeof CodeBlock>;
type CodeRefProps = React.ElementRef<typeof CodeBlock>;
type CodeProps = React.ComponentProps<typeof CodeBlock> & {
ref: RefObject<CodeRefProps>;
};
type EE = CodeProps['ref']['current'] // 这里的结果是 ref 类型 或 null，所以不能继续往后取属性了
const a: EE;
const b = a?.highLight() // ...可以提示 ref 的类型参考资料：
问题2：npm 切换到 pnpm 注意问题
近期公司项目切换包管理器 npm 到 pnpm，出现点问题，记录一下；
类似遮掩的错误：ERR_PNPM_FROZEN_LOCKFILE_WITH_OUTDATED_LOCKFILE ，实际上是因为切换了 包管理器，同时生成了 pnpm-lock 文件和旧的 package-lock.json 文件，导致 pnpm 执行的时候不知道选择哪个作为依据，删除旧的 package-lock.json 即可
问题3：antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位
答案：https://ant-design.antgroup.com/components/table-cn
tsx
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
// 如：下面的代码
ellipsis: {
showTitle: false,
},
render: (address) => (
<Tooltip placement="topLeft" title={address}>
{address}
</Tooltip>
),
},同时，在使用 Tooltip 组件的时候，若在 Modal 框内使用，需要注意层级，可以设置 z-index，一般 antd 的 Modal 框层级是 1000；
今天测试就提了一个 bug，嵌套的 2 个 Modal 里的 Tooltip 内容，显示在中间层被覆盖了，设置 z-index 即可；
好文推荐
有感好文，专题好文
TOP3
英文推荐
- props drilling(props钻取) - 掘金 学习知识点 props drilling
其他好文
项目/博客推荐
值得学习 作者/项目/工具等
博客
- 天高任鸟飞，海阔凭鱼游 - 飞书云文档 前端重要知识点总结，可用于复习，面试；来源于小红书；
- ChoDocs | 一站式前端内容网站，包括学习路线、知识体系
项目
技术点-前端 word 在线编辑和导出
astro 技术搭建博客
- Captain Awesome | Web Ninja
- satnaing/astro-paper: A minimal, accessible and SEO-friendly Astro blog theme
- Astro 搭建个人博客 | 一颗小树
- 开源项目 | GuoguoDad/jd_mall: 🔥🔥高仿京东商城App，具有完整的结构，代码整洁规范，结构清晰，集成Flutter模块，具备React-Native热更功能... 同款Flutter版本（ https://github.com/GuoguoDad/jd_mall_flutter.git ）
- 搭建你的 Astro 博客 | Docs
- austin2035/blog: 分享我经历过的事情、学习过的知识、发现的好东西。
好看的 portfolio 和博客
工具
一个浏览器插件，允许在浏览器的侧边栏打开网页 | Sidebrowser - Browse Seamlessly on the Side.，安装地址
- 使用 homebrew bundle 安装所有的 GUI
- 使用 nix 管理所有的命令行应用 https://nix.dev
- 使用 dotfiles 管理各种配置。
- 相关资料：
windows 磁盤分析工具 | SpaceSniffer 分析了一下 windows 电脑的内存占用，准备清理一下 C 盘，发现 yarn 这个包管理器，占了30G，内存占用榜排名第二！！！
windows 升级 11
我的电脑无法升级 11，查了一下是硬件问题：