前序

认识TypeScript

TypeScript编译环境

let message:string="HelloWorld" TypeScript只是在JS的基础上，加上了类型声明，本质运行的时候还是要成一个JS代码。那么是谁将TS-->JS呢？

tsc：typescript compile

babel:插件preset

使用tsc

tsc：将ts代码转为js，最终呈现在浏览器中

1.全局安装： npm install typescript -g

2.体验ts demo.ts

function foo(payload: string){
    console.log(payload.length)
}
//foo(123)  这里传的是number类型，直接就会提示错误
foo("aaa")  //可以传过去，因为参数被限定为string类型

3.将ts转为js代码 tsc demo.ts（ts文件名）

4.之后就会生成同名的js文件

5.在index.html中的src属性，将生成的js文件引入

通过上面的demo可以发现，在编译期间就会提示错误，不用等到运行时才告诉我们说：这个类型传的不匹配，大大减少了我们后期维护的成本。

搭建TS环境

默认情况下，所有ts文件都是在同一个作用域下进行编译，我在demo里声明了name，我在test也声明name，此时就会报错，因为重复声明了，如何将文件变成单独作用域呢？

在下面写一个export {}，表示我这个是一个模块，模块有自己的单独作用域，就可以避免上述这种情况。不过这只是其中一种解决方式，后续我们还会有其他更好的。

我们发现通过上述tsc来执行ts的过程是非常的麻烦的。我们希望在书写好ts文件后，自动创建出了相应的js文件，并且我每次更新代码时，自动跑到浏览器上，并且自动刷新（HMR热更新），能不能这样安排一下？ 可以

1.使用webpack搭建环境：

脚手架其实帮我们搞好了，但是我们最好知道一下原理，方便后期学习

1.npm init：创建package.json

2.npm install webpack webpack-cli -D:安装本地webpack（node_modules文件和package-lock.json）

3.在package.json添加

"scripts:"{
    "test" : "...",
    "build" : "webpack" ,
    当我npm run build就会执行webpack，然后就会帮我们打包
    打包的时候就会夹在我们的webpack.config.js配置文件
    "serve":"webpack serve" 搭建本地服务
}

4.创建webpack.config.js配置：

const path = require("path")
module.exports={
    entry:"./src/main.ts", ts代码的入口
    output:{
    //打包在dist文件夹里
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js" 打包出来的文件名
    }
}

5.安装loadernpm install ts-loader typescript -D

上面4步骤弄好之后，开始正片：通过loader来将ts转为js，loader的作用我在之前的webpack笔记中有详细介绍

module.exports={
    entry:"./src/main.ts", ts代码的入口
    output:{
    //打包在dist文件夹里
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js" 打包出来的文件名
    },
    devServe:{
    },
    导入ts文件的时候，可以省略不写ts后缀名
    这里重写extensions会把以前默认的extensions覆盖掉
    当我ts转为js后，也要把.js写上，省略js后缀名
    resolve:{
        extensions:[".ts","js",".json",".cjs"]
    }
    module:{
        rules:[{
        对我们所有ts结尾的文件使用ts-loader
            test:/\.ts$/,
            loader:'ts-loader'
        }]
    }
}

6.tsc --init:自动生成tsconfig.json

7.npm install webpack-dev-server-D：搭建本地服务

8.npm install html-webpack-plugin -D:设置模板

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins:[{
    new HtmlWebpackPlugin({
        template:"./index.html"使用index.html模板
    })
}]

2.ts-node：node提供的一个库，执行ts-node ts文件名可以直接转换成js文件并且编译，他是运行在node环境下的

安装:

//安装ts-node的时候，首先要先安装这两个依赖
npm install tslib @types/node -g

npm install ts-node -g

使用：ts-node demo1.ts