Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3395b8f

Browse files
xcatliuxcatliu
committed
更新到内置对象，去掉个人化的例子，规范代码风格
1 parent c64bae3 commit 3395b8f

File tree

3 files changed

+82
-74
lines changed

3 files changed

+82
-74
lines changed

‎basics/type-assertion.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
11
# 类型断言
22

3-
类型断言（Type Assertion）可以用来绕过编译器的类型推断，手动指定一个值的类型（即程序员对编译器**断言**）。
3+
类型断言（Type Assertion）可以用来手动指定一个值的类型。
44

55
## 语法
66

77
```ts
88
<类型>值
9+
```
910

10-
// 或
11+
或
1112

13+
```ts
1214
值 as 类型
13-
14-
// 在TSX语法 (React的JSX语法的TS版）中必须用后一种
1515
```
1616

17+
在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。
18+
1719
## 例子：将一个联合类型的变量指定为一个更加具体的类型
1820

1921
[之前提到过](union-types.md#访问联合类型的属性或方法)，当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们**只能访问此联合类型的所有类型里共有的属性或方法**：
2022

2123
```ts
2224
function getLength(something: string | number): number {
23-
return something.length;
25+
return something.length;
2426
}
2527

26-
// index.ts(2,20): error TS2339: Property 'length' does not exist on type 'string | number'.
28+
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
2729
// Property 'length' does not exist on type 'number'.
2830
```
2931

3032
而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，比如：
3133

3234
```ts
3335
function getLength(something: string | number): number {
34-
if (something.length) {
35-
return something.length;
36-
} else {
37-
return something.toString().length;
38-
}
36+
if (something.length) {
37+
return something.length;
38+
} else {
39+
return something.toString().length;
40+
}
3941
}
4042

41-
// index.ts(2,17): error TS2339: Property 'length' does not exist on type 'string | number'.
43+
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'string | number'.
4244
// Property 'length' does not exist on type 'number'.
43-
// index.ts(3,22): error TS2339: Property 'length' does not exist on type 'string | number'.
45+
// index.ts(3,26): error TS2339: Property 'length' does not exist on type 'string | number'.
4446
// Property 'length' does not exist on type 'number'.
4547
```
4648

@@ -50,11 +52,11 @@ function getLength(something: string | number): number {
5052

5153
```ts
5254
function getLength(something: string | number): number {
53-
if ((<string>something).length) {
54-
return (<string>something).length;
55-
} else {
56-
return something.toString().length;
57-
}
55+
if ((<string>something).length) {
56+
return (<string>something).length;
57+
} else {
58+
return something.toString().length;
59+
}
5860
}
5961
```
6062

@@ -64,7 +66,7 @@ function getLength(something: string | number): number {
6466

6567
```ts
6668
function toBoolean(something: string | number): boolean {
67-
return <boolean>something;
69+
return <boolean>something;
6870
}
6971

7072
// index.ts(2,10): error TS2352: Type 'string | number' cannot be converted to type 'boolean'.

‎basics/type-of-array.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ let fibonacci: number[] = [1, '1', 2, 3, 5];
2020
// Type 'string' is not assignable to type 'number'.
2121
```
2222

23-
此时 `[1, '1', 2, 3, 5]` 的类型被推断为 `(number | string)[]`，这是联合类型和数组的结合。
23+
上例中，`[1, '1', 2, 3, 5]` 的类型被推断为 `(number | string)[]`，这是联合类型和数组的结合。
24+
25+
数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：
2426

2527
```ts
2628
let fibonacci: number[] = [1, 1, 2, 3, 5];
@@ -29,9 +31,11 @@ fibonacci.push('8');
2931
// index.ts(2,16): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
3032
```
3133

34+
上例中，`push` 方法只允许传入 `number` 类型的参数，但是却传了一个 `string` 类型的参数，所以报错了。
35+
3236
## 数组泛型
3337

34-
也可以使用数组泛型（Generic） `Array<elemType>` 来表示数组：
38+
也可以使用数组泛型（Array Generic） `Array<elemType>` 来表示数组：
3539

3640
```ts
3741
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
@@ -45,7 +49,7 @@ let fibonacci: Array<number> = [1, 1, 2, 3, 5];
4549

4650
```ts
4751
interface NumberArray {
48-
[index: number]: number;
52+
[index: number]: number;
4953
}
5054
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
5155
```
@@ -66,7 +70,7 @@ let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
6670

6771
```ts
6872
function sum() {
69-
let args: number[] = arguments;
73+
let args: number[] = arguments;
7074
}
7175

7276
// index.ts(2,7): error TS2322: Type 'IArguments' is not assignable to type 'number[]'.
@@ -77,7 +81,7 @@ function sum() {
7781

7882
```ts
7983
function sum() {
80-
let args: IArguments = arguments;
84+
let args: IArguments = arguments;
8185
}
8286
```
8387

‎basics/type-of-function.md

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,28 @@
99
```js
1010
// 函数声明（Function Declaration）
1111
function sum(x, y) {
12-
return x + y;
12+
return x + y;
1313
}
1414

1515
// 函数表达式（Function Expression）
1616
let mySum = function (x, y) {
17-
return x + y;
17+
return x + y;
1818
};
1919
```
2020

2121
一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单：
2222

2323
```ts
2424
function sum(x: number, y: number): number {
25-
return x + y;
25+
return x + y;
2626
}
2727
```
2828

2929
注意，**输入多余的（或者少于要求的）参数，是不被允许的**：
3030

3131
```ts
3232
function sum(x: number, y: number): number {
33-
return x + y;
33+
return x + y;
3434
}
3535
sum(1, 2, 3);
3636

@@ -39,7 +39,7 @@ sum(1, 2, 3);
3939

4040
```ts
4141
function sum(x: number, y: number): number {
42-
return x + y;
42+
return x + y;
4343
}
4444
sum(1);
4545

@@ -52,34 +52,36 @@ sum(1);
5252

5353
```ts
5454
let mySum = function (x: number, y: number): number {
55-
return x + y;
55+
return x + y;
5656
};
5757
```
5858

5959
这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 `mySum`，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 `mySum` 添加类型，则应该是这样：
6060

6161
```ts
6262
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
63-
return x + y;
63+
return x + y;
6464
};
6565
```
6666

67+
注意不要混淆了 TypeScript 中的 `=>` 和 ES6 中的 `=>`。
68+
6769
在 TypeScript 的类型定义中，`=>` 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
6870

69-
其中，`=>` 在 ES6 中叫箭头函数，应用十分广泛，可以参考 [ES6 中的箭头函数][]。
71+
在 ES6 中，`=>` 叫做箭头函数，应用十分广泛，可以参考 [ES6 中的箭头函数][]。
7072

71-
## 接口中函数的定义
73+
## 用接口定义函数的形状
7274

7375
我们也可以使用接口的方式来定义一个函数需要符合的形状：
7476

7577
```ts
7678
interface SearchFunc {
77-
(source: string, subString: string): boolean;
79+
(source: string, subString: string): boolean;
7880
}
7981

8082
let mySearch: SearchFunc;
8183
mySearch = function(source: string, subString: string) {
82-
return source.search(subString) !== -1;
84+
return source.search(subString) !== -1;
8385
}
8486
```
8587

@@ -91,52 +93,52 @@ mySearch = function(source: string, subString: string) {
9193

9294
```ts
9395
function buildName(firstName: string, lastName?: string) {
94-
if (lastName) {
95-
return firstName + ' ' + lastName;
96-
} else {
97-
return firstName;
98-
}
96+
if (lastName) {
97+
return firstName + ' ' + lastName;
98+
} else {
99+
return firstName;
100+
}
99101
}
100-
let xcatliu = buildName('Xcat', 'Liu');
101-
let xcat = buildName('Xcat');
102+
let tomcat = buildName('Tom', 'Cat');
103+
let tom = buildName('Tom');
102104
```
103105

104106
需要注意的是，可选参数必须接在必需参数后面。换句话说，**可选参数后面不允许再出现必须参数了**：
105107

106108
```ts
107109
function buildName(firstName?: string, lastName: string) {
108-
if (firstName) {
109-
return firstName + ' ' + lastName;
110-
} else {
111-
return lastName;
112-
}
110+
if (firstName) {
111+
return firstName + ' ' + lastName;
112+
} else {
113+
return lastName;
114+
}
113115
}
114-
let xcatliu = buildName('Xcat', 'Liu');
115-
let xcat = buildName(undefined, 'Xcat');
116+
let tomcat = buildName('Tom', 'Cat');
117+
let tom = buildName(undefined, 'Tom');
116118

117119
// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.
118120
```
119121

120122
## 参数默认值
121123

122-
在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将**添加了默认值的参数识别为可选参数**：
124+
在 ES6 中，我们允许给函数的参数添加默认值，**TypeScript 会将添加了默认值的参数识别为可选参数**：
123125

124126
```ts
125-
function buildName(firstName: string, lastName: string = 'Liu') {
126-
return firstName + ' ' + lastName;
127+
function buildName(firstName: string, lastName: string = 'Cat') {
128+
return firstName + ' ' + lastName;
127129
}
128-
let xcatliu = buildName('Xcat', 'Liu');
129-
let xcat = buildName('Xcat');
130+
let tomcat = buildName('Tom', 'Cat');
131+
let tom = buildName('Tom');
130132
```
131133

132134
此时就不受「可选参数必须接在必需参数后面」的限制了：
133135

134136
```ts
135-
function buildName(firstName: string = 'Xcat', lastName: string) {
136-
return firstName + ' ' + lastName;
137+
function buildName(firstName: string = 'Tom', lastName: string) {
138+
return firstName + ' ' + lastName;
137139
}
138-
let xcatliu = buildName('Xcat', 'Liu');
139-
let xcat = buildName(undefined, 'Xcat');
140+
let tomcat = buildName('Tom', 'Cat');
141+
let cat = buildName(undefined, 'Cat');
140142
```
141143

142144
> 关于默认参数，可以参考 [ES6 中函数参数的默认值][]。
@@ -147,9 +149,9 @@ ES6 中，可以使用 `...rest` 的方式获取函数中的剩余参数（rest
147149

148150
```js
149151
function push(array, ...items) {
150-
items.forEach(function(item) {
151-
array.push(item);
152-
});
152+
items.forEach(function(item) {
153+
array.push(item);
154+
});
153155
}
154156

155157
let a = [];
@@ -160,9 +162,9 @@ push(a, 1, 2, 3);
160162

161163
```ts
162164
function push(array: any[], ...items: any[]) {
163-
items.forEach(function(item) {
164-
array.push(item);
165-
});
165+
items.forEach(function(item) {
166+
array.push(item);
167+
});
166168
}
167169

168170
let a = [];
@@ -181,11 +183,11 @@ push(a, 1, 2, 3);
181183

182184
```ts
183185
function reverse(x: number | string): number | string {
184-
if (typeof x === 'number') {
185-
return Number(x.toString().split('').reverse().join(''));
186-
} else if (typeof x === 'string') {
187-
return x.split('').reverse().join('');
188-
}
186+
if (typeof x === 'number') {
187+
return Number(x.toString().split('').reverse().join(''));
188+
} else if (typeof x === 'string') {
189+
return x.split('').reverse().join('');
190+
}
189191
}
190192
```
191193

@@ -197,11 +199,11 @@ function reverse(x: number | string): number | string {
197199
function reverse(x: number): number;
198200
function reverse(x: string): string;
199201
function reverse(x: number | string): number | string {
200-
if (typeof x === 'number') {
201-
return Number(x.toString().split('').reverse().join(''));
202-
} else if (typeof x === 'string') {
203-
return x.split('').reverse().join('');
204-
}
202+
if (typeof x === 'number') {
203+
return Number(x.toString().split('').reverse().join(''));
204+
} else if (typeof x === 'string') {
205+
return x.split('').reverse().join('');
206+
}
205207
}
206208
```
207209

0 commit comments

Comments
 (0)