# 搞定環境和配置：Node/TS



課程主要內容：

- ts-node
- tsc
- tsconfig.json
- vscode
- 和webpack一起使用



## ts-node



Node環境的typescript解釋執行器。 REPL(Read eval print loop)

```  shell
npm i -g ts-node
# yarn global add ts-node
```

用ts-node執行檔案

```shell
ts-node some.ts
```



###  配置檔案：tsconfig.json

```json
{
    "compilerOptions" : {
        /// 書寫你的配置
    }
}
```

### tsc（typescript compiler)

一個ts的編譯器。

``` shell
npm i -g tsc
# yarn global add tsc
```

可以指定編譯某個ts檔案：

```shell
tsc hello.ts
```

也可以通過`tsconfig.json` 配置。

`tsconfig` 有專門一節，這裡先提一下：

- 可以用`outDir` 配置項配置js檔案輸出的位置
- `tsc` 作為一個指令，可以用`--help` 檢視用法
- 可以用`module`指定生成模組的型別



##  和webpack一起用



初始化一下這個專案：

```shell
mkdir ts-webpack
cd ts-webpack
npm init 
```



先安裝依賴：

```shell
npm install webpack ts-loader typescript webpack-cli --save-dev
# 小師叔喜歡用yarn
# 感興趣一起用: npm install -g yarn
# yarn add webpack ts-loader typescript webpack-cli

```

寫一個用於測試的ts檔案(src/index.ts)：

```ts
export class TreeNode<T> {
   left : TreeNode<T>
   right : TreeNode<T>
   data : T

   constructor(data : T) {
      this.data = data 
   }
}


function log(x){
   console.log(x)
}

const node = new TreeNode<number>(100)
log( node.data )

```

寫一個`tsconfig.json`檔案：

```json
{
}
```



然後配置一個針對ts檔案打包處理的webpack配置。

檔名：webpack.config.js

```js
const path = require('path')
module.exports = {
  entry: {
    index: "./src/index.ts",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.[name].js",
    path: path.resolve(__dirname, "dist"),
  }
}
```

為package.json增加指令：

```json
  "scripts": {
    "start:dev" : "webpack",   
  }
```

執行起來試一下效果：

```shell
npm run start:dev
```

##  總結

這節課學完，環境就懂了1/3。

為啥是1/3：

1.  整合vue/react的配置方法下一小節我們再講
2.  還有一些高階技巧需要學完整個課程才能算掌握