TypeScript 工具类型
属性修饰工具类型 Copy
type Partial<T> = {
[P in keyof T]?: T[P];
};
type DeepPartial<T extends object> = {
[K in keyof T]?: T[K] extends…
TypeScript 逻辑运算
条件类型# Copy
type LiteralType<T> = T extends string ? "string" : "other";
type Res1 = LiteralType<"linbudu">; // "string"
type Res2…
TypeScript 类型系统
结构化类型系统# Copy
class Cat {
meow() { }
eat() { } // 去掉 eat 不会报错
}
class Dog {
eat() { }
}
function feedCat(cat: Cat) { }
// 报错…
TypeScript 泛型
类型别名中的泛型 Copy
type Partial<T> = {
[P in keyof T]?: T[P];
};
interface IFoo {
prop1: string;
prop2: number;
prop3: boolean;
prop4…
TypeScript 类型编程
类型别名# 抽离一组联合类型：
Copy
type StatusCode = 200 | 301 | 400 | 500 | 502;
type PossibleDataTypes = string | number | (() => unknown);
const status…
TypeScript 类型基础
原始类型 Copy
const name: string = 'linbudu';
const age: number = 24;
const male: boolean = false;
const undef: undefined = undefined;
const nul:…
前端常用设计模式
抽象行为（behavior）模式 图片预览
我们的任务是这样的，给一个固定列表中的图片元素增加 “预览” 功能。在线演示
对应的 HTML 页面如下所示：
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset…
组件封装的艺术
封装性、正确性、扩展性、复用性 轮播图
在线演示
1. 确定 UI 组件的 HTML 结构
Copy
<div class="slider">
<ul>
<li class="slider__item--selected">
<img src="https:…
Webpack 性能调优
Webpack 的优化瓶颈，主要是两个方面： Webpack 的构建过程太花时间 Webpack 打包的结果体积太大
构建过程提速策略
不要让 loader 做太多事情 —— 以 babel-loader 为例
最常见的优化方式是，用 include 或 exclude…
文本溢出截断省略
单行文本溢出省略 核心 CSS 语句
overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行） text-overflow: ellipsis；（规定当文本溢出时…
Tricks for Vue Composition API
Generically Typed Vue Components Defining components in Setup Generic props Using SFC as a base component Extracting Prop Types from SFC…
HTTP API 认证授权术 [转载]
原文：陈皓 - https://coolshell.cn/articles/19395.html 我们知道，HTTP 是无状态的，所以，当我们需要获得用户是否在登录的状态时，我们需要检查用户的登录状态，一般来说，用户的登录成功后，服务器会发一个登录凭证（又被叫作 Token…
Tips for Reactivity in Vue
Optional Reactivity# Copy
import { Ref, ref } from 'vue';
type MaybeRef<T> = Ref<T> | T;
// example usage
// ✅ Valid
const raw: MaybeRef…
Shallow Dive into Injections in Vue
Refresh Library authors frequently use provide/inject API to transmit complex contextual information to their components and composition…
Async Function in Vue3 setup()
Problem When using asynchronous setup(), you have to use effects and lifecycle hooks before the first await statement. (details)
Copy
import…
浅析依赖管理
npm npm 是最早的依赖安装命令行工具，以下是 npm 如何安装依赖的步骤：
发出 npm install 命令 npm 会向 registry 查询模块压缩包的网址 下载压缩包，并将其存放在 ~/.npm 目录下 将压缩包解压到当前项目的 node_modules 目录中…
CSS 渲染性能优化
content-visibility# Improve initial load time by skipping the rendering of offscreen content.
通常，许多网站在其页面上有很复杂的图形界面，并且一些内容可能会超出用户浏览器视野范围之外…
React Patterns
Provider Pattern Copy
import React, { useState } from "react";
import "./styles.css";
import List from "./List";
import Toggle from "./Toggl…