- 博客(39)
- 收藏
- 关注
RSS订阅原创 ts3.9版本特性
ts3.9版本特性Uncalled Function Checks in Conditional Expressions先前的3.7版本中，只能在if条件代码块中进行一个函数是否调用的判断。现在版本完善了在三元运算符中的情况。Parsing Differences in Optional Chaining and Non-Null Assertions在可选链与非空断言联合使用时，编译结果的改变//source codefoo?.bar!.baz;//3.9以前(foo?.bar).baz
2021-10-19 10:14:24
184
原创 ts3.8版本特性
ts3.8版本特性Type-Only Imports and Export只导入、导出类型。import type { SomeThing } from "./some-module.js";export type { SomeThing };ECMAScript Private Fieldses规范的private 成员变量class Person { #name: string; constructor(name: string) { this.#name = name;
2021-10-18 09:37:09
253
原创 一文入门babel
babel之路的起点开始的起点因为最近开始学习babel，我想简单了解一下一个编译工具工作原理。又因为编译功能这一块来说还是相对抽象了一点。所以我找到了一个学习的项目。学习项目：https://github.com/jamiebuilds/the-super-tiny-compiler说是一个超小的编译器不如说是一个简单编译器工作原理的教学，毕竟官网就有这么一句话：This is an ultra-simplified example of all the major pieces of a m
2021-10-17 19:07:20
438
原创 ts3.7版本特性
ts3.7版本特性就本节而言，新增的这些语法功能还是非常实用的，让我们不再需要等待浏览器对esxxx版本的支持，提前享受到高效语法的快乐。Optional Chaining（可选链）let x = foo?.bar.baz();等价于let x = foo === null || foo === undefined ? undefined : foo.bar.baz();我们平时可能会经常编写以下的代码// Beforeif (foo && foo.bar &
2021-10-17 09:50:08
229
原创 ts3.5版本特性
ts3.5版本特性优化了ts的类型检查速度和--incremental的速度https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-5.html#speed-improvements内置工具增加了Omittype Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;高阶函数调用构造函数在3.4中我们讲到在
2021-10-15 09:11:39
141
原创 ts3.4版本特性
ts3.4版本特性Faster subsequent builds with the--incrementalflag--incremental其实是和--tsBuildInfoFile联合起来使用的，--incremental是为我们上一次的compile信息做一次硬缓存，在我们下一次修改项目时会进行信息比对然后减少编译的消耗。--tsBuildInfoFile指定我们的缓存文件的目录，相对于cmd shell的相对路径吧。同时--outFile也会影响--tsBuildInfoFile的文件位置。
2021-10-14 10:44:28
199
原创 ts3.3版本特性
ts3.3版本特性Improved behavior for calling union types可以调用类型的联合类型的增强。//3.3以前的版本type Fruit = "apple" | "orange";type Color = "red" | "orange";type FruitEater = (fruit: Fruit) => number; // eats and ranks the fruittype ColorConsumer = (color: Color) =&
2021-10-13 08:36:29
93
原创 ts3.2版本特性
ts3.2版本特性strictBindCallApply一项新的严格模式，用于检查call与apply的绑定,主要通过下面接口加上函数重载实现interface CallableFunction extends Function { apply<T, R>(this: (this: T) => R, thisArg: T): R; apply<T, A extends any[], R>(this: (this: T, ...args: A) =>
2021-10-12 09:20:43
146
原创 ts3.1版本特性
ts3.1版本特性映射类型与元组和数组对数组/元组的映射后仍可以返回一个数组/元组type MapToPromise<T> = { [K in keyof T]: Promise<T[K]> };type Coordinate = [number, number];type PromiseCoordinate = MapToPromise<Coordinate>; // [Promise<number>, Promise<number>]
2021-10-11 09:37:43
87
原创 ts3.0版本特性
ts3.0版本特性Project References（项目引用）这是3.0提供的一个用于把我们的ts项目更加细粒话的功能。By doing this, you can greatly improve build times, enforce logical separation between components, and organize your code in new and better ways.实现这个功能的主要配置是references，与compilerOptions同级的顶
2021-10-10 10:08:07
289
原创 ts2.9版本特性
ts2.9版本特性Supportnumberandsymbolnamed properties withkeyofand mapped typestypescript 2.9 为映射类型的key增加了number与symbol类型。所以keyof T 返回 string|number|symbol类型编程中的keyof T就是for...in所以一个 object type 中keyof有以下特点：[props: string] : xxx 与 [ppp: number]: xxx 不能同时使用
2021-10-09 12:50:37
109
原创 ts2.8版本特性Conditional Types
ts2.8版本特性这个版本的Conditional Types，提供的功能真的非常强大。而且在我们的编程中非常常用。在我看来2.8中比较有突破性的新特性都是围绕着Conditionnal Types来实现的，同时为以后优秀的功能也埋下了伏笔。Conditional Types（条件类型，类似于if…else）条件判断类型，提供了更加图灵完备的类型编程T extends U ? X : YT 能够分配给 U 返回X类型，否则Y类型针对这个特性，有这样一段话For a given infe
2021-10-08 10:21:26
309
原创 ts2.7版本特性
ts2.7版本特性这个版本增加了比较实用的!annotation、到4.5版本（本文记录时）都在用的tuple修正形式、class相关的推断增强，以及好用的--esModuleInteropConstant-named properties对象属性可以采用常量进行声明，也可以使用Symbolconst Foo = "Foo";const Bar = "Bar";let x = { [Foo]: 100, [Bar]: "hello"};unique symbolts2.7新增
2021-10-06 09:27:09
385
原创 ts2.6版本特性
ts2.6版本特性 我认为Strict function types，给函数签名带来的类型安全检查是该版本最重要的，虽然他带来的是编码上的不方便，但是他给我们保证了更高的代码质量。Strict function types在严格函数类型模式下(--strictFunctionTypes)，函数参数位置会被用于contravariant 而不是 bivariant检查.这里比较重要的概念逆变与协变：What are covariance and contravariance?.这里是我对逆变协
2021-10-05 08:11:45
108
原创 ts2.5版本特性
ts2.5版本特性Optionalcatchclause variables可以忽略catch (e: Error)参数的输入let input = "...";try { JSON.parse(input);} catch { //catch (e:Error) // ^ Notice that our `catch` clause doesn't declare a variable. console.log("Invalid JSON given\n\n" + input);}
2021-10-04 08:55:02
257
原创 ts2.4版本特性
ts2.4版本特性 这一篇对于泛型推导的完整度又进行了一个提升Dynamic Import Expressions支持ecma规范的import动态导入功能，将--target设置为esnextString Enums支持了字符串的枚举enum Colors { Red = "RED", Green = "GREEN", Blue = "BLUE"}//emit.jsvar Colors;(function (Colors) { Colors["Red"] =
2021-10-03 09:46:28
85
原创 ts版本备忘录2.3
Ts2.3前文链接原文链接对我而言这篇对于generic的改动更加重要Generators and Iteration for ES5/ES3语法支持Generator，与新增Iterationinterface类型interface Iterator<T> { next(value?: any): IteratorResult<T>; return?(value?: any): IteratorResult<T>; throw?(e?: an
2021-10-01 08:29:16
129
原创 ts版本备忘录2.2
前文链接原文链接 这一篇仅仅记录了我之前不太常用的特性，还有一些我们平时在用却不知道什么时候加入的特性Ts 2.2版本新特性Support for Mix-in classes（混入class支持）概念mixin constructor type（混入构造器类型）：由构造器标签new ()，构造器参数(… rest形式)...args: any[]，和一个实例返回值类型X表示interface Person{ age: number}new (...args: any[]) =
2021-09-30 09:52:00
211
原创 Ts 2.1版本新特性
前文链接原文链接早些时间就听说了lookup types但是一直不知道他究竟是个什么，2.1版本我终于要知道他的庐山真面目了。keyofand Lookup Typeskeyof T生成的type 是 string的subtypelookup type：一种看上去很像属性访问，但是[]内写入一个type称为lookup type。interface Person { name: string; age: number; location: string;}type P2 = Pe
2021-09-29 11:41:01
200
原创 ts版本特性备忘录2.0
前文链接原文链接 ok，继续衔接1.x的特性进行查漏补缺，虽然之前看的特性可能会被删除或者补充，但是查阅官方文档的时候总是有新的收获。虽然文中大量的例子都是来自官方文档，但我也有做一些简答的修改让其变得更加易懂。2.0Null- and undefined-aware types检查器在2.0以前null与undefined可以分配给任何类型说白了就是以前对undefined 和 null的检查不够严格，现在给他们一个分别一个类型对应Undefined 和 Null--strictNul
2021-09-28 12:59:49
238
原创 typescript中的协变、逆变
typescript中的协变、逆变 想要写出更加优秀的类型编程co-variance（协变）contra-variance（逆变）这类知识是我们必须掌握的。这篇记录也仅仅是为了方便之后哪天这块知识在应用过程中出现问题后，能够根据此篇，来快速定位编写代码中的问题。这篇也仅仅是一些学习资料的记录。文中许多表述，都是个人的理解毕竟本人学历较低英语水平较差，资料中的表述多有理解不充分的地方。资料的源链（需要科学上网）原文链接首先我们需要知道以下的概念。在泛型编程中泛型参数会影响类型泛型的关系。出于t
2021-09-20 21:43:25
341
原创 typescript 版本备忘录
原文链接1.X 版本列表1.1包可见性(module visibility) ？？？ module namespace？一般用.d.ts描述1.3protected修饰符只允许当前类以及子类拓展使用修饰符指定的field，methodtuple元组限制长度以及索引对应的类型的数组1.4union type(联合类型)一系列的类型更严格的泛型let declaration： let 声明constdeclaration：const 声明let andconstare only
2021-09-19 15:32:45
350
原创 一文解决我的prototype难题（原型链）
原文链接 有的时候学的越多越发现自己懂得越少，本来的我认为js基础部分应当是没什么问题了。但是当我好奇地使用tsc工具将ts代码转换成js后我知道我又该翻开那本红宝书了，而现在的我也不是曾经那个拿着一本书从头翻到尾，回头一想却不曾在脑中留下半点知识的痕迹。我抄起书本翻到对象相关的第八章，打开md记录下自己的对知识的理解。这篇文章的主要目的是帮助理解何为原型链，我们用它做什么，在此之前最好是确保自己对引用数据类型和值类型有一定理解。js对象使用new关键字获得const obj = new O
2021-09-17 20:59:06
207
原创 什么是三次握手
本文任然是对于当前阅读的一个知识梳理，衔接前文了解在地址输入栏中简单的按下一个回车背后复杂的故事，上文讲到通过建立socket从DNS服务器拿到域名解析后的地址ip，但是该过程是一个基于udp协议的传输。而我今天梳理的是一种基于tcp协议的传输。基于udp的传输：只负责包的发出和接受基于tcp的传输：在udp的功能基础之上，提供了一些丢包判断的机制，以及丢包重传的机制。在网络传输的过程中，往往会发生一些包丢的问题，基于tcp协议的网络传输更加严谨相比于基于udp的传输，更加严谨，它提供了一些丢.
2021-09-11 16:01:57
127
原创 在浏览器地址栏输入地址按下回车后...
如何让阅读后进入脑中的知识点更加有体系，如何让抽象的知识变的更加活灵活现，阅读后的梳理可以让我们更好地做到这一点。同时实践能够让我们更加清楚地了解新知识的应用场景。这篇便是我学习网络的初章。了解在地址输入栏中简单的按下一个回车背后复杂的故事在了解本文主题之前我们不妨花上小几分钟简单阅读一下一下的内容，或许会有新的收获1.浏览器的各种访问目标统称为URI2.尽管浏览器能够解析网址并生成HTTP消息，但它本身并不具备将消息发送到网络中的功能，因此这一功能需要委托操作系统来实现3.仅凭32位 的IP.
2021-09-09 20:19:38
960
原创 mysql 你必须了解的知识
数据库的简单概念DBS（database system） ：数据库与数据库管理系统的总称DB（database） ：数据存放的位置DBMS（database manage system）：管理数据库的应用程序1.你并不直接访问数据库；你使用的是DBMS，它替你访问数据库。2.MySQL是一种DBMS，即它是一种数据库软件。3.SQL是一种专门用来与数据库通信的语言。4.只有数据库知道SELECT语句中哪些列是实际的 表列，哪些列是计算字段。从客户机（如应用程序）的角度来看，计算 字段的数据
2021-09-06 17:06:14
282
原创 rollup初体验
初次学习rollup 因为最近在学习vite的使用和一些与开源相关的知识，最终还是打算把这个技术栈（债）补上????为什么要学习rolluprollup作为一款优秀的打包工具，同时提供cli、配置文件、js脚本执行的打包方式同时它也实现了tree-shaking的支持虽然在大型应用开发过程中的开发体验不及webpack，但是它用在打包一些小的工具库、开源包方面十分优秀不过值得一提的是vite在打包方面采用了rollup，同时vite对rollup提供的接口进行了些许扩展，并且部分的rol..
2021-05-31 20:39:46
241
原创 TS扩展全局变量类型推导
TS扩展全局变量类型推导 写这篇文章是因为我在学习vben项目时，在global文件的定义时出现了种种问题，但是在网上又不能及时找到合适的对策前提概念声明合并(Declartion Merging)全局变量如何定义？操作然后我们定义一个global.d.ts文件这是我们定义好了全局的一些变量推导，但是我们ts的检查显示我们出现了一些问题，以下为具体的报错信息Augmentations for the global scope can only be direct...
2021-05-20 16:20:08
4176
1
原创 使用typescript进行react-i18next类型推导
在create-react-app 版本为4.0.3 使用typescript进行react-i18next类型推导首先按照官方文档选择一种适合当前项目的定义方式// import the original type declarationsimport 'react-i18next';// import all namespaces (for the default language, only)import ns1 from 'locales/en/ns1.json';import ns2
2021-05-06 10:42:14
702
原创 create-react-app 4.0.3 结合 tailwindcss2.x
在create-react-app 版本为4.0.3 结合tailwindcss2注意：本人测试时create-react-app 版本为4.0.3,在往后的版本中，对于postcss8可能已经支持最近在准备与其他同学接手一个简单的开源项目，其中需要在项目中增加一个昼夜主题切换的功能这时我想到了两套方案：两套css更换 css 变量值但是作为一个css功力并不是难么强的前端工程师，这使得我无比头疼，因此我决定采用一个css库，在四处转悠之后发现tailwindcss具有对昼夜更换功能的支持，
2021-04-30 18:37:15
340
1
原创 snabbdom核心代码阅读
title: 起步-snabbdomdate: 2021-02-01 13:30categories: - 学习tags: - 源码cover: https://blog-zgz.oss-cn-hangzhou.aliyuncs.com/pictureForBlog/acg%2Cgy_30.jpg听说vue的virtualDOM部分的设计有借鉴snabbdom?正好现在水平也不够去阅读vue的源码，正好用snabbdom来联系思维与阅读能力，为未来我阅读vue打下一点小台.
2021-02-01 16:52:20
213
原创 mustache源码解读
1. mustache 以前js大批量生成 html的方式// 1. dom for(let i = 0; i < 10 ; i++) { const div = document.createElement('div') div.innerHTML = i document.body.appendChild(div)}// 2. 字符传拼接let htmlStr = ''for(let i = 0; i < 10; i++) { htmlStr +=
2021-01-27 19:13:45
482
原创 mitt工具解读
首先贴上代码export type EventType = string | symbol;export type Handler<T = any> = (event?: T) => void;export type WildcardHandler = (type: EventType, event?: any) => void;export type EventHandlerList = Array<Handler>;export type WildCar
2021-01-17 21:25:30
1219
原创 promise与异步回调
仍然是你不知道的js（中卷）阅读后感异步与回调众所周知在浏览器与服务器通讯过程，浏览器的执行过程中异步的操作都是非常重要的一部分，我们通常使用回调来处理异步操作例如下面的代码：setTimeOut(foo, 1000)但是很多时候我们经常需要顺序地处理多个回调函数下面模拟一下类似情况：使用一个非链式的ajaxajax({ ... successful() { ...处理当前服务器返回的数据 ajax({ ... successful() { ...处理第二次服
2021-01-07 11:51:18
174
原创 2020-12-29（对象）
对象声明js中对象的两种声明方式var obj = {};var obj = new Object();null 不属于 object尽管 typeof(null) 返回一个 “object”但是null并不是一个object,不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型，null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“object”。“类”String,Number,Bool
2020-12-29 12:16:18
95
原创 2020-12-28（this指向）
this指向问题1.首先需要明确的就是this 的绑定和函数声明的位置没有任何关系， 只取决于函数的调用方式2.当一个当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文，this就是记录的其中的一个属性会在函数执行的过程中用到3.函数中的一个又一个变量声明就好比是在函数中定义了一个又一个的成员下面可以分析一下this的四个主要的绑定方式1.默认的绑定方式function foo() { //严格模式 报错 console.log(this.a)}var a = 2;f
2020-12-28 10:48:17
73
原创 2020-12-26
你不知道的JS（上卷 二）纯个人学习记录昨日补充：在昨天的初步深入中留下了一些无法理解的问题，通过资料查阅和今天获取的新知识对昨天留下的问题进行补充词法作用域 与 动态作用域词法作用域（静态作用域）：表示编写代码时所处于的作用域范围动态作用域：函数执行时进行作用域判断首先是词法作用域 function foo() { console.log(a) } function another() { var a = 3; foo(); //在执行到此处调用foo函数， 打印
2020-12-26 21:27:45
66
原创 2020-12-25
你不知道的JS（上卷 一）纯个人学习记录编译器： 代码分析引擎： 执行，编译作用域： 维护收集变量1.1编译器有话说LHS（left-hand-side）RHS（right-hand-side）谁的左右边？可以理解为赋值号左右不同的查询操作例如： var a = 12拆分为： var a ; a = 12在赋值前先确定 a 变量是否存在，如果a不存在，会根据严格模式/非严格模式 的情况产生报错 或者 生成 window.a 两种结果，这就是 LHS 对于赋值左侧的操作。
2020-12-25 16:29:52
63
原创 浅谈border-radius对border的影响
浅谈border-radius对border的影响**border-radius的作用 **CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。**css3新增border-radius用于更改border四个角的半径大小，可以对四个角设置属性：border-top-le...
2019-12-23 21:09:25
1173
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人