# 編譯選項
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)
