1.前言

1. 配置
2. 开怼

---

2. 分析上个章节的代码

1. 紧接上文 1.png
2. 这个报错是 说这个 person是隐式的任意类型,

3. 其实就是这个 TS 要求这个变量必须有明确的类型,所以报错了
4. 指定类型就可以了
   语法就是 变量后 : string

function sayHello(person:string) {
    return person+"吃了吗?"
}

---

3. 然后编译 tsc 文件名

---

4. 在js中引入 编译后的js文件查看效果

我们在学习中就需要经常编译 ,经常的引入 ,想想都觉得的麻烦,
所以配置了文件,下面简单介绍下

---

5 环境初识配置

1. 下面指令 会生成一个tsconfig.json文件

tsc --init

2. tsconfig.json文件
3. 配置 1.png

---

6. package.json文件

npm init -y

---

7.依赖

1. 这里面很多版本有问题 这是测试没有问题的,可以借鉴下
2. 其中 脚本 scripts 是自己配置的,后面讲解
3. 其他都是常规的 webpack配置
4. 我这里是Mac: "ts-loader": "^6.2.2"
5. windows 的话 : ts-loader 是4.X`版本

{
  "name": "TS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.2.2",
    "typescript": "^4.3.5",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

---

8. webpack配置

1. /webpack.config.js文件
2. HtmlWebpackPlugin 自动把 js文件入口引入到 指定的html模板
3. public/index.html 是个空模板 什么都不用写
4. 直接上代码

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  stats: { children: false },
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    // 扩展名处理
    extensions: [".js", ".ts", ".tsx"]
  },
// 开发阶段编译比较快
  devtool: "cheap-module-eval-source-map",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/ //表示node_modules中的tsx文件不做处理
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./public/index.html"
    })
  ],
  devServer: {
    //    启动gzip压缩
    compress: true,
    //    默认端口 3000
    port: 3000,
    //自动打开默认浏览器
    open: true
}
}

5. 报错 Entrypoint undefined = index.html
6. stats: { children: false },

---

9. 配置 运行指令

1. package.json文件
2. --config 后面跟的是 webpack.config.js的路径,根据自己的需要修改

  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },

---

10. 运行

1. 根据我的配置 会自动打开浏览器
2. 也支持热更新

npm run dev

---

11. 目录结构

1.png

---

参考资料

xcatliu -TS入门教程

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切都是为了部落的崛起

共勉