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

Skip to content

Commit 5eeaa9e

Browse files
xcatliuxcatliu
committed
Add compiler-options
1 parent 657e8e0 commit 5eeaa9e

File tree

33 files changed

+673
-437
lines changed

33 files changed

+673
-437
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
_book
2+
*.d.ts

‎.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
extends: ['alloy', 'alloy/typescript'],
3+
env: {
4+
// 您的环境变量（包含多个预定义的全局变量）
5+
// Your environments (which contains several predefined global variables)
6+
//
7+
// browser: true,
8+
// node: true,
9+
// mocha: true,
10+
// jest: true,
11+
// jquery: true
12+
},
13+
globals: {
14+
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
15+
// Your global variables (setting to false means it's not allowed to be reassigned)
16+
//
17+
// myGlobal: false
18+
},
19+
rules: {
20+
// 自定义您的规则
21+
// Customize your rules
22+
'no-undef': 'off',
23+
'@typescript-eslint/no-require-imports': 'off'
24+
}
25+
};

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ TypeScript 虽然有[官方手册][Handbook]及其[非官方中文版][中文手
8484
- [扩展阅读](advanced/further-reading.md)
8585
- [工程](engineering/README.md)
8686
- [代码检查](engineering/lint.md)
87+
- [代码检查](engineering/compiler-options.md)
8788
- [感谢](thanks/README.md)
8889

8990
## 版权许可

‎SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,5 @@
2828
- [扩展阅读](advanced/further-reading.md)
2929
- [工程](engineering/README.md)
3030
- [代码检查](engineering/lint.md)
31+
- [编译选项](engineering/compiler-options.md)
3132
- [感谢](thanks/README.md)

‎engineering/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
那么一项大工程应该如何开展呢？本部分的内容就会介绍 TypeScript 工程化的最佳实践，具体内容包括：
88

99
- [代码检查](lint.md)
10+
- [代码检查](compiler-options.md)
1011

1112
---
1213

‎engineering/compiler-options.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# 编译选项
2+
3+
TypeScript 提供了非常多的编译选项，但是官方文档对每一项的解释很抽象，这一章会详细介绍每一个选项的作用，并给出对应的示例。
4+
5+
索引（点击选项跳转到详细介绍）：
6+
7+
选项 | 类型 | 默认值 | 描述
8+
--- | --- | --- | ---
9+
[`allowJs`](#allowjs) | `boolean` | `false` | 允许编译 js 文件
10+
[`allowSyntheticDefaultImports`](#allowsyntheticdefaultimports`) | `boolean` | `false` | 允许对不包含默认导出的模块使用默认导入。这个选项不会影响生成的代码，只会影响类型检查。
11+
12+
## allowJs
13+
14+
> 允许编译 js 文件。
15+
16+
设置为 `true` 时，js 文件会被 tsc 编译，否则不会。一般在项目中 js, ts 混合开发时需要设置。
17+
18+
[查看示例](https://github.com/xcatliu/typescript-tutorial/tree/master/examples/compiler-options/01-allowJs)
19+
20+
```bash
21+
# 设置为 true 时，编译后的文件包含 foo.js
22+
├── lib
23+
│ ├── foo.js
24+
│ └── index.js
25+
├── src
26+
│ ├── foo.js
27+
│ └── index.ts
28+
├── package.json
29+
└── tsconfig.json
30+
```
31+
32+
```bash
33+
# 设置为 false 时，编译后的文件不包含 foo.js
34+
├── lib
35+
│ └── index.js
36+
├── src
37+
│ ├── foo.js
38+
│ └── index.ts
39+
├── package.json
40+
└── tsconfig.json
41+
```
42+
43+
## allowSyntheticDefaultImports
44+
45+
> 允许对不包含默认导出的模块使用默认导入。这个选项不会影响生成的代码，只会影响类型检查。
46+
47+
`export = foo` 是 ts 为了兼容 commonjs 创造的语法，它对应于 commonjs 中的 `module.exports = foo`。
48+
49+
在 ts 中，如果要引入一个通过 `export = foo` 导出的模块，标准的语法是 `import foo = require('foo')`，或者 `import * as foo from 'foo'`。
50+
51+
但由于历史原因，我们已经习惯了使用 `import foo from 'foo'`。
52+
53+
这个选项就是为了解决这个问题。当它设置为 `true` 时，允许使用 `import foo from 'foo'` 来导入一个通过 `export = foo` 导出的模块。当它设置为 `false` 时，则不允许，会报错。
54+
55+
当然，我们一般不会在 ts 文件中使用 `export = foo` 来导出模块，而是在[写（符合 commonjs 规范的）第三方库的声明文件](../basics/declaration-files#export-1)时，才会用到 `export = foo` 来导出类型。
56+
57+
比如 React 的声明文件中，就是通过 `export = React` 来导出类型：
58+
59+
```ts
60+
export = React;
61+
export as namespace React;
62+
63+
declare namespace React {
64+
// 声明 React 的类型
65+
}
66+
```
67+
68+
此时若我们通过 `import React from 'react'` 来导入 react 则会报错，[查看示例](https://github.com/xcatliu/typescript-tutorial/tree/master/examples/compiler-options/02-allowSyntheticDefaultImports)
69+
：
70+
71+
```ts
72+
import React from 'react';
73+
// Module '"typescript-tutorial/examples/compiler-options/02-allowSyntheticDefaultImports/false/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flagts(1259)
74+
```
75+
76+
解决办法就是将 `allowSyntheticDefaultImports` 设置为 `true`。
77+
78+
---
79+
80+
- [上一章：代码检查](./lint.md)
81+
- [下一章：感谢](../thanks/README.md)

‎engineering/lint.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -334,8 +334,8 @@ module.exports = {
334334
'alloy/typescript',
335335
],
336336
env: {
337-
// 这里填入你的项目用到的环境
338-
// 它们预定义了不同环境的全局变量，比如：
337+
// 您的环境变量（包含多个预定义的全局变量）
338+
// Your environments (which contains several predefined global variables)
339339
//
340340
// browser: true,
341341
// node: true,
@@ -344,13 +344,14 @@ module.exports = {
344344
// jquery: true
345345
},
346346
globals: {
347-
// 这里填入你的项目需要的全局变量
348-
// false 表示这个全局变量不允许被重新赋值，比如：
347+
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
348+
// Your global variables (setting to false means it's not allowed to be reassigned)
349349
//
350350
// myGlobal: false
351351
},
352352
rules: {
353-
// 这里填入你的项目需要的个性化配置
353+
// 自定义您的规则
354+
// Customize your rules
354355
}
355356
};
356357
```
@@ -446,4 +447,4 @@ npm install --save-dev eslint-plugin-react
446447
---
447448

448449
- [上一章：工程](README.md)
449-
- [下一章：感谢](../thanks/README.md)
450+
- [下一章：编译选项](./compiler-options.md)

‎examples/compiler-options/01-allowJs/false/lib/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use strict";
2+
exports.__esModule = true;
3+
var foo_1 = require("./foo");
4+
console.log(foo_1["default"]);

‎examples/compiler-options/01-allowJs/false/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "01-allow-js-false",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "tsc -w",
8+
"build": "tsc",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "",
12+
"license": "MIT",
13+
"dependencies": {},
14+
"devDependencies": {}
15+
}

‎examples/compiler-options/01-allowJs/false/src/foo.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const foo = 1;
2+
export default foo;

‎examples/compiler-options/01-allowJs/false/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import foo from './foo';
2+
console.log(foo);

‎examples/compiler-options/01-allowJs/false/tsconfig.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": false,
4+
"outDir": "lib"
5+
}
6+
}

‎examples/compiler-options/01-allowJs/true/lib/foo.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use strict";
2+
exports.__esModule = true;
3+
var foo = 1;
4+
exports["default"] = foo;

‎examples/compiler-options/01-allowJs/true/lib/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use strict";
2+
exports.__esModule = true;
3+
var foo_1 = require("./foo");
4+
console.log(foo_1["default"]);

‎examples/compiler-options/01-allowJs/true/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "01-allow-js-true",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "tsc -w",
8+
"build": "tsc",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "",
12+
"license": "MIT",
13+
"dependencies": {},
14+
"devDependencies": {}
15+
}

‎examples/compiler-options/01-allowJs/true/src/foo.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const foo = 1;
2+
export default foo;

‎examples/compiler-options/01-allowJs/true/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import foo from './foo';
2+
console.log(foo);

‎examples/compiler-options/01-allowJs/true/tsconfig.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"outDir": "lib"
5+
}
6+
}

‎examples/compiler-options/02-allowSyntheticDefaultImports/false/package-lock.json

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

‎examples/compiler-options/02-allowSyntheticDefaultImports/false/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "02-allow-synthetic-default-imports-false",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "tsc -w",
8+
"build": "tsc",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "",
12+
"license": "MIT",
13+
"dependencies": {
14+
"react": "^16.12.0"
15+
},
16+
"devDependencies": {
17+
"@types/react": "^16.9.14"
18+
}
19+
}

‎examples/compiler-options/02-allowSyntheticDefaultImports/false/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import React from 'react';

‎examples/compiler-options/02-allowSyntheticDefaultImports/false/tsconfig.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": false,
4+
"outDir": "lib"
5+
}
6+
}

0 commit comments

Comments
 (0)