泛型是什么

泛型解决什么问题

在ts中我们需要声明类型，之后在使用这个变量的时候要求一直是这个类型，如果我们不确定类型的时候，我们可以使用any，但是any并不能保证之后使用该变量的时候它依旧是同一个类型。这类适用于多种类型的声明的需求就是泛型要解决的。泛型使用一个变量来存储声明的类型，之后也都使用该变量指代的类型。

类型变量

类型变量有点像正则的\1, 捕获变量，代表上一个捕获的结果。

1
2
3

function identity<T>(arg: T): T {
    return arg;
}

T就是一个类型变量，当我们给他一个具体的类型之后，T都代表该类型

1

let output = identity<string>("myString");  // type of output will be 'string'

这里 T 为类型 string，或者利用类型推论

1

let output = identity("myString");  // type of output will be 'string'

使用数组类型变量

假设我们知道 参数的类型是数组，但是数组的元素是什么都可以。在不声明是数组的情况下，直接使用length属性是会报错的。
所以我们必须声明是数组，但是我们不知道元是什么，这里就可以用类型变量来代替。

1
2
3
4
5
6
7
8
9
10

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

泛型函数 & 泛型接口

gitlab 配置 mac/win 系统 runner，win 有问题【解决】

gitlab 的 runner 就是触发 ci/cd 之后，执行 gitlab-ci.yml 里的脚本的容器。一般呢，都是 docker。我最近有个 electron 的项目，想做 cicd 的自动打包，需要 mac 和 win 环境，于是先把自己的电脑配置为 runner 跑一次。

Electron 入门笔记

Electron简介

这个框架可以让你使用javascript开发Mac，Windows，Linux客户端。基本上可以理解为一个你自己的浏览器，访问本地的页面；而超出浏览器的部分是，你可以使用node拥有的能力。

Runtime 运行时

Electron凭什么可以让js拥有开发客户端的能力？这就要从js的运行时说起，什么是运行时呢？

Js runtime就是用来执行JavaScript代码用的，为其提供了一个运行时环境，提供解释/编译、自动内存管理（GC）、对象模型、核心库API等功能。

我们熟悉的两个运行时分别是浏览器和Node

浏览器运行时

前端开发最基本的就是运行在浏览器中的html、js，简单的提供可视化的UI和交互给用户，但是所有的一切，都是局限于浏览器内的，换句话说你最多只能做浏览器允许你做的事情，前端页面无法绕过浏览器直接在你的电脑里搞事情。而浏览器是一个沙盒环境。

Node 运行时

开始开发需要什么

文档

官方文档：https://electronjs.org/docs
中文资料集合：https://github.com/amhoho/electron-cn-docs
electron英文资料大集合： https://github.com/sindresorhus/awesome-electron

typescript 学习笔记二： 接口

接口用来定义复杂的类型（比如对象，函数），描述复杂类型应该是一个什么样子的“鸭子”。可以简单理解为期望获得一个具有什么样类型的对象（当然不止对象类型）。

typescript 学习笔记一： 类型

最近我新开了一个electron项目，考虑到可能会持续迭代，以及客户端线上bugfix是没有前端页面方便的，因此需要这个项目尽可能的是一个稳定可靠的项目，最终我决定采用typescript来约束开发者，短期会增加一些学习成本，长期来看维护成本是有所减少的。那么就从头学习一下typescript吧。

学习资源：

• typescript 入门教程
• typescript handbook（config部分）

React Hooks 终于进稳定版本了！

React 终于在16.8版本加入了期待已久的hooks特性。

什么是Hooks？

Hooks的功能就是复用逻辑，甚至复用包括state的逻辑。

以往我们如果有跟state有关的逻辑，只能写在class组件中，纠缠在各个生命周期里，并且无法复用，样版代码很多。

有了hooks，你不在需要这样做了，你可以直接在fuction组件里复用写好的跟state相关的逻辑，代码量大大减少。每一次这个组件function被执行的时候，hooks都会被执行，这大概是它最像“钩子”的点吧。

使用quickLink来提升用户体验

quickLink是什么

quickLink是谷歌实验室推出的一个库，这个库实现了在浏览器的空闲时间预先拉取页面内的链接，加速后序页面的加载速度的功能。

微信小程序右上角···转发

官方文档

这个转发功能是页面独立的，什么意思，就是微信小程序每一个页面的右上角的转发功能都是需要你配置才会出现。如果你有3个页，每个页都需要转发功能，那么你每个页面都需要配置下。

hexo-blog 日志

起因

原本旧的 blog 是 16 年开始学习前端的时候搭建的，纯 html，css，js 写的静态页面，当时这样选择是想多给自己一些手写基础代码的机会来逐渐熟悉前端基础。时过进迁，目前写 blog 的需求已经回归到写作本身了，这样旧的 blog 页带来的写作成本，导致我经常性在印象笔记、有道云笔记甚至本地 markdown 编辑器来码字，并且积攒在本地，难以及时更新到 git。综上所述，旧的 blog 不再适合当前的场景，因此决定迁移为 hexo 方式。

【译】5分钟入门CSS Grid网格布局

原文地址

简短介绍一下web布局的未来