`Vue3`中有三大特性**响应式**、**运行时**、**编译器**，我将分三篇文章进行讲解。本篇将讲解`Vue3`的响应式篇章，会依次讲解以下内容
1. `Proxy`数据劫持解决了`definePrototype`的什么问题
2. `依赖收集的设计思路`
3. `reactive`、`ref`、`computed`、`scheduler`、`watch`的实现
带你手撸`Vue3`响应式。

本文所有代码 [vue3_study](https://github.com/guojingwen/frontend-project/tree/main/vue3_study)

![image.png](https://blog.warmplace.cn/static/img/93de6588d2c3b55cf8b4bf3409ac4152.image.webp)



# 准备工作
- 考虑实现尽可能与源码相符合， 本文的目录结构与官方目录结构完全一致，且使用`TS`编写代码，使用`Rollup`构建。如果不熟悉`TS`的同学可以使用`npx tsc xx.ts -t esnext`命令转一下.
- 另一方面，为了照顾读者的理解，本文代码实现尽可能抛弃边缘情况，尽可能减少函数嵌套调用层次。
- 关于官方源码调试![image.png](https://blog.warmplace.cn/static/img/1334b427c6614870a3da658cbf4abffa.image.webp)


[vue3_study/1.begin](https://github.com/guojingwen/frontend-project/tree/main/vue3_study/1.begin)这里是一个干净的项目工程骨架

![image.png](https://blog.warmplace.cn/static/img/3cbb4b8fea342c55479f1d711afa5783.image.webp)

我先说一下大致情况
1. 考虑避免反复安装依赖，我将`node_modules`安装到了外层（`node_module`有递归往上查找的特性）
2. `packages/*/src` 借助`tsconfig.js`把路径映射为 `"@vue/*"` 这样通过`@vue/`引入模块了。
    - `packages/*/src` 每个目录内容都一样只有一个`index.ts`，里面没内容。
3. 推荐使用`npm`安装，（我开始是用`pnpm`安装，在测试`computed`时遇到了问题）
4. 启动 `npm run dev`, `demo` 在 `vue/examples/*.html` 借助 vscode `Live Server`插件启动

基本情况就这些， 具体看代码吧!

# proxy数据劫持
首先来看一下`vue2`响应式弊端：
- 响应化过程需要递归遍历，消耗较大 
- 新加或删除属性无法监听
- 数组响应化需要额外实现 
- `Map`、`Set`、`Class`等无法响应式 
- 修改语法有限制

`proxy`实现数据响应性`demo`
```js
const isObject = val => val !== null && typeof val === 'object'
const toProxy = new WeakMap() // obj:observed

function reactive(obj) {
  if (!isObject(obj)) return obj
  if (toProxy.has(obj)) return toProxy.get(obj)

  const observed = new Proxy(obj, {
    get(target, p, receiver) {
      const res = Reflect.get(target, p, receiver)
      // return res;
      // 体验Proxy惰性劫持
      return isObject(res) ? reactive(res) : res
    },
    set(target, p, value, receiver) {
      const result = Reflect.set(target, p, value, receiver)
      console.log('set', p, value, result)
      return result
    },
    deleteProperty(target, p) {
      const res = Reflect.deleteProperty(target, p)
      console.log('delete', p, res)
      return res
    }
  })
  toProxy.set(obj, observed)
  return observed
}

var state = reactive({
  foo: 'foo',
  bar: { a: 1 }
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok
// 3.设置不存在属性
state.dong = 'dong' // ok
// 4.删除属性
delete state.dong // ok
// 5.嵌套对象也支持
state.bar.a = 3
```
总结：
- `proxy`数据劫持是惰性（用时）劫持， 性能要好很多
- `proxy`远比存取器劫持方式强大很多，支持删除属性、新增属性、属性检测、对象遍历等
- 修改语法无限制（数组的用法与对象完全一致）

## 为什Proxy要搭配Reflect使用？
```js
// 思考 为什 Proxy 要搭配 Reflect 使用呢？
// 通过查看mdn文档知道
// Reflect相关的方法最后一个参数 receiver 是绑定this的意思
var obj = {
  firstName: '张',
  lastname: '三',
  get fullName() {
    return this.firstName + this.lastname
  }
}
var observed1 = new Proxy(obj, {
  get(target, p, receiver) {
    console.log('触发get', p)
    return target[p]
  },
  set(target, p, value, receiver) {
    target[p] = value
    return true
  }
})
observed1.fullName
// 打印 “触发get fullName” // 只打印一次

var observed2 = new Proxy(obj, {
  get(target, p, receiver) {
    const res = Reflect.get(target, p, receiver)
    console.log('触发get', res)
    return res
  },
  set(target, p, value, receiver) {
    const res = Reflect.set(target, p, value, receiver)
    console.log('set', p, value)
    return res
  }
})
observed2.fullName
// 打印 触发get 张
// 打印 触发get 三
// 打印 触发get 张三
```

# 依赖收集设计思路
建立响应数据`key`和更新函数之间的对应关系。

用法：
```js
const state = reactive({
    foo: 'Foo'
});
// 设置响应函数
effect(() => console.log(state.foo)) ;
// 用户修改关联数据会触发响应函数
state.foo = 'xxx';
```
设计思路<br>
实现三个函数：
- `effect`：将回调函数保存起来备用，立即执行一次回调函数触发它里面一些响应数据的`getter`
- `track`：`getter`中调用`track`，把前面存储的回调函数和当前`target`，`key`之间建立映射关系 
- `trigger`：`setter`中调用`trigger`，把`target`,`key`对应的响应函数都执行一遍

![image.png](https://blog.warmplace.cn/static/img/efc9fa5f59047a81319f6b768a4c5f12.image.webp)

`target`,`key`和响应函数映射关系

![image.png](https://blog.warmplace.cn/static/img/affb603548016ddb96c823597efdaf28.image.webp)

# reactive实现
1. 先上测试用例
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../dist/vue.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

<script>
    const {reactive, effect} = Vue;
    const obj = reactive({
        name: '张三'
    });
    effect(() => {
        document.getElementById('app').innerText = obj.name
    });
    setTimeout(() => {
        obj.name = '李四';
    }, 2000);
</script>
</html>
```
2. `reactivity/reactive.ts`
```ts
import { trigger, track } from './effect'

// Map缓存 obj:observed
export const reactiveMap = new WeakMap<object, any>()

export function reactive(target: object): any {
  if (reactiveMap.has(target)) {
    return reactiveMap.get(target)
  }
  const observed = new Proxy(target, {
    get(target: object, p: string | symbol, receiver: object) {
      const res = Reflect.get(target, p, receiver)
      track(target, p)
      return res
    },
    set(target: object, p: string | symbol, value: unknown, receiver: object) {
      const res = Reflect.set(target, p, value, receiver)
      trigger(target, p)
      return res
    }
  })
  reactiveMap.set(target, observed)
  return observed
}
```
3. `reactivity/effect.ts`
```js
export function effect<T = any>(fn: () => T) {
  const _effect = new ReactiveEffect<T>(fn)
  _effect.run()
}

/**
 * targetMap 大致结构如下
 * {target: Map<{key: Set<Effect>}>}
 *  target | depsMap
 *  	obj  |   key  |  Dep
 * 						 k1   | effect1,effect2...
 * 						 k2   | effect3,effect4...
 */
const targetMap = new WeakMap<object, Map<any, Set<ReactiveEffect>>>()

export let activeEffect: ReactiveEffect | undefined

export class ReactiveEffect<T = any> {
  constructor(public fn: () => T) {
    this.fn = fn
  }
  run() {
    activeEffect = this
    this.fn()
  }
}

export function track(target: object, p: unknown) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(p)
  if (!dep) {
    depsMap.set(p, (dep = new Set()))
  }
  dep.add(activeEffect!)
}

export function trigger(target: object, p: unknown) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const dep = depsMap.get(p)
  if (!dep) return
  triggerEffects(dep)
}

export function triggerEffects(effects: Set<ReactiveEffect>) {
  for (let effect of effects) {
    effect.run()
  }
}
```
**注： `packages/*/src`文件夹的所有文件都有通过`index.ts`聚合导出，如`packages/reactivity/src/index.ts`**
```ts
export * from './reactive';
export * from './effect';
```
**后面不在强调这个细节**

运行效果

![](https://blog.warmplace.cn/static/img/2e88a39b6fdbca96ab0cba637c0d1412.2.gif)

# ref实现
- 官方`ref`支持 复杂数据（对象类型） 和简单数据（基本类型）
- 我们先实现 复杂数据的支持，在实现简单数据的支持
- 复杂数据的支持是借助`reactive`的依赖收集

## 复杂数据的支持
这一步不难我先上代码
- `reactivity/ref.ts`
```ts
import { isObject } from '@vue/shared'
import { activeEffect, ReactiveEffect } from './effect'
import { reactive } from './reactive'

export function ref(value: unknown) {
  return new RefImpl(value)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T
  public dep?: Set<ReactiveEffect> = undefined
  constructor(value: T) {
    this._value = toReactive(value)
    this._rawValue = value
  }
  get value() {
    // 收集依赖
    if (activeEffect) {
      this.dep ??= new Set<ReactiveEffect>()
      this.dep.add(activeEffect)
    }
    return this._value
  }
}

export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value as object) : value
```

运行效果
![](https://blog.warmplace.cn/static/img/d00674c4897a55b506ec23de090554cc.3.gif)

## 原生类型数据的支持
我们在修改一下`ref`让它支持简单数据

![image.png](https://blog.warmplace.cn/static/img/802d0dfa484d2bfc90aa035f182ccfeb.image.webp)

运行效果
![](https://blog.warmplace.cn/static/img/9db28439aa8de9b0c17b00c9c8deb2df.3.1.gif)

# computed实现

思路
1. 先实现展示功能
2. 再实现响应式

## 先实现展示功能
- `reactivity/computed.ts`
```ts
import { ReactiveEffect, activeEffect } from './effect'

export function computed(getterOrOptions) {
  // 这里只考虑简单情况 即 getterOrOptions 为 getter
  const getter = getterOrOptions
  return new ComputedRefImpl(getter)
}

export class ComputedRefImpl<T> {
  public dep?: Set<ReactiveEffect> = undefined
  private _value!: T
  private readonly effect: ReactiveEffect<T>
  constructor(getter) {
    this.effect = new ReactiveEffect(getter)
  }
  get value() {
    this.dep ??= new Set<ReactiveEffect>()
    this.dep.add(activeEffect!)
    this._value = this.effect.run()
    return this._value
  }
}

```

![image.png](https://blog.warmplace.cn/static/img/699b87cf59392a33453c6b46738a157a.image.webp)

运行效果

![image.png](https://blog.warmplace.cn/static/img/17280fcb1b37774fc5a39145e4cf78c0.image.webp)

## 响应式的实现
- `reactivity/computed.ts` 改动如下
![image.png](https://blog.warmplace.cn/static/img/d1976d49992c6a601d2e9df744b10e70.image.webp)

- `reactivity/effect.ts`改动
![image.png](https://blog.warmplace.cn/static/img/eba069efc5bef351371e6f76a1cb5ea0.image.webp)
![image.png](https://blog.warmplace.cn/static/img/33abb7e8de0f3b69ac820358a4646f4e.image.webp)

运行效果

![](https://blog.warmplace.cn/static/img/4a9591036522fc130bf9e289173ee7e8.5.gif)

这一步理解起来还是比较费劲的，建议用断点调试多调试几遍

![image.png](https://blog.warmplace.cn/static/img/de34d2cda5d1135747cb200afcc2557b.image.webp)

我说一下大致流程

1. 首先第一步分别创建了 一个`ReactiveEffect`实例， 就是 `obj`
2. 第二步创建了一个`ComputedRefImpl`实例， 即`computedObj`。`computedObj`有个`effect`属性， 与 `obj`类型相同，不同点是前者（`computedObj.effect`）会标识`computed`属性且它的`effect`属性拥有`scheduler`方法，这样 `trigger()`是调用的是 `effect.scheduler()` 而不再是 `effect.run()` 
3. 执行 `effect()` 完成依赖收集，targetMap依赖如下
    - ![](https://blog.warmplace.cn/static/img/5793560b3fcf55ab1d34016e51bff96d.clipboard-2023-08-22.webp)
5. 最后一步，算是唯一难理解的
    - `obj.name`赋值 触发 `setter` ---> `triggger()` ---> 执行副作用，就是上图的`ReactiveEffect`实例 即`computedObj.effect.sheduler()` 即 `effect的第一个参数`
    - ![](https://blog.warmplace.cn/static/img/19abb594f9585ab62345a8e530dbe6f9.image.webp)
    - 注意`ComputedRefImpl`实例（这里是`computedObj`）有个标志`_dirty`，初始值是`true`, 在第三步的时候已经触发getter，完成依赖收集后变成`false`了， 由于现在执行依赖收集副作用触发`.effect.sheduler()`方法再次把`_dirty`标记置为`true`并执行它的副作用（effect的第一个参数）
    - ![image.png](https://blog.warmplace.cn/static/img/db47ba54bc83fedec9c2bfe5849987ba.image.webp)
    - 这时又触发`ComputedRefImpl`实例的`getter`, 再次执行副作用，这时副作用是指 第二步 `computed()`的第一个参数`() => '姓名：' +  obj.name`
    - 接着触发 代理对象`obj`的`getter()`， 进行副作用收集，其实前面第三步已经收集了，这里等于什么都没做，逐级回退调用栈，函数就执行结束了

文采不够，解释的比较牵强，源码的艺术只可意会不可言谈😂，还是要多调试自己品味才行。 

总结： `computed`也是要完成依赖收集，`setter` 触发副作用从它开始逐级执行副作用（`effect的回调参数`  --> `computed的回调参数`  --> 从`reactive代理对象`取值返回），是一个递归过程

## computed的缓存特性
我们在改一下案例 测试computed的缓存性

![image.png](https://blog.warmplace.cn/static/img/ea772d3d3f5e51b35d36fa33b2024c05.image.webp)

断点调试发现 `computedObj.dep` 有两个 `ReactiveEffect`的实例


![image.png](https://blog.warmplace.cn/static/img/a12a2c302b96fb382dc659ba23b49c28.image.webp)
第一个副作用是`effect()`里面的回调参数 第二个副作用是`computed()`的回调参数

当执行到定时器中的代码 触发setter, 执行依赖（前面分析过只有一个依赖即`computed()`生成的的副作用）

执行`scheduler()`将`_dirty`标记为true,

第一次执行`computedObj.value` 由于`_dirty`为`false` 再执行它的副作用， 这里就造成递归，正确的做法是先执行存值器 将`_dirty`标记为`false` 再执行`schedule()` 这样就不会造成死循环了

如果我们先执行`computedObj.dep`中的`schedule()` 

![image.png](https://blog.warmplace.cn/static/img/e781c74d6017d473c39620814618433c.image.webp)

第一次执行`computedObj.value`，`_dirty`为`false` 再执行它的副作用， 这次是先执行了`schedule()` `_dirty`为`false` 不在执行副作用，就结束了。

`computed`的缓存性如何体现呢？
1. 第一次执行`computedObj.value`，进入存值器，这时`_dirty`为`true` 会执行副作用重新生成值，
2. 第一次执行`computedObj.value`，进入存值器，这时`_dirty`为`false` 就不在重新计算值了。

> 注： 这一块很难解释， 耐心多调试方能理解。

这一次运行就正常了
![6.gif](https://blog.warmplace.cn/static/img/2450052a7c9392b9a19cfae4189e239d.6.gif)

# watch
因为watch默认是懒执行（`immediate: false`）的, 所以我们effect要适配，让它支持懒执行。

## 先实现effect的懒执行
![image.png](https://blog.warmplace.cn/static/img/9b1e4f594d66b283ad9ccc03099a7a14.image.webp)

effect支持scheduler参数

![image.png](https://blog.warmplace.cn/static/img/3882f904ddbaf9bb7a960c775dba8b71.image.webp)

scheduler的完整实现
前面的调度方法是同步执行，如果我们想异步执行，`Vue`提供了`queuePostFlushCb`，这个方法比较独立，是一个不错的手写题

- `runtime-core/src/scheduler.ts`
```ts
const cbs: Function[] = []
export function queuePostFlushCb(cb: Function) {
  cbs.push(cb)
  queueFlush()
}

let isFlushPending = false
async function queueFlush() {
  // console.log('queueFlush', isFlushPending)
  if (!isFlushPending) {
    isFlushPending = true
    await Promise.resolve()
    let _cbs = [...new Set(cbs)]
    for (let cb of _cbs) {
      cb()
    }
    cbs.length = 0
    isFlushPending = false
  }
}
```

- 测试用例如下
```js
const {
    reactive,
    effect,
    queuePostFlushCb,
} = Vue

const obj = reactive({
    count: 1
})

effect(() => {
    // 初始化执行
    console.log(obj.count);
}, {
    scheduler(){ 
      // 发生变更执行这里
      queuePostFlushCb(() => {
        console.log(obj.count);
      })
    }
})

obj.count = 2
obj.count = 3
// 打印 1
// 打印两次 3
```
运行结果与前面一致， 这里就不截图了

## watch基本骨架
`Vue3`的`watch` 是放在 `runtime-core/src/apiWatch.ts`文件中的。

先来实现`watch`的骨架和`immediate`功能
- `runtime-core/src/apiWatch.ts`
```ts
import { ReactiveEffect, isReactive } from '@vue/reactivity'
import { queuePostFlushCb } from './scheduler'

export function watch(
  source: any,
  cb: Function,
  { immediate, deep }: WatchOptions = {}
) {
  let getter: () => any
  if (isReactive(source)) {
    getter = () => source
    deep = true
  } else {
    getter = () => {}
  }

  let oldValue = {}
  const job = () => {
    const newValue = effect.run()
    if (deep || Object.is(newValue, oldValue)) {
      cb(newValue, oldValue)
      oldValue = newValue
    }
  }

  const scheduler = () => queuePostFlushCb(job)
  const effect = new ReactiveEffect(getter, scheduler)
  if (immediate) {
    job()
  } else {
    oldValue = effect.run()
  }
  return () => effect.stop()
}

export interface WatchOptions {
  immediate?: boolean
  deep?: boolean
}
```
在看一下测试用例和效果

![image.png](https://blog.warmplace.cn/static/img/fc2ad8270d9c994caa51e5a2653beb0b.image.webp)

## watch完整实现
前面的案例`watch`没有实现响应式，为什么呢？
其实是因为 `watch`的`effect`(就是`watch`的第二个参数)没有触发`getter`, 我们只需递归遍历一下watch监听的对象即可以完成依赖收集

修改 `runtime-core/src/apiWatch.ts` 增加代码如下
![image.png](https://blog.warmplace.cn/static/img/cf9cb96d85f3b13eb5563bec3b2e9c90.image.webp)

![image.png](https://blog.warmplace.cn/static/img/95fe6c1823a56eded6b63f5630b10315.image.webp)

在看一下测试用例

![image.png](https://blog.warmplace.cn/static/img/99d663e929c765882b56609b3d9c8157.image.webp)

Vue3源码学习一 （响应式）

今天的话题比较敏感，好在我的博客没什么热度，大不了再删稿。<br>
最近工作超级饱和，博客也基本处于断更状态，我也不想博客断更，不想步入舒适区，所以干脆写一篇简单的，实用的，分析现状和规划，所以聊一聊股市，这是我的B计划。

这几年我在股市上亏了很多钱，从21年30%不到的仓库到满仓中概股和恒生指数，再到负债持仓、失业，再到现在的满仓，可以说仓位越来越重，几乎一直在加仓， 而如今上证指数2700点快回到了2018年的低点， 中概股从21年的100点多，到如今的25点，我亏了很多很多钱，，，

一定有很多朋友觉得我很愚蠢，都跌了这么多还敢买，还不卖，我说下我愚蠢的理由，也作为“将来历史的见证”，当然我也不是忽悠大家抄底（炒股），股市的波动是绝大部分人承受不起的，我只是把我的经历当成故事说给你听，你且乐呵一下，仅此而已。


# 买理财买定期不想香吗？
这几年做储蓄的定期存款虽说收益不高，但相比当下房地产泡沫破裂，经济通缩的大环境已是大赚，跑赢了大多数人，我虽然没有买房，但股市的跌幅也有30%-40%了，好在买房的人很多是加了杠杠，我相对没有负债，也算没那么绝望。

我一直坚信经济有周期，低买高卖是不会吃亏，长期来看，货币超发、科技进步，存款是抵御不了通胀的，而股市长期会跑赢通胀，保值资产价格。

# 经济周期理论

我举个例子来说一下经济周期吧。比如说养猪，有“猪周期”一说，在猪肉最便宜的时候开始养猪，由于猪肉便宜，很多猪厂亏损倒闭，猪肉供给变少，但吃猪肉的人不会变少，就在这个时候猪肉开始变贵，你养的猪已长大，开始出栏卖猪，恰好卖在了高点，大赚一笔。

再比如你是一家餐馆老板。当下企业裁员、失业率上升、大家更不敢消费、企业业绩变差继续裁员、大家更不敢消费，，这时客流变少了，可能已经不赚钱。但是经济再差总是有人顶不住多巴胺的诱惑选择出去吃吃喝喝，还是有人选择躺平。当你所在的地方附近的餐馆都倒闭了， 只有你家的餐馆还在死死扛着还没关闭，那么你的餐馆就开始赚钱了，你开始招工，别人看的你开饭店赚钱了也开始寻找商铺、装修、招工、大家都的挣钱了，也开始消费了，这样经济就开始复苏了。

上述的例子纯属我意淫，但是我想大家并非认为完全没有道理吧？

当然你怎么知道现在是经济最低谷？ 比如养猪，万一猪肉还在跌怎么办？你的猪厂规模上来后猪肉价格没有上升怎么办？还有可能死在黎明前。

对确实是这样，如果有人能算出股市最低点最高点，从而加杠杆低买高卖，瞬间就发财了。我也没有堵这个，我买的是指数，我是缓慢加仓，跌到了前期低点就再加一点，涨了就卖一点，一直跌就一直买。

那么股市会一直跌下去吗？我认为是不会的，我觉得世界和平发展是大方向的。中美高层精英都没那么糊涂，局部战争无非是博弈，吓跑胆小的，获的更大收益而已。如今的信息时代知识时代尤其大国高层领导人，不会那么糊涂，放任本国经济不管不顾，另外国家掌握着金钞机，拥有股市定价权，这也是我不会割肉离场的原因。

当然我也有错， 错在前期加仓加的节奏太快了
，错在早早打完了子弹、还搞了一些负债，错在后面裸辞失业了，错在单压一个行业（互联网和恒生指数），错在23年年初和24年的5月份的两个小高点，卖的太少，后面如果有反弹，还是要降低一些仓位，然后再分散一些，别压一个方向，别那么贪心了。

# 中美博弈

从2018年中美贸易战开始，中美博弈的厉害，中国也有一些政策失误，导致中概互联网遭到内外暴打，当初比肩fecebook、亚马逊的腾讯和阿里巴巴，现在是一地鸡毛。

但客观的来说虽然我们没有西方人懂经济，但是中国的cz也是在改变的，降印花税、降准降息、降房地产首付、游戏新规不了了之、以旧换新、国家队增持股市等。我们不能因眼前的挫折和失败就否认一切。下面是我看到的一些思考

- 经济不好，大厂依然是最赚钱的生意

<img src="/static/img/0c11deb528993b934ce8af240ae586f2.clipboard-2024-09-08.webp" width=400>


- 大放水是迟早的

<img src="/static/img/dbde374835c0e3f7a84d2ef4972458d4.clipboard-2024-09-08.webp" width=300>

- 不放水也有好处

<img src="/static/img/78eceab380b037a764b619ac734615d7.8771726499677_.pic.webp" width=300>

- 中美博弈国家在考虑什么

<img src="/static/img/4d1f24d9b26985e050fc550d4183317b.image.webp" width=300>

- 股市价值是什么？
    - 沪深300的股权风险溢价已经6.9%，股息率3.5%。相当于你买了一个50年起的国债，多送你一个点的收益，而且未来经济的增长，全都是白送你的。
    - 现在已经是历史最低估值PB。至于PE，也是历史较低分位数了。

- 美国经济高血压
    - 美国国债35万亿 ，美国正在以每天50亿美元的速度借贷度日，仅是债务的利息支付就超过了在国防上的支出。未来降低和大放水是化解美国国债的唯一出路
    - 美国科技在领跑，中国的优势在应用，一旦美国科技创新遇到瓶颈，或者AI被证伪（半年到一年内没有出来必须的商品），中国优势就出来了。

- 国家队在干什么

<img src="/static/img/734902da42458fd8af4c9f20bb66db45.20240202.webp" width=200>



# 当下的机会在哪？
- 努力工作，保住饭碗，通缩环境不要计较工资，股市在下跌，公司无论怎么算每个人都很“贵”！所以无论当下多么苟且都要保住工作，一旦收入没了，那么就不得不割肉了，可能就死在了黎明前。当下的苟且，也是对自我最好的锻炼，也是为了诗和远方。

聊聊股市与中国经济

区块链技术的应用一比特币

本文对TS背景进行简单的介绍，用精简的语言和案例阐述了TS的常用类型，是TS入门学习很好的一篇文章。本文主要参考 [《ts入门教程》](https://ts.xcatliu.com/) 一书和 [《TS常见类型》](https://blog.csdn.net/zxl1990_ok/article/details/125205351)一文并加入了一些自己的思考和实践及整理了一些比较基础的面试题。

# 常见面试题
- TS有哪些基本类型
- `void`和`undefined`的区别
- `unknow`与`any`类型的区别
- `never`类型有了解吗？TS最底层的类型是什么？

带着问题开始本篇文章的阅读吧


# TypeScript介绍
- `TypeScript` 是由微软开发的一款开源的编程语言。
- `TypeScript` 是 `Javascript` 的超级，遵循最新的 `ES6+` 规范。`TypeScript` 扩展了 `JavaScript`的语法。
- TypeScript 更像后端 `Java`、`C#`这样的面向对象语言可以让 `JS` 开发大型企业项目。
- 谷歌也在大力支持 `Typescript` 的推广，谷歌的 `Angular2.x+`就是基于 `Typescript` 语法。
- 最新的 `Vue`、`React` 也可以集成 `TypeScript`。

![](https://blog.warmplace.cn/static/img/f162343843c08008a75e82ef3bd6df20.image.webp)

## 设计理念
有过一定TS经验的同学可以了解一下TS的设计理念，这有助于我们更好的学习和理解TypeScript。

[官方TS设计理念介绍](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals)

## 安装使用
- `npm install -g typescript`
- `tsc --init` 生成配置文件 `tsconfig.json`
- `tsc helloworld.ts`  生成 `helloworld.js`
- [ts在线编译](https://c.runoob.com/compile/5577/)

- 运行和断点调试 要安装 `ts-node`
    - `npm install ts-node`
    - 运行TS `npx ts-node helloword.ts`
    - 调试只能在编辑器里调试，跟JS调试一样，
    - （VSCode点击右上角的 `运行和调试` --> `JavaScript调试终端`）

## 编辑器实时编译
### webstorm
- 打开`Preferences` > `Languages & Frameworks` > TypeScript配置如下
- ![image.png](https://blog.warmplace.cn/static/img/8d6685aa8dde530a3097819b3830c96e.image.webp)
- 点击弹窗右下角 OK ，此时会生成 helloWorld.js, 选中它分屏 
- ![image.png](https://blog.warmplace.cn/static/img/b620b720c667437dd30f2ae7690a624e.image.webp)
- ![预览效果](https://static.warmplace.cn/blog-resources/ts/ty.gif)

### vscode配置
点击菜单 任务-运行任务 点击 `tsc:监视-tsconfig.json` 然后就可以自动生成代码了

![image.png](https://blog.warmplace.cn/static/img/3bf68be902738243f37dcdf3cedd8853.image.webp)

## 为什么要使用TypeScript
1. **TypeScript 增加了代码的可读性和可维护性**
    - **类型系统实际上是最好的文档**，大部分的函数看看类型的定义就可以知道如何使用了
    - 可以**在编译阶段就发现大部分错误**，这总比在运行时候出错好
    - **增强了编辑器和 IDE 的功能**，包括代码补全、接口提示、跳转到定义、重构等
1. **TypeScript 非常包容**
    - `TypeScript` 是 `JavaScript` 的超集，`.js` 文件可以直接重命名为 `.ts` 即可
    - 即使不显式的定义类型，也能够自动做出类型推论
    - 可以定义从简单到复杂的几乎一切类型
    - 即使 `TypeScript` 编译报错，也可以生成 `JavaScript` 文件
    - 兼容第三方库，即使第三方库不是用 `TypeScript` 写的，也可以编写单独的类型文件供 `TypeScript` 读取
1. **TypeScript 拥有活跃的社区**
    - 大部分第三方库都有提供给 `TypeScript` 的类型定义文件
    - Google 开发的 `Angular2` 就是使用 `TypeScript` 编写的
    - `TypeScript` 拥抱了 `ES6` 规范，也支持部分 `ESNext` 草案的规范

## TypeScript 的缺点
任何事物都是有两面性的，我认为 `TypeScript` 的弊端在于：
1. 有一定的学习成本，需要理解接口（`Interfaces`）、泛型（`Generics`）、类（`Classes`）、枚举类型（`Enums`）等前端工程师可能不是很熟悉的概念
1. 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，`TypeScript` 能够减少其维护成本
1. 集成到构建流程需要一些工作量
1. 可能和一些库结合的不是很完美

## TypeScrit 特性
- 静态类型（编译时还是运行时进行类型检查）
- 弱类型 （是否允许隐式类型转换）
- **IDE代码补全和接口提示**等功能
    - 一些第三方库原生支持了 `TypeScript`，在使用时就能获得代码补全了，比如 `Vue 3.0`
    - 如果三方库原生不支持 `TypeScript`，以通过安装社区维护的类型声明库 比如`npm install --save-dev @types/react`
- **完全兼容 JavaScript** 的，它不会修改 `JavaScript` 运行时的特性。
- 可以编译为 `JavaScript`
- 配置丰富，类型检查的严格程度由你决定
- `TypeScript`与标准同步发展

# TypeScript中的原始数据类型
- 与JS中的原始类型相对应`boolean`、`number`、`string`、`null`、`undefined`、`Symbol`、`BigInt`
- 包装类型也与JS对应（包装类型不是原始类型）
- `void`
- `any`
- `unknow`
- `never`

## boolean number string
- 即使不显式的定义类型，也能够自动做出类型推论
- 声明未赋值等价于 自动推断为`any`类型
```ts
// 不显式的定义类型，也能够自动做出类型推论 
let age = 1 // let age: number

age = 'zhangsan' // 报错 不能将类型“string”分配给类型“number”。ts(2322)

// 声明未赋值 自动推断为any类型
let person; // let person: any
```
补充知识点：**类型推论**

`TypeScript` 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

例如 `let age = 1` 会自动推断为 `age: number`

## 包装对象
我们知道在 `JS` 中存在包装对象的概念。

当你使用原始类型（字符串、数字、boolean值）调用属性或方法是，`JS`会创建一个临时的包装对象，使你能够访问课操作原始数据类型的属性和方法。这个过程称为自动包装。

在`TS`中也存在包装对象
- 原始类型兼容对应的对象包装类型， 对象类型不兼容对应的原始类型。 （子类可以赋值给父类，反之不行，原始类型是父类）

```ts
var str = "Hello";
var strObject = new String(str); // 创建一个字符串包装对象
console.log(strObject.length); // 访问字符串的长度属性
console.log(str.length); // 访问字符串的长度属性

// 在TS中也存在包装对象
// 报错 Type 'Boolean' is not assignable to type 'boolean'.
let createdByNewBoolean: boolean = new Boolean(1); 
```
## null 和 undefined
- 与`void`的区别是 `undefined`和`null` 是所有类型的子类型
    - 也就是说 `undefined` 类型的变量，可以赋值给其他类型的变量(未指定`strictNullChecks`时)
```ts
// 这样不会报错
let num: number = undefined;

let u: void;
let num2: number = u; // 不能将类型“void”分配给类型“number”。ts(2322)
```

注意： 
`tsconfig.json`指定了`"strictNullChecks":true` , `null` 和 `undefined` 只能赋值给 `any`、 `unknown` 和它们各自的类型, `undefined`可以赋值给`void`类型。

## 空值 void
> - JS中`void`是一个运算符，表示忽略表达式的返回值， 或者或返回值是`undefined`
> - JS函数总是返回一些东西，没有返回值即返回`undefined`

- 在`TS`中可以用`void`表示没有任何返回值的函数， 它是`undfined`的父类型
- 未定义返回值自动推断为 `void` 类型
- 可以将`undefined`和`null` 赋值给`void`类型（未指定`strictNullChecks`时）
```ts
// 未定义返回值自动推断为 void 类型
function alertName() {
    alert('My name is Tom');
}
var showAlert = alertName(); // var showAlert: void
// null 和 undefined 可以赋值给 void
let unusable: void = undefined;
```
那么TS既然有了 `undefined` 为什么还需要 `void` 呢？区别是什么？

区别在于 **作为返回类型的void可以用不同的类型替换，以允许高级回调模式**
```ts
function doSomething (callback: () => void) {
    let c = callback();   // 此时c为void类型 
    // ...  
}
  
// 返回number类型 
function aNumberCallback (): number {
    return 2;  
}
  
doSomething(aNumberCallback); 
```

## any
TS新手超级喜欢这个类型
- 任意值（Any）用来表示允许赋值为任意类型。
- 它允许访问任意属性和调用任意方法
因此`any`成了系统的顶级类型
```ts
// 但如果是 any 类型，则允许被赋值为任意类型。
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

// 在任意值上访问任何属性都是允许的：
console.log(myFavoriteNumber.logName);
// 也允许调用任何方法：
myFavoriteNumber.split('');

// 声明未赋值 推断为any
let any1; // any1: any
```

## unknow
- 与 `any`一样都是TypeScript的顶层类型，所有类型都可以分配给`unknow`
- 与 `any`不同的是
    - 不能对`unknow`类型执行任意操作,必须先缩小到具体类型才能使用其方法和属性
    - `unknow`类型只能被赋值给`any`类型和`unknow`类型本身

- 缩小未知类型的范围的三种方法
    - 类型断言
    - `typeof`
    - `is`关键字

```ts
let unknownVal: unknown = 'str';
unknownVal = true; // 所以所有类型都可以分配给unknown

// unknow类型只能赋值给any类型和unknow类型
let anyVal: any;
anyVal = unknownVal
let num: number = 12;
num = unknownVal; // 不能将类型“unknown”分配给类型“number”。ts(2322)

/* 缩小未知类型的范围的三种方法 */
// 类型断言
function toFixed(value: unknown) {
    return (value as number).toFixed(2);
}
// typeof 类型保护
function toFixed2(value: unknown) {
    if(typeof value === 'number') {
        return value.toFixed(2);
    }
}
// is 自定义类型保护
const isNumber = (val: unknown): val is number => typeof val === 'number';
function toFixed3(value: unknown) {
    if (isNumber(value)) {
        return value.toFixed(2);
    }
}
```

## never类型
- `never`类型表示的是那些永不存在的值的类型，这意味着，定义了一个`never`类型，只能被`never`类型的值所赋值
- `never` 是 `undefined` 和`null`的子类型， 是最底层的类型

什么情况下会出现`never`类型
- 一个从来不会有返回值的函数
    - `let ne = (() => { while(true) {} })();`
- 一个总是会抛出错误的函数
    - `let ne2 = (() => { throw new Error("异常"); })(); `


# 类型进阶
- 联合类型
- 对象的类型
- 数组的类型
- 函数的类型
- 元组类型

## 联合类型
- 联合类型（Union Types）表示取值可以为多种类型中的一种
- 只能访问此联合类型的所有类型里共有的属性或方法
```ts
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

function getLength(something: string | number): string {
    console.log(something.length) // 不可以 number类型没有length属性
    console.log(something.toFixed(2)) // 不可以， string类型没有toFixed方法
    return something.toString();
}
```

## 对象的类型
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。
- 何为接口？它是对行为的抽象。
- 接口一般首字母大写。有的编程语言中会建议接口的名称加上 `I` 前缀。
- 接口定义后 实例多一些属性或少一些属性都是不允许的
- 属性修饰 `?` 可选属性 `readonly` 只读属性
- 任意属性 `[propName: string]: any;`
    - 一旦定义了任意属性，那么确定属性和可选属性都必须是它的类型的子集
```ts
interface Person {
    name: string;
    age: number;
}
let tom: Person = { // 报错 缺少age属性
    name: 'Tom'
};
let tom2: Person = { // 报错 不需要 gender 属性
    name: 'Tom',
    age: 25,
    gender: 'male'
};


interface Person2 {
    readonly name: string;
    age?: number;
    // [propName: string]: string; // 报错，任意类型必须包含可选类型和确定类型
    [propName: string]: string | number | undefined; 
}
let jack: Person2 = {
    name: 'zs'
}
jack.name = 'ls' // 报错
jack.age = 12; // ok
jack.sex = 1 // ok

// 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候
interface Person3 {
    readonly id?: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom3: Person3 = {
    name: 'Tom',
    gender: 'male'
};
tom3.id = 89757; // 报错
```

## 数组的类型
###  数组的三种表示法
- 「类型 + 方括号」表示法 `let fibonacci: number[] = [1, 1, 2, 3, 5];`
- 泛型表示法 `let fibonacci: Array<number> = [1, 1, 2, 3, 5];`
- 接口表示法
```ts
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
```

### 类数组
```ts
function sum() {
    let args: number[] = arguments; // 报错
}

// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

function sum() {
    let args: IArguments = arguments;
}
// IArguments 是TS内置对象
// 实际 IArguments 定义如下
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

// 用 any 表示数组中允许出现任意类型
let list: any[] = ['xcatliu', 25, { website: 'xcatliu.com' }];
```

## 函数的类型
- 可以约束函数参数类型、参数个数及返回值类型
- 函数声明语句的TS修饰
- 函数定义语句的TS修饰
- 使用interface修饰函数
- 对函数参数设置默认值， 同样会进行类型推断
- 可选修饰符: 
    - 仅最后一个参数可以用`?`
    - 设置了默认值就不能使用可选修饰符
- `readoly`修饰参数 只能在构造函数中使用
- 剩余参数， 准许JS语法 只能在最后一个参数定义
- 函数重载 （完整的函数重载将在下一篇进阶课中讲解）
```ts
// 函数声明语句
function sum(x: number, y: number): number {
    return x + y;
}
sum(1);  // 报错，不能少参数
sum(1, 2); // ok

// 函数定义表达式
let mySum = function (x: number, y: number): number {
    return x + y;
};
// 等同于如下代码
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

// 使用interface修饰函数
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
// 函数重载
function reverse(x: number): number; // 重载签名
function reverse(x: string): string; // 重载签名
// 实现签名
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
```
## 元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象
- 访问已知索引的元素会得到正确的类型
- 添加越界的元素时，他的类型会被限制为元组中每个类型的联合类型
```ts
// 元组的定义
let tom4: [string, number] = ['Tom', 25];
let tom5: [string, number];
// tom5 = [25, 'Tom'] // 报错
tom5 = ['Tom', 25]
tom5[0] = 'Tom'; // 可以只赋值其中一项：
// 当赋值或访问一个已知索引的元素时，会得到正确的类型：
tom4[0].slice(1);
tom4[1].toFixed(2);

// 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
tom4.push('male'); // ok
tom4.push(true); // 报错
```


# 参考资料
- [《ts入门教程》](https://ts.xcatliu.com/)
- [《TS常见类型》](https://blog.csdn.net/zxl1990_ok/article/details/125205351)