Merge branch 'master' of https://github.com/programmerZbb/notes

programmerZbb · Jul 14, 2020 · 3dcd99c · 3dcd99c
2 parents fbe61e6 + 76f411d
commit 3dcd99c
Show file tree

Hide file tree

Showing 6 changed files with 282 additions and 6 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/picture/.DS_Store b/picture/.DS_Store
diff --git a/picture/tsPic/动态和静态.jpg b/picture/tsPic/动态和静态.jpg
diff --git a/react+ts写一个类ant-desing库.md b/react+ts写一个类ant-desing库.md
@@ -203,6 +203,27 @@ inputEle.current.focus()
 
 1. 所有的 hook 都需要写到函数组件里面，不能写到函数外边
 
+# 开始组建
+
+## 1. 完成一个组建库需要考虑的问题
+
+* 代码结构
+* 样式解决方案
+* 组件需求分析和编码
+* 组件测试用例分析和编码
+* 代码打包输出和发布
+
+## 2. 样式解决方案
+
+采用less sass
+
+## 3.  主题
+
+* 系统色板 - 基础色板 + 中性色板
+* 产品色板 - 品牌色 + 功能色板
+
+
+
 
 
 # 总结react内置的 类型（包括接口）

diff --git a/typescript.md b/typescript.md
@@ -18,6 +18,13 @@
 
 ...
 
+## 1.3 静态和动态类型语言
+
+* 静态类型语言：在编译阶段确定所有变量的类型
+* 动态类型语言：在执行阶段确定所有变量的类型
+
+![动态和静态](./picture/tsPic/动态和静态.jpg)
+
 # 2. 开始使用
 
 全局安装 ts 
@@ -67,6 +74,85 @@ tsc hello.ts
 
 * 如果要在报错的时候终止 js 文件的生成，可以在 `tsconfig.json` 中配置 `noEmitOnError` 即可。
 
+## webpack中配置 ts
+
+* `npm i webpack webpack-cli webpack-dev-server -D`
+
+* 在 rules 中配置
+* npm i ts-loader -D
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.tsx?$/i,
+      use: [{
+        loader: 'ts-loader'
+      }],
+      exclude: /node_modules/
+    }
+  ]
+}
+```
+
+### 测试环境配置
+
+```js
+module.exports = {
+    devtool: 'cheap-module-eval-source-map'
+}
+```
+
+* 开启 source map ，cheap 代表忽略文件的类信息，在调试的时候类信息是没有用的；module 代表定位 ts源码，不是 ts-loader 解析之后的js代码；eval-source-map 把 source map以dataurl 的方式把文件中，重编译速度非常快，不用担心性能问题
+
+### 生产环境配置
+
+```js
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+module.exports = {
+    plugins: [
+        new CleanWebpackPlugin()
+    ]
+}
+```
+
+* 安装 clean-webpack-plugin，每次成功构建之后帮助我们清楚 dist 目录，清空缓存，清除无用的文件。因为在每次构建的时候文件名都是 hash生成的，多次构建之后就会产生无用的文件。
+
+### 使用 webpack-merge 将两个文件合并
+
+```js
+const merge = require('webpack-merge')
+const baseConfig = require('./webpack.base.config')
+const devConfig = require('./webpack.dev.config')
+const proConfig = require('./webpack.pro.config')
+
+let config = process.env.NODE_ENV === 'development' ? devConfig : proConfig
+
+module.exports = merge(baseConfig, config)
+```
+
+### 启动命令配置
+
+```js
+"start": "cross-env NODE_ENV=development webpack-dev-server --hot --open --config ./build/webpack.config.js"
+```
+
+* 需要安装：
+
+  ```shell
+  npm i cross-env
+  ```
+
+
+
+## 初始化一个 ts 项目
+
+```shell
+tsc --init
+```
+
+* 会生成一个 tsconfig 文件，里面就是 ts 的配置
+
 # 3. 基础
 
 ## 0. JavaScript中的数据类型
@@ -152,6 +238,8 @@ function fn(): void {
 let unusable: void = undefined
 ```
 
+* 在js 中使用 void 跟一个变量来定义 undefined ，因为 js 中没有 undefined 这个保留字，能够自定义一个 undefined 来覆盖全局的 undefined，因此用 void 0 这种方式来产生真正的 undefined。
+
 ### null 和 undefined
 
 在 TypeScript 中，可以使用 `null` 和 `undefined` 来定义这两个原始数据类型：
@@ -236,6 +324,25 @@ something = 7;
 something.setName('Tom');
 ```
 
+#### never 类型
+
+* never 类型代表无返回，联 undefined 也不会返回，永远不会返回
+
+  ```js
+  // never
+  let a: () => never = () => {
+      throw new Error('111')
+  }
+
+  let b = () => {
+    white (true) {
+
+    }
+  }
+  ```
+
+
+
 ### ts 类型推论
 
 在定义的时候如果没有赋值，则 ts 会把该变量的类型推断成 any 类型；如果在定义的时候已经赋值了，则会把变量的类型推断为等号后面的类型，在之后的赋值中不能再改变该变量的类型。
@@ -320,6 +427,29 @@ let tom: Person = {
 
 接口的类型也可以定义为 any 类型，在赋值的时候能够赋值为任意的类型。
 
+#### 鸭子类型
+
+* 在前后端定义的接口中，获取到后端的字段是定义的接口的必要条件
+
+```typescript
+// interface
+interface Iprops {
+    name: string;
+    age: number;
+}
+const fn = (arg: Iprops) => {
+    console.log(arg)
+}
+const result = {
+    name: 'zzz',
+    age: 11,
+    gender: 'female'
+}
+fn(result)
+```
+
+* 多了一个 gender 属性并没有报错
+
 ### 可选属性
 
 有时候我们希望不要完全匹配一个形状，那么可以使用的可选属性：
@@ -553,6 +683,9 @@ let sum: (x: number, y: number) => number = function (x: number, y: number): num
 
 ts 中冒号的右边是类型和实际的代码逻辑没有什么关系。
 
+* 一个变量定义了函数类型之后，给它赋值的函数就不必要再定义类型了。
+* 函数类型的定义使用的是 冒号，函数类型的赋值使用的等号，分清楚
+
 ### 函数参数的可选
 
 可选参数的写法与接口的可可选属性的写法是一样的
@@ -593,6 +726,29 @@ const fn = function(a: string, b: readonly number[]) {
 }
 ```
 
+### 定义函数的三种方式
+
+1. 直接定义类型
+
+```js
+let add: (x: number, y: number) => number
+```
+
+2. 接口定义
+
+```typescript
+interface Add {
+  (x: number, y: number): number
+}
+// 接口定义函数返回值用 冒号 和其他的都一样
+```
+
+3. 类型别名
+
+```typescript
+type Add = (x: number, y: number) => number
+```
+
 
 
 ### 重载
@@ -609,7 +765,7 @@ const fn = function(a: string, b: readonly number[]) {
 
 ## 类型断言
 
-类型断言（type assertion）可以用来手动指定一个值的类型。
+类型断言（type assertion）可以用来手动指定一个值的类型。就是我们告诉编辑器我们知道这个类型就是指定的类型
 
 #### 语法
 
@@ -800,8 +956,8 @@ let xcatliu: [string, number] = ['Xcat Liu', 25];
 
 ### 注意
 
-* 元祖是特俗的数组，在定义的时候长度不能变，要和左侧的类型对齐。
-* 元祖可以使用数组的方法来添加元素，比如说使用 push 方法。
+* 元祖是特殊的数组，在定义的时候长度不能变，要和左侧的类型对齐。
+* 元祖可以使用数组的方法来添加元素，比如说使用 push 方法。但是不能进行越界访问，实际开发的过程中不建议这样使用
 
 ## 枚举
 
@@ -839,9 +995,88 @@ enum Days {sun = 7, mon =1, tue, wed, thu}
 
 * 枚举的手动赋值也可以不为数字，需要使用断言来避免ts检测出错，ts枚举的实质就是后面的值等于前面的值＋1，当前面一个元素手动赋值成字符串类型的话，后面也需要手动赋值成为字符串类型的值。
 
+### 计算值
+
+* 枚举中的计算值会被保留在执行阶段才会执行，就是不会立即执行
+
 ### 常亮枚举
 
 * 不能存在计算值，比如 `arr.length`
+* 当我们不需要一个对象，只需要一个对象的值的话就会使用到常量枚举
+
+```typescript
+const enum Month {
+    Jan = 1,
+    Feb,
+    Jun
+}
+let test2 = [Month.Feb, Month.Jun]
+console.log(test2)
+```
+
+
+
+### 字符串枚举
+
+```typescript
+enum Message {
+  Success: '成功',
+  Fail: '失败'
+}
+```
+
+* 注意字符串枚举不能够反向映射
+
+### 异构枚举
+
+* 就是数字 + 字符串枚举
+
+```typescript
+enum Answer {
+  N,
+  Y = 'yes'
+}
+```
+
+### 枚举类型
+
+* 枚举也可以作为一种类型来使用
+
+```typescript
+// 枚举类型
+enum E {
+    a,
+    b
+}
+enum F {
+    a = 1,
+    b = 2
+}
+enum G {
+    a = 'test1',
+    b = 'test2'
+}
+
+let e1: E = 5
+let e2: F = 5
+let e3: G = G.a
+let e4: G.a = G.a
+```
+
+* 数字类型只要是数字就可以，字符串枚举类型只能取固定的值
+
+### 枚举思考
+
+* 在 js 中能够使用如下的方式去赋值
+
+```js
+var obj = {}
+var a
+obj[a = 1] = 'test'
+// obj[1] === 'test'
+```
+
+
 
 ## 类
 
@@ -1025,12 +1260,12 @@ class A<T = {}> {
 
 ## 1. null 和 undefined 问题
 
-* null 和 undefined 是所有类型的子类型，本来可以赋值给任何类型的变量，需要配置`strict`为 false
+* null 和 undefined 是所有类型的子类型，本来可以赋值给任何类型的变量，需要配置`strictNullChecks`为 false
 
   ```js
   {
       "compilerOptions": {
-          "strict": true,
+          "strictNullChecks": true,
           //...
       }
   }

diff --git a/一些遗漏的知识.md b/一些遗漏的知识.md
@@ -56,6 +56,18 @@ text-overflow: ellipsis;  超出文本省略
 
 overflow: hidden; 
 
+超出两行：
+
+```css
+overflow:hidden; 
+text-overflow:ellipsis;
+display:-webkit-box; 
+-webkit-box-orient:vertical;
+-webkit-line-clamp:2; 
+```
+
+
+
 # js定义变量
 
 * 可以全局不写var 赋值，不能全局不写 var 进行定义再调用
@@ -1048,7 +1060,10 @@ Promise 是一个代理对象，代理一个异步结果。
 >
 > 测试
 
+#### ==注意==：
 
+1.  **Referrer** 在图片防盗链中的作用
+2. 只有在cors 跨域请求的时候 request header 中才会出现 origin 字段，其他情况下不需要 origin 字段。
 
 ## 2. 请求和响应
 
@@ -2015,4 +2030,9 @@ tagName 为 `*`即可获取所有的节点
 
 * 16 进制 0x 开头， `0x1111`
 * 8进制 0o 开头（es6）（大小写均可）
-* 2进制 0b 开头
+* 2进制 0b 开头
+
+# css 缩放
+
+1. `transform: scale(0, 0, 0)`这个缩放需要指定缩放源点，并且盒子所占的位置和大小不会发生变化
+2. `zoom: 0.4` 这种缩放是视口的缩放，盒子的位置和大小都会跟着响应的变化。