Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bea9d9d

Browse files
author
febobo
committed
nothing merge code
2 parents 289663c + 00cf9a5 commit bea9d9d

File tree

4 files changed

+156
-55
lines changed

4 files changed

+156
-55
lines changed

‎docs/es6/typeScript.md‎

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ let n: null = null;
4949

5050
#### 类型补充
5151

52-
- 枚举 `Enum`,使用枚举类型可以为一组数值赋予友好的名字
52+
- 枚举 `Enum`
53+
54+
使用枚举类型可以为一组数值赋予友好的名字
5355
```js
5456
enum LogLevel {
5557
info = 'info',
@@ -58,7 +60,9 @@ enum LogLevel {
5860
}
5961
```
6062

61-
- 元组 `Tuple` 允许数组各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组
63+
- 元组 `Tuple`
64+
65+
允许数组各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组
6266

6367
```js
6468
// Declare a tuple type
@@ -69,22 +73,28 @@ x = ['hello', 10]; // OK
6973
x = [10, 'hello']; // Error
7074
```
7175

72-
- 任意值 `Any` 表示任意类型,通常用于不确定内容的类型,比如来自用户输入或第三方代码库
76+
- 任意值 `Any`
77+
78+
表示任意类型,通常用于不确定内容的类型,比如来自用户输入或第三方代码库
7379

7480
```js
7581
let notSure: any = 4;
7682
notSure = "maybe a string instead";
7783
notSure = false; // okay, definitely a boolean
7884
```
79-
- 空值 `Void` 与 any 相反,通常用于函数,表示没有返回值
85+
- 空值 `Void`
86+
87+
与 any 相反,通常用于函数,表示没有返回值
8088

8189
```js
8290
function warnUser(): void {
8391
console.log("This is my warning message");
8492
}
8593
```
8694

87-
- 接口 `interface` 类型契约,跟我们平常调服务端接口要先定义字段一个理
95+
- 接口 `interface`
96+
97+
类型契约,跟我们平常调服务端接口要先定义字段一个理
8898

8999
如下例子 point 跟 Point 类型必须一致,多一个少一个也是不被允许的
90100
```js
@@ -286,3 +296,74 @@ export function defineComponent(options: unknown) {
286296
}
287297

288298
```
299+
300+
301+
交叉类型(Union Types),表示一个值可以是几种类型之一。 我们用竖线 | 分隔每个类型,所以 number | string | boolean表示一个值可以是 number, string,或 boolean
302+
303+
```js
304+
type arg = string | number | boolean
305+
const foo = (arg: arg):any =>{
306+
console.log(arg)
307+
}
308+
foo(1)
309+
foo('2')
310+
foo(true)
311+
```
312+
313+
### 函数重载
314+
315+
函数重载(Function Overloading), 允许创建数项名称相同但输入输出类型或个数不同的子程序,可以简单理解为一个函数可以执行多项任务的能力
316+
317+
例我们有一个`add`函数,它可以接收`string`类型的参数进行拼接,也可以接收`number`类型的参数进行相加
318+
319+
```js
320+
function add (arg1: string, arg2: string): string
321+
function add (arg1: number, arg2: number): number
322+
323+
// 实现
324+
function add <T,U>(arg1: T, arg2: U) {
325+
// 在实现上我们要注意严格判断两个参数的类型是否相等,而不能简单的写一个 arg1 + arg2
326+
if (typeof arg1 === 'string' && typeof arg2 === 'string') {
327+
return arg1 + arg2
328+
} else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
329+
return arg1 + arg2
330+
}
331+
}
332+
333+
add(1, 2) // 3
334+
add('1','2') //'12'
335+
```
336+
337+
### 总结
338+
339+
通过本篇文章,相信大家对`Typescript`不会再感到陌生了
340+
341+
下面我们来看看在`Vue`源码`Typescript`是如何书写的,这里我们以`defineComponent`函数为例,大家可以通过这个实例,再结合文章的内容,去理解,加深`Typescript`的认识
342+
343+
```js
344+
// overload 1: direct setup function
345+
export function defineComponent<Props, RawBindings = object>(
346+
setup: (
347+
props: Readonly<Props>,
348+
ctx: SetupContext
349+
) => RawBindings | RenderFunction
350+
): {
351+
new (): ComponentPublicInstance<
352+
Props,
353+
RawBindings,
354+
{},
355+
{},
356+
{},
357+
// public props
358+
VNodeProps & Props
359+
>
360+
} & FunctionalComponent<Props>
361+
362+
// defineComponent一共有四个重载,这里省略三个
363+
364+
// implementation, close to no-op
365+
export function defineComponent(options: unknown) {
366+
return isFunction(options) ? { setup: options } : options
367+
}
368+
369+
```

‎docs/start/index.md‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
开始之前,我希望大家都能够先花两分钟认真看完以下三个问题
2-
因为只有理解了我们为什么要学习源码,那么,后续的文字才会是有感情的
1+
本文作为Vue3源码系列的开篇词,以问答形式来诠释为什么程序员要学习源码
32

4-
## 1. 为什么要学习源码
3+
### 1. 为什么要学习源码
54

6-
### 阅读优秀的代码的目的是让我们能够写出优秀的代码
5+
#### 阅读优秀的代码的目的是让我们能够写出优秀的代码
76

87
其实就跟我们写作文一样,你看的高分作文越多,写出高分作文的概率就越大
98

10-
大部分程序员都只会写代码(改,抄,简称: `stackoverflow`工程师),会阅读代码的很少,为什么呢?因为国内所有的教育,网课,培训都没有教你怎么去看代码,只教你怎么去写代码
9+
大部分程序员都只会写代码(改,抄,`stackoverflow`工程师,代名词: 搬砖),会阅读代码的很少,为什么呢?因为国内所有的教育,网课,培训都没有教你怎么去看代码,只教你怎么去写代码
1110

12-
再者基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中`webpack`都干了哪些事情,他的回答是不知道,并且告诉你,那些他从来都用不上,是他们`TD`负责的
11+
再者基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的去看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中`webpack`都干了哪些事情,他的回答是不知道,反而趾高气扬的告诉你,那些他从来都用不上,看了也没什么用,也看不懂,这里省略内心千字脏文
1312

14-
阅读代码其实就咱们跟阅读一本小说一样,看过玄幻小说才能说出来修仙,看过都市的才能讲出来穿越,阅读主要目的是为了帮助我们积累素材,不要书到用时方恨少,看到美女我们应该能有一万种词语形容她,气若幽兰,美艳不可方物,一笑倾城,再笑倾国,而不是简短的两个字,我艹,美女!
13+
阅读代码其实就咱们跟阅读一本小说一样,看过玄幻小说才能说出来修仙,看过都市的才能讲出来穿越
1514

16-
- 那么为什么非要看源码呢?
15+
**阅读主要目的**是为了帮助我们**积累素材**,不要书到用时方恨少,看到美女我们应该能有一万种词语去形容,如气若幽兰,美艳不可方物,一笑倾城,再笑倾国,世间尤物,而不是简短的几个字,我艹,美女!
1716

18-
前面有提到优秀的高分作文看多了你才能写出来高分作文,你天天看着0分作文,那么写出来的也自然是0分作文,什么样的作文是高分呢?这个很好区分,前期从众就好
17+
- 那么为什么非要看源码呢?
1918

19+
前面有提到优秀的高分作文看多了你才能写出来高分作文,你天天看着0分作文,那么写出来的大概率也自然是0分作文,什么样的作文算是高分呢?这个很好区分,前期从众就好
2020

21-
### 不给自己设限,不要让你周围人的技术上限成为你的上限
21+
#### 不给自己设限,不要让你周围人的技术上限成为你的上限
2222

2323
很多时候,人会潜意识给自己设限
2424

25-
井底之蛙是大家应该都熟悉的故事,大多数时候我们会给自己画一个圈,将同事的技术跟自己的技术做对比,或者将`TL`的技术跟自己做对比,经常有人向我吐槽说,同事的技术不如他为什么工资比他高,`TL`的技术也不怎么样,为什么能成为`TL`,我现在告诉你为什么,就因为你一直在纠结这样的问题
25+
井底之蛙是大家应该都熟悉的故事,大多数时候我们会给自己画一个圈,将同事的技术跟自己的技术做对比,或者将`TL`的技术跟自己做对比,经常有人向我吐槽说,同事的技术不如他为什么工资比他高,`TL`的技术也不怎么样,为什么能成为`TL`,现在给你的回答是,**"因为你以为的并不是你以为的"**
2626

27-
我们完全没有必要把时间花费在这种没有意义的事情上面,改变不了环境就改变自己,要学会破圈,为什么总有人说北上广深适合创业,难道是因为这边的风水适合创业?显然不是,在北上广深无非就是让你的人脉更优质一些,上限更高一点,你的圈有多大,未来的想象空间才会更大
27+
我们完全没有必要把时间花费在这种毫无意义的事情上面,改变不了环境就改变自己,学会破圈,为什么总有人说北上广深适合创业,因为北上广深的风水爆炸还是空气新鲜?显然都不是,在北上广深无非就是让你的人脉更优质一些,上限更高一点,**你的圈有多大,未来的想象空间才有可能更大**
2828

2929
- 你一直将自己跟同事对比,那么你同事的上限就是你的上限
3030
- 你拿尤大跟自己对比,那么尤大的上限就是你的上限
3131

32-
### 功利性的阅读源码
32+
#### 功利性的阅读源码
3333

34-
功利性即指有目的性的,首先你要知道你想得到什么?
34+
功利性即指有目的性的,明确知道自己干完某一件事后能得到什么样的回报,所以首先你要知道你想得到什么?
3535

3636
看每一本书都有明确的目的,想学会理财,就得看理财相关的书,想学点技术,就得看点技术相关的书
3737

38-
看源码也是一样,你想看一下`vue.use`后发生了什么,或者是你说现在面试都需要会看源码,你看点源码就是为了面试,这都很好,两个例子功利性都很明显
38+
看源码也是一样,你对`vue.use`之后发生了什么比较好奇,或者是你觉得现在面试都需要会看点源码,这都很好,至少你有明确的诉求
3939

40-
凡事只要有了功利属性,才容易走的更远,如果你说现在大家都在看源码,你也想看看,然后一鼓脑扎进去,这个功利性就不明显,你很难坚持下去
40+
**凡事只要有了功利属性,才更容易走的下去,否则就是真香警告**
4141

4242

43-
## 2.源码应该怎么阅读
44-
###点对点源码阅读
45-
这种情况一般是自己写需求遇到问题了或者突然一时兴起想一探究竟的同学,咱们可以直接粗暴的找到源码的仓库,直接在该仓库搜索该关键字,然后根据模糊搜索的结果再结合自己的理解选择合适的结果,以下以`Vue.use`为例,如下图
43+
### 2.源码应该怎么阅读
44+
#### 单点突破
45+
这种情况一般在是自己写需求遇到问题了,或者突然一时兴起想看看内脏的同学,可以直接粗暴的找到源码的仓库,直接在该仓库搜索关键字,然后根据模糊搜索的结果再结合自己的理解选择合适的结果,以下以`Vue.use`为例,如下图
4646

4747
![image.png](https://static.vue-js.com/359785b0-c4ec-11ea-ae44-f5d67be454e7.png)
4848

49-
我们可以看到第一个结果就是`.spec` (Standard Performance Evaluation Corporation,标准性能评估机构bai) 可以直接理解测试代码,优秀的开源代码的标配,直接代表着代码的稳健性
49+
我们可以看到第一个结果就是`.spec` (Standard Performance Evaluation Corporation,标准性能评估机构bai) 可以理解为代码的试金石,优秀开源代码的标配,直接代表着代码的稳健性
5050

51-
点进去我们看到的代码如下,从图中我们就能大致的猜到`Vue.use`的一些使用场景及边界值,能看到参数不但可以接收对象还能接收函数
51+
点进去我们看到的代码如下,从图中我们就能大致的猜到`Vue.use`的一些使用场景及边界值
5252

5353
![image.png](https://static.vue-js.com/18eb0490-c4ed-11ea-ae44-f5d67be454e7.png)
5454

@@ -57,28 +57,28 @@
5757
![image.png](https://static.vue-js.com/ef452200-c4ed-11ea-ae44-f5d67be454e7.png)
5858

5959

60-
###系统的阅读
61-
即指整个项目的源码阅读,这种方式比上面的点对点价值就要大很多,不仅可以知道执行一个Api时具体发生了什么,更重要的能学习到整体的设计思想,架构理念
60+
#### 系统阅读
61+
即指以项目为维度的源码阅读,这种方式比上面的单点突破价值就要大很多,读完之后,不仅可以知道执行一个Api时具体发生了什么,更重要的是能学习到项目整体的设计思想和架构理念
6262

63-
同时阅读难度也会有相应提高,给你四个建议
63+
当然,阅读难度也会有相应提高,这里给你四个建议
6464

65-
- 决心(万事把决心放第一不会错)
66-
- 对你所阅读的代码框架要有基本的了解
67-
- 设定一个计划并自我监督总结
65+
- 决心(事事把决心放第一)
66+
- 对你所阅读的代码框架要有基本的了解(不然你读个啥)
67+
- 设定一个计划并自我复盘总结
6868
- 循序渐进,任何事情需要一个过程,由易到难,由浅入深
6969

7070
#### 具体方案
7171

7272
- 选择合适的工具让代码先跑起来
73-
- 理清楚代码组织的关系及用途
73+
- 理清楚代码组织关系及用途
7474
- 利用好单元测试
7575
- 利弊权衡(该跳就跳,长期处于蒙的状态很容易走进死胡同,可以标记回头再看)
7676
- 利用搜索引擎(可以结合网上的源码分析资料理解)
77-
- 多跟自己交互(多带问题阅读)
77+
- 多跟自己交互(带问题阅读)
7878

79-
## 3.本地怎么调试源码
79+
### 3.本地怎么调试源码
8080

81-
科普一下`SourceMap`这个东东吧,分开念`Source` `Map`,一句话理解就是一段维护了前后代码映射关系的`json`描述文件,具体故事可以泡杯茶慢慢讲了,这里不过多描述,感兴趣的自行查阅相关文档
81+
科普一下`SourceMap`这个东西吧,分开念`Source` `Map`,一句话理解就是一段维护了前后代码映射关系的`json`描述文件,具体故事可以泡杯茶慢慢讲了,这里不过多描述,感兴趣的自行查阅相关文档
8282

8383
有了`sourcemap`文件后,你想`debugger`还是`console`,就可以随意了
8484

@@ -93,6 +93,6 @@
9393
![image.png](https://static.vue-js.com/0fcea020-c4f6-11ea-ae44-f5d67be454e7.png)
9494

9595

96-
### 最后
97-
感谢你的坚持阅读,接下来让我们一起遨游在源码的海洋里吧!
96+
#### 最后
97+
接下来让我们一起遨游在源码的海洋里吧!
9898

‎package-lock.json‎

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /