2-1-3 TS 环境和配置

ts-node

Node 环境的 typescript 解释执行器。REPL（Read eval print loop）

需要安装 @types/node

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

npm i @types/node
# yarn add @types/node

用 ts-node 执行文件

ts-node some.ts

配置文件： tsconfig.json

{
    "compilerOptions": {
        // 书写你的配置
    }
}

tsc （typescript compiler）

一个ts的编译器

npm i -g tsc
# yarn global add tsc

可以指定编译某个ts文件

tsc hello.ts

也可以通过 tsconfig.json 配置。

可以用 outDir 配置项配置 js 文件输出的位置

tsc 作为一个指令，可以用 --help 查看用法

可以用 module 指定生成模块的类型

和 webpack 一起用

初始化项目

mkdir ts-webpack
cd ts-webpack
npm init

先安装依赖

npm install webpack ts-loader typescript webpack-cli --save-dev

# npm install -g yarn
# yarn add webpack ts-loader typescript webpack-cli

写一个用于测试的ts文件(src/index.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文件：

{
	"compilerOptions": {
		
	}
}

然后配置一个针对ts文件打包处理的webpack配置。

文件名：webpack.config.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增加指令：

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

运行起来试一下效果：

npm run start:dev

1