# 編譯選項
TypeScript 提供了非常多的編譯選項,但是官方文檔對每一項的解釋很抽象,這一章會詳細介紹每一個選項的作用,并給出對應的示例。
索引(點擊選項跳轉到詳細介紹):
選項 | 類型 | 默認值 | 描述
--- | --- | --- | ---
[`allowJs`](#allowjs) | `boolean` | `false` | 允許編譯 js 文件
[`allowSyntheticDefaultImports`](#allowsyntheticdefaultimports) | `boolean` | `false` | 允許對不包含默認導出的模塊使用默認導入。這個選項不會影響生成的代碼,只會影響類型檢查。
## allowJs
> 允許編譯 js 文件。
設置為 `true` 時,js 文件會被 tsc 編譯,否則不會。一般在項目中 js, ts 混合開發時需要設置。
[查看示例](https://github.com/xcatliu/typescript-tutorial/tree/master/examples/compiler-options/01-allowJs)
```bash
# 設置為 true 時,編譯后的文件包含 foo.js
├── lib
│ ├── foo.js
│ └── index.js
├── src
│ ├── foo.js
│ └── index.ts
├── package.json
└── tsconfig.json
```
```bash
# 設置為 false 時,編譯后的文件不包含 foo.js
├── lib
│ └── index.js
├── src
│ ├── foo.js
│ └── index.ts
├── package.json
└── tsconfig.json
```
## allowSyntheticDefaultImports
> 允許對不包含默認導出的模塊使用默認導入。這個選項不會影響生成的代碼,只會影響類型檢查。
`export = foo` 是 ts 為了兼容 commonjs 創造的語法,它對應于 commonjs 中的 `module.exports = foo`。
在 ts 中,如果要引入一個通過 `export = foo` 導出的模塊,標準的語法是 `import foo = require('foo')`,或者 `import * as foo from 'foo'`。
但由于歷史原因,我們已經習慣了使用 `import foo from 'foo'`。
這個選項就是為了解決這個問題。當它設置為 `true` 時,允許使用 `import foo from 'foo'` 來導入一個通過 `export = foo` 導出的模塊。當它設置為 `false` 時,則不允許,會報錯。
當然,我們一般不會在 ts 文件中使用 `export = foo` 來導出模塊,而是在[寫(符合 commonjs 規范的)第三方庫的聲明文件](../basics/declaration-files#export-1)時,才會用到 `export = foo` 來導出類型。
比如 React 的聲明文件中,就是通過 `export = React` 來導出類型:
```ts
export = React;
export as namespace React;
declare namespace React {
// 聲明 React 的類型
}
```
此時若我們通過 `import React from 'react'` 來導入 react 則會報錯,[查看示例](https://github.com/xcatliu/typescript-tutorial/tree/master/examples/compiler-options/02-allowSyntheticDefaultImports)
:
```ts
import React from 'react';
// Module '"typescript-tutorial/examples/compiler-options/02-allowSyntheticDefaultImports/false/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flagts(1259)
```
解決辦法就是將 `allowSyntheticDefaultImports` 設置為 `true`。
---
- [上一章:代碼檢查](./lint.md)
- [下一章:感謝](../thanks/README.md)