blog
blog copied to clipboard
sisterAn
瓶博：每日更新，前端前进
 ## any、unknown、never、void ### any `any` 类型用于描述一个我们根本不知道类型的变量，或者说可以是任意类型的变量，不作任何约束，编译时会跳过对其的类型检查 ```typescript let notSure: any // 可以被赋值任意类型 notSure = 'sisterAn!' notSure = 512 notSure = { hello: () => 'Hello sisterAn!' } // 它也兼容任何类型...
 ## ?. 可选链（Optional Chaining） ES11（ES2020）新增的特性，TypeScript 3.7 支持了这个特性 > 我们在 为什么要使用 TypeScript？ TypeScript 相对于 JavaScript 的优势是什么？中提到 TypeScript 与标准同步发展，并推进了很多 ECMAScripts 语法提案，比如可选链操作符（ `?.` ）、空值合并操作符（ `??` ）、Throw 表达式、正则匹配索引等，所以，这里介绍的符号大部分都是 ECMAScripts 规范的，TypeScript 特有的只有 `?:` 、...
 ## any 在 TypeScript 中，任何类型的值都可以赋值给 `any ` ， `any` 也可以赋值给任意类型，因此，`any` 类型通常也被称为 top type ```typescript let notSure: any // 可以被赋值任意类型 notSure = 'sisterAn!' notSure = 512 notSure = { hello:...
 ## 接口 与 类型别名 的异同点 ### 相同点 #### 1. 都可以描述对象或函数 ```typescript // 接口 interface Sister { name: string; age: number; } interface SetSister { (name: string, age: number): void;...
## TypeScript 中 const 与 readonly 的区别？ TypeScript 中不可变量的实现方法有两种： - 使用 ES6 的 const 关键字声明的值类型 - 被 readonly 修饰的属性 ### TypeScript 中 readonly TypeScript 中的只读修饰符，可以声明更加严谨的可读属性 通常在 `interface` 、 `Class` 、 ...
## 为什么要使用 Typescript？ 在没有 `Typescript` 以前，大部分项目都是使用原生 `Javascript` 开发。而 `Javascript` 天生是一门“灵活”的语言。所谓所谓“灵活”，表现在： - 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。 - 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定，也可以做一些神奇的操作 - 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改 - 函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当作参数或返回值 而这些灵活通常导致了 JavaScript 代码的肆无忌惮，比如拿数字和数组做求和运算，给函数传入不符合预期的参数等等而这些显而易见的问题编码阶段不会有任何错误提示。 ```js // 数字和数组做求和运算 const number = 1...
 ## CSS 选择器 想要了解伪类与伪元素，我们不得不提到 CSS 选择器，CSS 选择器是元素和其他部分组合起来，告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式 选择器的种类有： - 类型、类和ID选择器 - 标签属性选择器 - 运算符 - 伪类与伪元素 #### 类型、类和ID选择器 ```css h1 { } /* 类型选择器 */...
### 前言 webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。 对于 webpack4，建议从零开始配置，在项目初期，使用 webpack4 默认的配置。 接下来，本篇文章会列出所有适用于 webpack 优化打包速度的技术方案，并给出相应的限制，请在实际项目中分情况使用。如有任何疑问，请联系瓶子君。 ### 一、分析打包速度 优化 webpack 构建速度的第一步是知道将精力集中在哪里。我们可以通过 `speed-measure-webpack-plugin` 测量你的 webpack 构建期间各个阶段花费的时间： ```js // 分析打包时间 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp =...
收集 N 个自定义加载动画，希望对你有所帮助  源码：http://codepen.io/mr_alien/pen/FDLjg/  源码：http://codepen.io/MarcMalignan/pen/svLux/  源码： http://codepen.io/majci23/pen/NqdXvy/  源码：https://codepen.io/jh3y/pen/VwLdVoZ  源码：https://codepen.io/akhil_001/pen/gQwJPJ  源码：https://codepen.io/team/keyframers/pen/YzKjoev  源码：https://codepen.io/aaroniker/pen/XWWPbep  源码：http://codepen.io/rss/pen/lKBaJ/  源码：http://codepen.io/jonathansilva/pen/GhkAI/  源码：http://codepen.io/TheDutchCoder/pen/mgswv/  源码：https://codepen.io/CKH4/pen/ZGNyep/  源码：http://codepen.io/dghez/pen/Czuqn/  源码：...
最终实现效果：（从左到右分别是实心、带边缘色、圆角三角形）   ## 实心三角形 ### 步骤一：正方形 先画个正方形： ```html hi, sister .filled-triangle { width: 100px; height: 100px; border: 1px solid cyan; } ```  ### 步骤二：加大 border 将 border 的值加大，并设为不同的颜色...