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

Skip to content

Commit 37828d2

Browse files
committed
添加生态系统部分,添加 typescript 和 eslint 关系图
1 parent 09d95b8 commit 37828d2

File tree

10 files changed

+65
-26
lines changed

10 files changed

+65
-26
lines changed

SUMMARY.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,6 @@
2626
- [泛型](advanced/generics.md)
2727
- [声明合并](advanced/declaration-merging.md)
2828
- [扩展阅读](advanced/further-reading.md)
29+
- [生态系统](ecosystem/README.md)
30+
- [TypeScript 与 ESLint](ecosystem/eslint.md)
2931
- [感谢](thanks/README.md)

assets/typescript-eslint.png

64.7 KB
Loading

basics/built-in-objects.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ interface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEven
9292

9393
Node.js 不是内置对象的一部分,如果想用 TypeScript 写 Node.js,则需要引入第三方声明文件:
9494

95-
```shell
95+
```bash
9696
npm install @types/node --save-dev
9797
```
9898

basics/declaration-files.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ jQuery('#foo');
6666

6767
@types 的使用方式很简单,直接用 npm 安装对应的声明模块即可,以 jQuery 举例:
6868

69-
```shell
69+
```bash
7070
npm install @types/jquery --save-dev
7171
```
7272

drafts/README.md

Whitespace-only changes.

drafts/eslint.md

Lines changed: 0 additions & 19 deletions
This file was deleted.

ecosystem/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# 生态系统
2+
3+
TypeScript 自发布以来一直都在稳步发展,其中开源社区也贡献了非常大的力量,如今它已有了繁荣的生态系统。
4+
5+
本部分主要会介绍 TypeScript 与其他前端技术的结合,具体内容包括:
6+
7+
- [TypeScript 与 ESLint](eslint.md)

ecosystem/eslint.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# TypeScript 与 ESLint(草稿)
2+
3+
[ESLint][] 是一个代码检查工具,主要用来发现代码错误、统一代码风格,目前已被广泛的应用于各种 JavaScript 项目中。
4+
5+
它通过插件化的特性极大的丰富了适用范围,搭配 [`typescript-eslint-parser`][] 之后,甚至可以用来检查 TypeScript 代码。
6+
7+
## 为什么需要 ESLint
8+
9+
TypeScript 已经可以对代码进行静态检查了,那么为什么还需要 ESLint 呢?
10+
11+
其实 ESLint
12+
13+
![TypeScript 和 ESLint 的关系](../assets/typescript-eslint.png)
14+
15+
16+
下面我们来一步一步给我们的 TypeScript 项目添加 ESLint 检查。
17+
18+
## 安装
19+
20+
首先,我们需要安装 ESLint 和一些插件:
21+
22+
```bash
23+
npm install -g eslint
24+
```
25+
26+
关于 TypeScript 与 ESLint,有过一些争论:
27+
28+
- 使用 ESLint 加上
29+
30+
运行 eslint 时报错 Cannot find module 'typescript-eslint-parser'
31+
32+
你运行的是全局的 eslint,需要运行 `./node_modules/.bin/eslint xxx.ts'
33+
34+
不支持某些 规则,比如 no-undef
35+
36+
有冲突的规则,比如 spaced-comment
37+
38+
39+
cannot read property type of null
40+
41+
react 规则不可用
42+
43+
44+
react/sort-comp type-annotations
45+
46+
[ESLint]: https://eslint.org/
47+
[`typescript-eslint-parser`]: https://github.com/eslint/typescript-eslint-parser

introduction/get-typescript.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22

33
TypeScript 的命令行工具安装方法如下:
44

5-
```shell
5+
```bash
66
npm install -g typescript
77
```
88

9-
安装完成之后,就有了 `tsc` 命令。编译一个 TypeScript 文件很简单:
9+
以上命令会在全局环境下安装 `tsc` 命令,安装完成之后,我们就可以在任何地方执行 `tsc` 命令了。
1010

11-
```shell
11+
编译一个 TypeScript 文件很简单:
12+
13+
```bash
1214
tsc hello.ts
1315
```
1416

introduction/hello-typescript.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ console.log(sayHello(user));
1515

1616
然后执行
1717

18-
```shell
18+
```bash
1919
tsc hello.ts
2020
```
2121

@@ -50,7 +50,7 @@ console.log(sayHello(user));
5050

5151
编辑器中会提示错误,编译的时候也会出错:
5252

53-
```shell
53+
```bash
5454
index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
5555
```
5656

0 commit comments

Comments
 (0)