React / Vue.js 等 + PHPStorm (WebStorm) 进行断点调试 作者: Chuwen 时间: 2022-02-11 分类: React 评论 ## 第 1 步，启动项目 启动项目的方式有很多种，你可以使用终端方式启动，还可以使用 IDE 自带的 **运行/配置 调试配置** 第 1 种方式，终端方式启动：  第 2 种方式，运行/配置 调试配置启动：  ## 配置“运行/配置 调试配置”  ## 将第 1 步的项目访问地址填进去  打断点、启动：  调试： 
React + MobX (mobx-utils) 实现深度监听值变化 作者: Chuwen 时间: 2022-02-10 分类: React 评论 相关链接： - https://github.com/mobxjs/mobx/issues/214#issuecomment-430218360 - https://github.com/mobxjs/mobx-utils#deepobserve ## 安装 mobx-utils mobx-utils GitHub 项目地址: https://github.com/mobxjs/mobx-utils `yarn add mobx-utils` 或者 `npm install --save mobx-utils` ## 使用 mobx-utils 此代码仅仅是示例代码 > ⚠️ 注意，根据自己的业务逻辑，如页面切换后调用 `disposer()` 去注销监听，否则**重复注册**深度监听会造成内存泄漏！ SettingsStore.ts: ```ts import {action, makeObservable, observable} from "mobx"; export interface ISettingsStore{ show: boolean; } export default class SettingsStore implements ISettingsStore { @observable public show: boolean = false; constructor() { makeObservable(this) } } ``` SettingsPage.tsx: ```ts const settingsStore = new SettingsStore() const disposer = deepObserve(settingsStore, (change, path) => { console.log(change) }) // 请注意，根据自己的业务逻辑，如页面切换后调用 disposer() 去注销监听，否则重复注册深度监听会造成内存泄漏！ // disposer() ``` --- ## 个人项目实践 1. 将**注册监听器**和**销毁监听器**放到一个文件导出来 2. 在需要用的页面(A 页面)，初始化完成后(如从 API 成功获取数据)，执行**注册监听器** 3. 在路由上监听，离开 A 页面事件，执行**销毁监听器**
TypeScript 泛型: 获取 key 对应的 类型 作者: Chuwen 时间: 2022-02-07 分类: TypeScript 2 条评论 相关链接参考： - https://stackoverflow.com/questions/49285864/is-there-a-valueof-similar-to-keyof-in-typescript - https://segmentfault.com/q/1010000040514337 - https://segmentfault.com/a/1190000023800536 实例： ```ts export type Student = { name: string age: number birth: { year: number month: number } } export const student: Student | null = null export function setStudentInfo<K extends keyof Student>(key: K, val: Student[K]) { student && (student.hasOwnProperty(key) = val) } ```
TypeScript 高级用法 -- Record 作者: Chuwen 时间: 2022-02-07 分类: TypeScript 评论 这里仅作为个人记录? 不做详细解析 我对 TS 不是特别了解，所以无法表达出，但是这种情况很多人应该会遇到过 相关资料参考： - https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype - https://juejin.cn/post/6844904066489778183 - https://www.jianshu.com/p/ff5ee22b2053 ### 会报出警告的代码: TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Student'. No index signature with a parameter of type 'string' was found on type 'Student'. > TS7053：元素隐式具有“any”类型，因为“字符串”类型的表达式不能用于索引“Student”类型。 在Student学生”类型上找不到具有“string”类型参数的索引签名。 ```ts export interface IStudentClass { student?: Student updatedStudentInfo(key: string, val: string): void } export type Student = { name: string age: number birth: { year: number month: number } } class StudentClass implements IStudentClass { student?: Student updatedStudentInfo(key: string, val: string) { this.student && this.student[key] && (this.student[key] = val) } } ```  --- ### 使用 `Record` : 一切正常 ```ts export type Student = { name: string age: number birth: { year: number month: number } } export interface IStudentClass { student?: Record<keyof Student, any> /** * 更新学生信息 * @param key * @param val */ updatedStudentInfo<K extends keyof Student>(key: K, val: Student[K]): void } class StudentClass implements IStudentClass { student?: Record<keyof Student, any> updatedStudentInfo<K extends keyof Student>(key: K, val: Student[K]): void { this.student && this.student.hasOwnProperty(key) && (this.student[key] = val) } } ``` 
React 将 svg 转换为 React 组件 作者: Chuwen 时间: 2022-02-07 分类: 其他分类 评论 SVGR：https://react-svgr.com/docs/cli/ ## 转换 将当前路径下的 `svg` 文件转换为 `tsx` 并以驼峰命名法明明 ```shell npx @svgr/cli --out-dir . --ext tsx -- * ``` 更多命令请看项目文档 ## 使用 直接导入就可以使用了