第一步 npm 安装 Typescript

npm i typescript -g , 可以使用tsc命令编译.ts文件,编译后生成对应的js文件,如果编译不成功会报错

第二步,每次tsc命令太麻烦,咋办捏?

有两种方案

• 可以使用webpack来搭建ts环境来自动编译
• 可以使用ts-node来自动编译.ts文件然后跑在node里面

先说ts-node

• npm i ts-node -g 安装一下
• ts-node又依赖另外两个包,tslib 和 @types/node 这里安装一下

输入npm i tslib @types/node -g

• ts-node的对应的依赖

现在,命令行直接使用ts-node即可直接运行.ts文件

再说webpack搭建typescript环境

1. 先安装webpack npm i webpack webpack-cli -D

2. 在webpack的项目中,我们需要使用ts-loader来识别.ts文件,而ts-loader又依赖项目文件夹中的typescript环境,因此需要安装两个依赖 npm i ts-loader typescript -D

3. 然后创建webpack.config.js 在创建的文件中配置一下

const path = require('path')
module.exports = {
	entry:"./src/main.ts",
	output:{
		path:path.resolve(__dirname,"./dist"),
		filename:"bundle.js"
	},
	mode:'development',
}

4. 在package.json中的script里添加build命令,来使用webpack
5. 然后使用npm run build命令来试试 结果报错了 原来是没有将ts-loader添加进规则里

6.在webpack.config.js中添加loader的规则 匹配.ts的文件,使用ts-loader

module: {
		rules: [{
			test: /\.ts/,
			loader: 'ts-loader'
		}]
	}

6. 成功执行,输出在dist文件夹中的bundle.js文件中