随着 vue3 的普及，这年头身为前端不会 ts 似乎已经不好意思和人打招呼了。本篇文章就来讲讲学习 ts 最开始需要掌握的关于 ts 的安装与编译。

其实 ts 也不难，比如我们能直接编写如下 ts 文件：

typescript 复制代码

const name: string = 'Jay'
console.log(name)

export { }

但 ts 的代码最终都需要编译成 js 才能在支持 ES3 及以上的 js 引擎中运行，这就需要安装 typescript，然后通过它的 Compiler 将 ts 代码编译为 js。

非模块（Non-modules)

先额外说明下 export { } 的作用，它是为了解决如下图所示的报错：

对于 ts（包括 js）而言，任何没有 export 的文件都被默认为是一个脚本而不是一个模块。而在一个脚本文件中声明的变量等都是在全局作用域的，会在同一个作用域下进行编译。所以当我们声明 name 的时候，如果某个其它的全局文件也声明了个变量 name，就会遇到报错。添加上 export {}让当前文件变成一个没有导出任何内容的模块，就拥有了独立的作用域，报错就解决了。

安装

全局安装 typescript：在命令行输入 npm install typescript -g。安装完成后输入 tsc -v 查看安装的版本，检验是否安装成功，其中的 c，就是 Compiler 的缩写：

编译

介绍 3 种编译 ts 的方法：

方法一：使用 tsc

手动编译

在命令行来到 ts 文件所在目录，执行命令：tsc 文件名.ts，然后就会生成对应的 js 文件，我们可以在 html 文件中引入或在 node 中运行。注意，tsc 后指定文件名的方式会忽略 ts 的配置文件 tsconfig.json。

自动编译

在命令行输入 tsc --init 生成 tsconfig.json；
在命令行直接输入 tsc，就可以自动将当前项目下所有的 ts 文件编译为 js 文件。

使用 vscode 时，上述第 2 步可以改为直接点击菜单栏 '终端 -> 运行任务 -> 显示所有任务 -> tsc: 监视 - tsconfig.json'。这样每次编写完 ts 文件，都会自动编译更新 js 文件。

方法二：使用 ts-node

ts-node 需要依赖 tslib 和 @types/node 这两个包，所以需要一起全局安装：

powershell 复制代码

npm i ts-node tslib @types/node -g

现在就可以直接在命令行通过 ts-node 来执行 ts 文件了：

powershell 复制代码

ts-node 文件名.ts

ts-node 相当于是先做了编译（如果当前项目没有生成 tsconfig.json，也会根据全局的 tsconfig.json 配置编译），再将编译后的 js 文件运行在 node 环境。

方法三：使用 webpack5 打包

初始化项目： npm init -y；
安装相关包： npm i webpack webpack-cli typescript ts-loader -D；
在根目录新建 ts 配置文件 tsconfig.json： tsc --init；
在根目录新建 webpack.config.js：

javascript 复制代码

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const isProd = process.env.NODE_ENV === 'production' // 是否为生产环境

module.exports = {
  mode: isProd ? 'production' : 'development',

  entry: "./src/index.ts",

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js' // 打包后文件
  },

  // 指定webpack打包时要使用的模块
  module: { 
    rules: [ // 指定要加载的规则
      {
        test: /\.ts$/, // 指定规则生效的文件
        use: 'ts-loader', // 要使用的 loader
        exclude: /node_modules/ // 要排除的文件
      }
    ]
  },

  // 配置webpack插件
  plugins: [  
    new HTMLWebpackPlugin(), // 自动生成 html，并引入 js
    new CleanWebpackPlugin() // 每次打包前清除掉过去已打包的文件
  ],

  // 解析模块规则
  resolve: { 
    extensions: ['.ts', '.js'] // 引入文件时，可省略的路径后缀名
  },

  devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-module-source-map' 
}

其中：

HTMLWebpackPlugin 用于自动生成 html 文件，并自动引入编译后的 js：
- 安装： npm i html-webpack-plugin -D；
- 相比于 loader 可以下载后直接使用，plugins 下载后要先引入 const HTMLWebpackPlugin = require('html-webpack-plugin')，再使用 plugins: [new HtmlWebPackPlugin()]。HtmlWebPackPlugin 是一个类，使用要 new；
CleanWebpackPlugin 用于每次打包前清除掉过去已打包的文件：
- 安装：npm i clean-webpack-plugin -D
process.env.NODE_ENV === 'production' 是在区分运行环境：

在 node 中有个全局变量 process 对象，在终端中先输入 node，按回车再输入 process.env 后再按回车，可以看到如下图所示一些用户环境信息：

但输入 process.env.NODE_ENV 显示的是 undefined，因为 NODE_ENV 是人为定义的属性。使用 NODE_ENV = production 来设置环境变量时，大多数 Windows 命令提示将会阻塞(报错)，而 cross-env 可以不受平台的限制，安装 npm i cross-env -D 后就可以在 Windows 平台设置 NODE_ENV。

在 package.json 里设置命令：

json 复制代码

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack server --open --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  }

其中：

cross-env NODE_ENV=development 表示是开发环境；
server --open 需要安装 npm i webpack-dev-server -D 以实现热更新，并在构建成功后自动打开浏览器。

现在输入命令 npm run dev，webpack 就会帮我们编译 src\index.ts，然后打开浏览器运行了。最后放一下依赖包的版本信息：

TS 的安装与编译