TypeScript是一门编程语言

完全兼容JavaScript，是JavaScript的超集

引入类型系统，可以尽早的定位错误位置，提升开发效率

全局安装typescript环境：npm i -g typescript

检查是否安装成功以及查看包的版本：tsc -v

1、单独的ts文件

在文件目录下，tsc init

ts 本身不能直接运行，要先转成js   （tsc 文件名.ts）   去运行js文件

2、Webpack 打包 TS 文件

（1）新建文件夹 

public 

        index.html

src 

        index.ts

index.ts

let str: string = 'Hello TypeScript';
console.log(str)

npm init

npm i webpack

          webpack-cli  （webpack工具）

          webpack-dev-server （开启一个开发服务，编写代码，自动刷新浏览器，看到结果）

          ts-loader   处理一些webpack不能处理的文件，webpack只能处理js、 json，其他类型                             处理不了，借助loader去处理，ts-loader将ts转化为js）

          html-webpack-plugin （帮助打包html，把js打包后的script标签自动嵌入文档当中）

          -D

（2）安装完成创建一个webpack的配置文件

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //打包的入口，告诉webpack从哪个文件开始打包
    entry: './src/index.ts',  
    //打包的出口，打包完之后放在build文件夹下
    output: {   //
        path: resolve(__dirname, 'build'),
        filename: 'js/bundle.js' 
    },
    //运行模式：开发模式
    mode: 'development',
    //设置loader
    module: {
        rules: [
            {
                //在webpack打包文件的过程当中，遇到ts或者tsx文件，交给ts-loader去转换
                //？代表可选，x可选可不选，ts或tsx
                test: /\.tsx?$/,  
                use: 'ts-loader'
            }
        ]
    },
    //设置文件的后缀
    resolve: {
        extensions: ['.ts','.tsx','.js']
    },
    plugins: [
        //打包html文件
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ],
    //开发服务
    devServer: {
        //监听端口为3000，自动打开浏览器并访问3001
        port: 3001,
        open: true
    }
}

在项目的根目录下创建 tsconfig.json （运行tsc --init就会创建）

 （3）运行

npx webpack    打包最后产生bulid的目录

npx webpack-dev-server    开启服务

启动服务太费劲，设置一个别名

webpack.config.js

        "script": {

        "start": "webpack-dev-server"

        "bulid": "webpack"

        }

npm start 开启服务

node_modules为什么不能进版本库

保存时比较慢  node_modules  里面的文件进到了版本库里面，vscode会实时监测他们的变化，是一个高负载的状态，只要动就会检测文件有没有变化，可以设置.gitignore忽略文件，忽略node_modules 的变化 ，比对的时候就可以很快反应过来