构建ts开发环境

初始化环境与配置

安装ts

npm i typescript -g

创建配置文件

tsc --init

创建项目管理文件

npm init -y

手动编译

tsc xxx.ts

工程化配置

实现自动实时编译

安装相关工具
webpack
webpack-cli
webpack-dev-server（开发服务器）
ts-loader（加载编译ts文件）
typescript（本地安装，方便依赖库使用，注意与全局区分）
html-webpack-plugin（用于将生成的js与宿主页面合并）

npm i webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

创建编写webpack配置文件
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry:'./src/index.ts',
	output:{
		filename:'app.js'
	},
	resolve:{
		//模块导入扩展名处理
		extensions:['.js','.ts','.tsx']
	},
	//增强调试，便于追踪错误
	devtool:'cheap-module-eval-source-map',
	module:{
		rules:[{
			test:/\.tsx?$/i,
			use:[{
				loader:'ts-loader'
			}],
			exclude:/node_modules/
		}]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./public/index.html'
		})
	]
}

创建运行命令
package.json

"scripts": {
  "dev":"webpack-dev-server --config ./build/webpack.config.js"
}

启动运行命令

项目目录

node下运行ts文件

安装配置

npm i @types/node --save-dev
npm i ts-node --g
npm i typescript --save-dev

运行

ts-node xxx.ts