配置 TypeScript 开发环境

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