> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/shi-zhan/typescript.md).

# TypeScript

### 结构&目录

#### show\.js

```javascript
export function show(content: string) {
    window.document.getElementById('box').innerText = 'Hello,' + content;
}
```

#### entry.js

```javascript
// 通过 ES6 模块规范导入 show 函数
import {show} from './src/show';
// 执行 show 函数
show('Webpack');
```

#### tsconfig.json

使用的编辑器是webstorm，文件内容自动生成的。 添加`"importHelpers": true`

```javascript
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    // 从 tslib 导入辅助工具函数（比如 __extends， __rest等）
    "importHelpers": true
  },
  "exclude": [
    "node_modules"
  ]
}
```

#### webpack.config.js

```
module.exports = {
  module: {
    resolve: {
      // 先尝试 ts 后缀的 TypeScript 源码文件
      extensions: ['.ts', '.js'],
    },
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};
```

{% hint style="info" %}
**`resolve.extensions`**用于配置在尝试过程中用到的后缀列表。
{% endhint %}

### 安装

```
$ npm i typescript -d
$ npm i typescript awesome-typescript-loader -D 
```