认识TypeScript

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

怎么理解上面的话呢？

• 我们可以将TypeScript理解成加强版的JavaScript。
• JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的；
• 并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等；
• TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先；
• 并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题，在编译时也不需要借助于Babel这样的工具；
• 所以，我们可以把TypeScript理解成更加强大的JavaScript，不仅让JavaScript更加安全，而且给它带来了诸多好用的好用特性；

TypeScript的特点

始于JavaScript，归于JavaScript

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

TypeScript是一个强大的工具，用于构建大型项目

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

拥有先进的 JavaScript

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

TypeScript的编译

TypeScript最终会被编译成JavaScript来运行，如何将其编译成JavaScript?

• 1. 我们可以在电脑上安装TypeScript包，这样就可以通过TypeScript的Compiler将其编译成JavaScript；
• 2.我们也可以借助bable的插件@babel/preset-typescript将其编译成JavaScript;
  具体步骤参考https://www.babeljs.cn/docs/babel-preset-typescript
  image.png

下面是通过TypeScript的Compiler将其编译成JavaScript的步骤

全局安装typescript

npm install typescript -g

查看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文件,

tsc math.ts

会发现在当前目录下生成了一个math.js文件

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

image.png

TypeScript的运行环境搭建

如果我们每次为了查看TypeScript代码的运行效果，都通过经过两个步骤的话就太繁琐了：

• 第一步：通过tsc编译TypeScript到JavaScript代码；
• 第二步：在浏览器或者Node环境下运行JavaScript代码；

是否可以简化这样的步骤呢？

• 比如编写了TypeScript之后可以直接运行在浏览器上？
• 比如编写了TypeScript之后，直接通过node的命令来执行？

上面我提到的两种方式，可以通过两个解决方案来完成：

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

使用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

image.png

使用webpack搭建ts环境

1.调整项目目录和文件内容，并执行npm init自动生成 package.json文件

image.png

./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

2.本地安装 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'
  }
}

3.创建./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'
    })
  ]
}

4.安装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

image.png
image.png

5.但这样还是麻烦，每次修改了代码都得重新执行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

image.png