TypeScript概述

什么是TypeScript

拥有类型系统的JavaScript的超集，可以编译成纯JavaScript

1. 类型检查：在编译阶段进行严格的静态类型检查
2. 语言扩展 包括ES6的新特性，从其他语言借鉴新特性
3. 工具属性 TypeScript可以编译成标准的JavaScript，可以在任何浏览器、操作系统上运行，无需任何运行时的额外开销

为什么使用TypeScript

1. 接口定义可以代替文档，提高开发效率，降低维护成本
2. 重塑团队的类型思维

JavaScript与TypeScript的区别

1. 强类型与弱类型
   JavaScript属于弱类型语言，对变量的类型比较宽容，不会强制变量的数据类型
   TypeScript属于强类型，必须声明变量的数据类型，并且在之后的使用中变量的类型不可更改
2. 静态类型与动态类型
   JavaScript属于动态类型，变量的数据类型在运行时被确定
   TypeScript属于静态类型，变量的数据类型在编译时确定

TypeScript安装与运行

TypeScript安装

npm install typescript -g

ts项目创建

1. 新建文件夹
2. 在编辑器中打开文件夹，打开cmd
3. 在项目文件目录下，在cmd中运行 npm init -y初始化项目，生成package.json文件
4. 在cmd中运行 tsc --init 初始化ts文件生成ts.config.js文件

ts文件运行

在命令行中执行tsc 文件路径即可执行，会编译成相同文件名的js文件

自动编译

vscode配置

在vscode中terminal->run task->tsc:watch


即可自动将ts文件编译成js文件

快捷运行

在vscode中安装code runner 插件安装完毕后，在想要执行的文件中点击鼠标右键，点击code runner即可执行
在运行时运行js文件即可，可以将js文件引入html文件中

webpack配置

在webpack的配置文件中，配置以下配置项

const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
    entry:'./src/index.ts',
    output:{
        filename:"app.js"
    },
    resolve:{
        extensions:[".js",".ts",".tsx"]
    },
    module:{
        rules:[
            {
                test:/\.tsx?$/i,
                use:[{
                    loader:'ts-loader'
                }],
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/tpl/index.html"
        })
    ]
}

在配置完成后，安装htmlWebpackPluginnpm install html-webpack-plugin -D，编写模板文件
在webpack.dev.config.js文件中配置以下配置项

module.exports={
    devtools:"cheap-module-eval-source-map"
}

在webpack.pro.config.js文件中配置以下配置项

const cleanWebpackPlugin=require("clean-webpack-plugin")
module.exports={
    plugins:[
        new cleanWebpackPlugin()
    ]
}

安装clean-webpack-plugin
在webpack.config.js文件中配置以下配置项

const merge = require("webpack-merge")
const baseConfig = require("./webpack.base.config.js")
const devConfig = require("./webpack.dev.config.js")
const proConfig = require("./webpack.pro.config.js")
let config = process.NODE_ENV === "development" ? devConfig : proConfig
module.exports=merge(baseConfig,config)

安装webpack-merge
在package.json文件中修改以下配置项

 "main": "./src/index.ts",
  "scripts": {
    "start":"webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

运行

在cmd中运行npm run start即可运行