主要讲下 NestJS 中 IOC 和 五种 AOP 的相关知识点，即 Middleware, Guard, Pipe, Interceptor, ExceptionFilter 的使用和概念 Provider 可以先创建下项目 nest new xxx providers 是可以注入的对象，我们可以把带有 @Injectable() 的 class 放到 Module 的 providers 里声明，因为 Nest 实现了 IOC，这样就会被它给识别到，从而实现依赖注入。 import { Module } from...

我们向后端发起 http 请求时，会要求指定数据传输的方式，通常情况下包含如下 5 种 query url param form-urlencoded form-data json 下面我会讲述之间的区别，并同时列举 axios 和 fetch 的写法。 url param 这个是最简单的，一般用在 GET 请求中，就是直接在 url 后面加上参数，例如： http://localhost:3000/post/7231564187255881765 这种一般用于请求某篇文章之类的。 axios `javascript...

NextJS 最近发布了 13.4 版本，使 App Router “稳定”下来，同时官方 CLI 也将 App Router 变更为默认且推荐的方案，但是 App Router 中引入了 React Server Components （以下简称 rsc ）的概念，且变更了相当多的 API，这使其学习难度更加陡峭。 服务端组件 在 App Router 中，NextJS 将会区分 Client Components和 Server Components， Server Components 是一种特殊的 React 组件，它不是在浏览器端运行，而是只能在服务器端运行。又因为它们没...

我也是最近刚接触到了这些知识，文章可能有些错误，希望大佬多多指点（ 对于学习 TypeScript 了解类型的逆变、协变、双向协变和不变是很重要的，但你只要明白类型的父子级关系，这些概念理解起来就会容易许多，因此在讲述这些之前我们必须先学会类型的父子级关系。 类型的父子级 首先明确一个概念，对于 TypeScript 而言，只要类型结构上是一致的，那么就可以确定父子关系，这点与 Java 是不一样的（Java 必须通过 extends 才算继承）。 我们可以看下面的例子: interface Person { name: string; ...

最近尝试学习了下 TypeScript 的高级应用，正好接触到了模式匹配，写一篇文章来记录下所学内容。 介绍 在 TypeScript 中 extends、infer 关键字是相当重要的，extends 除了可以约束类型以外，还可以进行模式匹配，然后通过 infer 声明变量来进行值的存储，例如下方定义的 Promise 类型： type Result = Promise; 我们要实现一个类型，把 suemor提取出来，使 Result 的值为 suemor，我们可以这样写： type...

完整代码: https://codesandbox.io/s/awesome-margulis-q2xibv?file=/src/index.ts 潜在的问题 在我们平常写代码的时候，可能需要对一个相同的数据进行各种转换，以便满足业务的需求，例如下方社交账号的例子: const social = { bilibili: '291833916', netease: '345345345', weibo: '436453345', } if (social[type]) { // do something } 这样可能可以满足...

本文采用 Jest + React Testing Library 进行单元测试 背景 近期在尝试阅读 arco-design 源码，发现自动化测试对于组件的编写是相当的重要，可自己却对其一窍不通，于是学习了下单元测试的基础，因此写篇博客来记录下。 环境搭建 考虑到 Jest 对于 React 并不能开箱即用，需要对 babel 进行一些配置且还有一些坑，为了简单起见，我们直接使用 cra 脚手架。 npx create-react-app react-jest --template typescript cra 已经帮我们配置好 Jest ...

随着技术栈的迭代，本篇文章已经严重过时，仅供简单的参考，如果跟着敲，会出现很多报错。 前言 最近阅读了下 vite 的文档，发现它有个库模式用来打包挺方便的，因而写篇博客记录下折腾过程。 基本配置 执行如下命令创建一个 React + TypeScript 的项目 pnpm create vite 删除 src 和 public 文件夹，创建 example 和 packages 文件夹，其中 example 存放组件示例或者调试组件，packages 存放组件源码。另外别忘了修改根目录 index.html script路径。 `...

距离我接触 react 已经过去几个月了，在此期间，关于如何避免重复渲染的问题一直困惑着我，因此今天就来聊聊这个话题。 在讲述如何进行性能优化之前，我们先来谈谈 React 为什么会重新渲染。 React 为什么会重新渲染 状态改变是 React 树内部发生更新的唯二原因之一。 import { useState } from "react"; const App = () => { let [color, setColor] = useState("red"); return ( <input v...

本文部分概念通过作者自己理解来叙述，可能存在一些错误，毕竟我也是萌新，还请多多指点～ 此前在我学习 js 的过程中一直有一个疑惑：其明明是一个单线程语言，为何会存在异步的概念？这不是自相矛盾吗？ 单线程的 JS 事实上 js 的确是单线程的，如果是只是从 js 这门语言上来说，异步的确是不存在的 。我们平日所谓的异步其实是依靠浏览器的两个或者两个以上的常驻线程来完成的（nodejs 则是 libuv）。按我的理解来说就是 js 其实是伪异步，其异步的实现是依靠运行环境。 任务队列和事件循环 new Promise((re...