“TypeScript 又是什么东西啊, 怎么又在出新语言, 求不要再出了, 学不动了!!”

场景1 – 检查类型

开心的撸代码中, 突然接到老大消息: xxx离职了, 现在你来接手他维护的项目.😳

拿到代码后, 看到了这段东西

1
2
3
4
5

/** 根据用户id获取用户信息 */
async function getUsers(id) {
  const users = await fetchUsers(id)
  return users
}

这个 id 是什么? 是 1 还是 "1" 还是 [1,2,3] 还是 "1,2,3" ???

这个 users 又是什么? 是普通权限用户? 还是管理员看到的用户?

全局搜索了一下调用该方法的地方, 发现这是个“万能”的方法, 传入 id 为 1 时会返回 1 号用户的不含私密信息的对象

传入 [1,2,3] 或 "1,2,3" 时会获取一个数组

如果上了ts

正则表达式是什么

正则表达式可以从一段文本中提取特定内容的功能, 几乎所有编程语言都支持. 使用在爬虫、检查用户输入合法性、XSS 过滤等.

在整个学习过程中, 给大家推荐一个可视化正则表达式的网站 https://jex.im/regulex/

他可以根据你输入的正则表达式动态的生成匹配图, 帮助你理解一个复杂的正则表达式. 像下面这样

语法

javascript 中支持 3 种正则表达式语法: 字面量、构造函数和工厂符号, 他们的签名如下

/pattern/flags
new RegExp(pattern, [, flags])
RegExp(pattern, [, flags])

前段时间听说 Vue3.x 要使用 TypeScript 重构了, 本来一直都想研究一下 Vue 的源码, 这次带着夙愿来从头编写一个简单的、现代化的 Vue.

搭建好 TypeScript 开发环境后, 开始了一段 TypeScript 与 Vue 源码的探索之旅.

背景

我使用 ES6 class 创建了一个 Vue 类, 为了实现数据监听, 我使用了 ES2015 中的 proxy 方法来对数据进行封装,
并且将这个 proxy 返回给类的构造方法, 以便于获取 vm 实例.

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

interface IOptions {
  data: () => Record<string, any>
}

class Vue {
  private $options: IOptions = {
    data: () => ({})
  }

  constructor(options: IOptions) {
    this.$options = options
    const proxy = this.initProxy()
    return proxy
  }

  initProxy() {
    const data = this.$options.data ? this.$options.data() : {}

    return new Proxy(this, {
      set(_, key: string, value) {
        data[key] = value
        return true
      },
      get(_, key: string) {
        return data[key]
      }
    })
  }
}

const vm = new Vue({
  data() {
    return {
      a: 1
    }
  }
})

vm.a = 2
// ^ Property 'a' does not exist on type 'Vue'.

console.log(vm.a) // => 2
//             ^ Property 'a' does not exist on type 'Vue'.