typeScript的编译和环境构建

回顾一下什么是typeScript

TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。有着以下的特点：

1. 始于JavaScript，归于JavaScript：
   TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码；
   TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中；

2. TypeScript是一个强大的工具，用于构建大型项目:
   类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构；
   类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为；

3. 拥有先进的 JavaScript:
   TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件；
   这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript；

TypeScript的编译

众所周知typeScript最终会被编译成javeScript来运行，但是如何将其编译成JavaScript呢？
第一种：可以安装TypeScript包，这样就可以通过TypeScript的Compiler将其编译成JavaScript；
第二种：借助bable的插件@babel/preset-typescript将其编译成JavaScript;
具体可参考：bable组件将typeScript编译成JavaScript

下面我们具体说说第一种通过TypeScript的Compiler将其编译成JavaScript的步骤：

全局安装typescript

npm install typescript -g

如果运行tsc等等脚本报下面的错误，可以执行Set-ExecutionPolicy RemoteSigned

Set-ExecutionPolicy RemoteSigned

可以查看当前的typeScript版本

tsc --version

编写ts文件求和的math.ts

function sum(a: number, b: number) {
  return a + b;
}
console.log(sum(1, 4));

打开终端，进入math.ts所在目录,使用tsc把ts文件编译成js文件,这时候你就会发现在当前目录下生成了一个math.js文件

tsc math.ts

TypeScript的运行环境搭建

如上述所示typeScript的编译模式，如果每次为了查看typeScript代码的运行效果都要经过下面两个步骤就太麻烦了：

• 首先通过tsc编译typeScript到JavaScript；
• 然后再浏览器或者node环境运行JavaScript代码；

因此我们可以优化这个步骤：可以通过下述两个方法实现：

• 方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；
• 方式二：通过ts-node库，为TypeScript的运行提供执行环境；

使用webpack搭建ts环境
首先创建文件夹typeScript-TEST
然后创建./src/main.ts

import { sum } from "./math";

console.log(sum(1, 4));

然后创建./src/math.ts

export function sum(a: number, b: number) {
  return a + b;
}

初始化项目，生成package.json文件

npm init

本地安装 webpack webpack-cli，并在项目根目录创建webpack.config.js并配置打包的入口和出口

npm install webpack webpack-cli -D

./webpack.config.js

const path = require('path');

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

创建./public/index.html，生成html模板，并使用html-webpack-plugin插件指定其为html模板，本地安装html-webpack-plugin

npm install html-webpack-plugin -D

在webpack.config.js中配置，指定html模板为./public/index.html

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'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

安装ts-loader,并配置ts文件的打包规则，安装ts-loader

npm install ts-loader typescript -D

注意：ts-loader是使用typescript对ts文件进行编译的
执行下面命令在项目根目录生成tsconfig.json

tsc --init

在webpack.config.json中配置对ts文件的打包规则

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'
  },
  resolve: {
    extensions: ['.ts', '...'] //让webpack尝试按这些后缀名顺序解析模块，默认是不解析.ts模块的
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json配置打包脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

执行下面命令尝试打包,可以看到在项目根目录生成了dist目录，里面是打包生成的文件

npm run build

但这样还是麻烦，每次修改了代码都得重新执行npm run build打包，可以使用webpack-dev-server实现热更新

npm install webpack-dev-server -D

在webpack.config.json中配置

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'
  },
  resolve: {
    extensions: ['.ts', '...'] //让webpack尝试按这些后缀名顺序解析模块，默认是不解析.ts模块的
  },
  devServer: {
    hot: true,
    open: true,
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

在package.json中配置脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },

执行下面命令

npm run serve

使用ts-node搭建ts环境
ts-node作用：把执行的ts文件的内容编译成js,然后直接在node环境执行。不会单独生成一个js文件

安装ts-node

npm install ts-node -g

另外ts-node需要依赖 tslib 和 @types/node 两个包：

npm install tslib @types/node -g

直接通过 ts-node 来运行TypeScript的代码：

ts-node math.ts

好，typeScript的编译和环境构建就说到此，如有不对，欢迎大家交流沟通…

参考文章：参考文章