TypeScript的环境
TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境。
不管是开发项目还是学习都需要配置舒心的环境
TypeScript代码无法直接跑在浏览器上, 需要编译成JavaScript代码才能运行在浏览器上, 那么这个编译的过程需要谁来来完成呢?
有两个工具可以帮助我们转换:
tsc: TypeScript Compiler
babel: babel中有一个preset插件
目前我们使用官方的tsc工具
如果我们每次为了查看TypeScript代码的运行效果，都需要经过这两个步骤的话就太繁琐了：
第一步：通过tsc编译TypeScript到JavaScript代码；
第二步：在浏览器或者Node环境下运行JavaScript代码；
是否可以简化这样的步骤呢？
比如编写了TypeScript之后可以直接运行在浏览器上？
比如编写了TypeScript之后，直接通过node的命令来执行？
上面我提到的两种方式，可以通过两个解决方案来完成：
方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；
方式二：通过ts-node库，为TypeScript的运行提供执行环境, ts-node会做两件事情: 帮你做编译; 帮你运行在node中；
方式一： webpack配置
在项目中Vue-cli会自动帮助我们配置好TS环境, 某些特殊情况下我们也需要自己进行配置
注意：这里可能需要大家对npm和webpack有一些简单的了解，不会非常复杂（如果完全不懂，按照我给出的步骤来做即可，后续自己进行一些知识的补充）
步骤一: 通过npm来初始化package.json文件: npm init
输入完成后, 全部敲回车即可
步骤二: 本地安装webpack和webpack-cli: npm install webpack webpack-cli -D
在package.json中添加一个脚本
创建一个webpack.config.js文件
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/main.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
}
}
步骤三: 安装ts-loader和typescript: npm install ts-loader typescript -D
本地安装的原因:
因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；
再在webpack.config.js文件中配置匹配规则
const path = require('path')
module.exports = {
mode: "development",
entry: "./src/main.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts"]
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
}
步骤四: 初始化tsconfig.json文件: tsc --init
会自动生成一个tsconfig.json文件, 此时已经可以将ts文件编译成js文件
步骤五: 搭建本地服务器: npm install webpack-dev-server -D
安装后, 再在package.json中配置一个脚本
我们还需要一个index.html作为模板
安装npm install html-webpack-plugin -D在webpack.config.js中配置模板, 最终webpack.config.js中配置如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: "development",
entry: "./src/main.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
devServer: {
},
resolve: {
extensions: [".ts", ".js", ".cjs", ".json"]
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
}
此时我们直接编写的main.ts文件, 就会直接运行在浏览器上
方式二：安装ts-node
安装命令: npm install ts - node -g
安装命令: npm install ts - node -g
另外ts-node需要依赖 tslib 和 @types/node 两个包, 也需要安装一下：npm install tslib @types/node -g
现在，我们可以直接通过 ts-node 来运行TypeScript的代码：ts - node 文件名
TS的语法学习中, 我会采用方式二, 在后续项目中采用方式一
————————————————
版权声明：本文为CSDN博主「学全栈的灌汤包」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_71485750/article/details/126318928
网友评论