TS学习+环境搭建

1.官方的TS地址：https://www.typescriptlang.org/docs/handbook/basic-types.html

2.调试环境的搭建

（1）全局安装ts

npm install typescript -g

(2)配置文件 --tsconfig.json -- ts的装换标准

// 生成 tsconfig.json文件
tsc --init

其实通过以上两步就可以了，在命令行执行

例：tsc index.ts  编译结果为index.js

以上需要手动执行编译操作
在项目中为了实现热更新以及自动编译就需要接下来的步骤

(3)生成package.json ---做项目依赖管理

npm init 或者 npm init -y

（4）项目工程化

npm i webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin -D 

(5) 就是我们的webpack.config.js

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

module.exports = {
  entry: './src/index.ts',
  output: {
      filename: 'app.js'
  },
  resolve: {
    // 模块导入扩展名处理
    extensions: ['.js', '.ts', '.tsx']
  },
// 提高开发速度
  devtool: 'eval-cheap-module-source-map',
  module:{
      rules:[
          {
            test: /\.tsx?$/i,
            use: [{
                loader: 'ts-loader'
            }],
            exclude: /node_modules/
          }
      ]
  },
  plugins:[
      new HtmlWebpackPlugin({
          template: './public/index.html'
      })
  ]
}

（6）package.json我目前使用的各种工具的版本

{
  "name": "tsstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --config ./build/webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "-": "^0.0.1",
    "html-webpack-plugin": "^5.3.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5"
  },
  "devDependencies": {
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.0"
  }
}

(7) 那自然就是运行npm run dev了

再啰嗦下我的项目目录

 其中一些安装时遇到的问题我在下一个文章具体描述，谢谢（Shut the door,please）