2021年11月08日入职

2021年11月份

11月08日-11月12日——第一周

11月08日

1. 入职材料提交

2. 了解学习公司考勤/制度/安全开发等内容

3. 完成VPN配置

4. 配置vscode及其相关插件

5. 配置node v16.13.0环境

6. 配置npm 8.1.0

7. 熟悉同组小伙伴

11月09日

知识技能：

1. 完成iterm2的配置

2. 学习git相关知识及提交任务大致流程

   • Git status 查看修改内容->Git add 将修改添加到暂存区-> git commit 添加提交备注->git push 推送到分支上。

   • Git中存在两个具有无限生命周期的分支：master/origin和develop。前者通常是发布版本分支，后者是生产版本分支，当develop分支中的代码开发达到稳定状态，则合并到master分支上，使之上线。即：master为代码成品，develop为代码试验品。

   • 根据功能不同，可在develop分支下创建不同功能分支。

   • 在功能分支代码稳定后，可通过git merge —no—ff合并回develop，相较于git merge的区别在于—no—ff能够保留feature branches，即保留功能分支历史开发信息。

3. 搭建部门前端工作环境

11月10日

知识技能：

1. 通过阮一峰《typescript入门教程》学习typescript基础知识
   1. Typescript对比Javascript的特点：
      • Javascript属于动态类型，运行时才知道具体的数据类型，Typescript属于静态类型，它需要先编译成Javascript，在编译时会对类型进行检查得到每个变量的数据类型； Typescript为弱类型，存在隐式转换；
      • Typescript和Javascript可以共存同个项目中；
      • TypeScript 增强IDE的功能，提供代码补全、接口提示、跳转到定义、代码重构等能力；
      • Ts有丰富的配置选项，可自主选择兼容es3/es6等。

所遇问题：

1. 安装typescript遇到的一些问题：

   1. 如下所示：

      

   npm ERR! code EACCES
   npm ERR! syscall mkdir
   npm ERR! path /usr/local/lib/node_modules/typescript
   npm ERR! errno -13
   npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript'
   npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript'] {
   npm ERR!   errno: -13,
   npm ERR!   code: 'EACCES',
   npm ERR!   syscall: 'mkdir',
   npm ERR!   path: '/usr/local/lib/node_modules/typescript'
   npm ERR! }
   

   ​ 问题原因：出现权限不够这样的错误，是因为之前用 root 用户进行了局部安装npm包的操作，留下所属权为 root 的文件，导致普通用户无法访问 root的文件内容。

   ​ 方法一：（实测有效） ​ 直接在需要安装内容之前加sudo， ​ 比如：sudo npm I -g typescript 即可。 ​ 方法二：（未试） ​ 把当前用户目录下的。npm文件夹所有权改成当前用户即可。 ​ 比如：当前用户名为xxx， ​ 则sudo chown -R xxx ～/.npm ​ 再输入密码即可。

11月10日

知识技能：

1. 通过阮一峰《typescript入门教程》学习typescript基础知识

   1. 通过let a :number 来制定a的类型必须为 number类型。

       ep: a = ‘hello' 	//报错
           a = 20 	//正确。
      

   2. 如果变量声明和赋值同时进行，ts自动对变量进行类型检测。

      let a = 20	//自动认定a为number类型。
      

   3. typescript类型：number/boolean/string/object/any/array/tuple/字面量/void/enum{}/unknown等，javascript里有的没的ts里都有。

   4. unknown和any的区别

      1. 前者实际上是一个类型安全的any；
      2. any类型变量可以赋值给其他类型的变量，而unknown类型赋值给其他类型会报错
      3. 能用unknown尽量优先使用unknown。

   5. 类型断言：手动指定一个值的类型。 写法一： 变量 as 类型；-> s = e as string [在tsx(React的jsx语法的ts版)中必须使用写法一] 写法二：<类型>变量；-> s = e

   6. ts可指定函数返回值类型

      ep:	function mySum(a: number, b: number): number {
              return a + b;
          }	//指定函数的返回值类型为number
      

   7. void类型：用来表示空，以函数为例，就表示没有返回值

   8. never类型：永远不会返回结果，常用于报错

   9. {}类型：用来指定对象中可以包含哪些属性，在属性名后加'？'表示属性是可选的

      • 可选参数必须在必选参数之后，换句话说，必选参数之前不能有可选参数，当函数存在默认参数时，不受此规则的限制。

         ep: let b: { name: string; age?: number };
                b = { name: "小明", age: 18 };
        

   10. 对象中存在[proName:string]:any

       ​ 表示任意类型的属性

           ep: let c: { name: string; [proName: string]: any };
           	c = { name: "小红", age: 18, gender: "男" };
       

   11. 数组的类型声明： 写法一：类型[]; 写法二：Array<类型> （也叫数组泛型）

   12. .tuple元组：就是固定长度的数组，存储效率相比数组更好

       ​ 写法：[类型，类型，类型]

   13. 类型的别名

           ep: type myType = 1 | 2 | 3 | 4 | 5;
               let k: myType;
               let l: myType;
               let m: myType;
               k = 2;
       

   14. 实现typescript的实时监听转化： 方法一：在终端通过 tsc xxx.ts -w 命令来实现对当前ts文件的监听，实时编译转化成最新的js文件。 缺陷：只能对当前ts文件进行监听，如果有多个ts需要打开多个终端，适用范围窄。 方法二：在当前文件夹下，创建tsconfig.json文件，代码块只需1行 {} 来符合json文件的格式要求，在终端输入 tsc -w 即可对当前文件夹下的ts进行实时转化和监听。

   15. 在属性名前加 readonly 实现该属性只在创建时被赋值

           ep: interface Person {
               readonly id: number;
               name: string;
               age?: number;
               [propName: string]: any;
           }
           let tom: Person = {
               id: 89757,
               name: "Tom",
               gender: "male",
           }; //修改 tom.id = 666，则报错
       

   16. typescript中的函数表达式

           let mySum = function (x: number, y: number): number {
               return x + y;
           };
       

       ​ 上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。 ​ 若需要手动 mySum 添加类型，则为️：

           let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
               return x + y;
           };
       

   17. =>在typescript和javascript中的区别： 在 TypeScript 类型定义中，=> 表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。 在 ES6 中，=> 为箭头函数。

   18. 重载：允许一个函数接受不同数量或类型的参数时，作出不同的处理。

           ep: function myReverse(x: number | string): number | string | void {
                   if (typeof x === "number") {
                       return Number(x.toString().split("").reverse().join(""));
                   } else if (typeof x === "string") {
                       return x.split("").reverse().join("");
                   }
               }
       

11月11日

知识技能：

1. tsconfig.json 文件的功能：

   {
       //用来指定哪些ts文件需要被编译，数组内存储路径
       "include": ["../src/**/*"],
       //不需要被编译的文件目录
       'exclude’:[],
       //关于ts编译的一些配置
       "compilerOptions": {
           //用来指定ts被编译为es的版本
           "target": "es6",    
           //用来指定使用的模块
           "module": "system",
           //用来指定项目中要使用的库,在浏览器环境下基本不用配置
           "lib": ["DOM"],
           //用来指定编译后文件所在目录
           "outDir": "../dist",
           //用来将所有全局作用域中的代码合并成一个文件
           "outFile": "../dist/app.js"
           //是否对js文件进行编译，默认是false
           "allowJs": false,
           //是否检查js代码是否符合语法规范，默认是false
           "checkJs": false,
           //是否移除注释，将ts的注释带到js中，默认是false
           "removeComments": false,
           //不生成编译后的文件，默认是false
           "noEmit": false,
           //当有错误时，不生成编译后的文件，默认是false
           "noEmitOnError": false,
   
           //所有严格的总开关，默认是false。一开启，下列所有配置都为true
           "strict": false,
           //用来设置编译后的文件是否开启严格模式，默认是false
           "alwaysStrict": false,
           //是否不允许隐式any类型的出现，默认是false
           "noImplicitAny": false,
           //不允许不明确类型的this，默认是false
           "noImplicitThis": false,
           //严格的检查空值，默认是false
           "strictNullChecks": false
       }
   }
   

2. webpack+typescript文件结合流程

   1. 新文件夹下，npm init -y 初始化项目 npm i -D webpack webpack-cli typescript ts-loader 安装所需依赖 （-D =>该依赖只用于生产环境，是-save和-dev的缩写）
   2. 编写webpack的配置文件webpack.config.json 如 entry / output / module / plugin 等
   3. 编写ts的配置文件tsconfig.json 如 include / exclude / compilerOptions 等
   4. 在package.json文件的script中，创建"build":"webpack"来实现打包

3. html-webpack-plugin插件作用：

   在build完成的同时，生成所需要的html文件，该文件自动引入js文件代码。

4. webpack-dev-server插件作用：

   1. webpack内置服务器
   2. 通过在package.json中script设置 (windows下）："start":"webpack serve --open chrome.exe", (mac下）："start":"webpack serve --open"
   3. 来实现webpack的根据变化实时打包，并在chrome下打开该项目。

5. clean-webpack-plugin插件作用： 实时更新时，删除原有dist下文件，生成dist下最新文件。 注：据说webpack5可以不用安装这个插件，直接在output中写clean:true即可，我尝试了报错。

6. 在ts文件中进行一些import/export操作时，webpack不知道这些模块是可以被引入的，这时候需要在webpack.config.js中的module.exports进行配置resolve。

       ep:	resolve:{
       		extensions:['.ts','.js']
       	}	//这样就可以使得webpack能够识别import的ts,js文件
   

所遇问题：

1. ts文件通过Webpack进行打包报错

   1. 问题描述：

      

   2. 问题所在： webpack.config.js文件中plugins下的HTMLWebpackPlugin和CleanWebpackPlugin插件顺序颠倒。

      

   3. 解决方案： 调换new 插件代码的顺序，应该先清除旧的文件代码，再生成新的打包文件。

2. mode模式指定问题

   1. 问题所在：

      没有指定当前打包mode模式，development或者production。

   2. 解决方案： 在package.json中进行配置：

      在webpack.config.js中进行配置：

      

      其他人的回答，解决方案

3. dist中文件在build时生成，服务器启动时消失？

   1. 问题描述：

      想通过webpack对ts文件进行打包，输入npm run build 之后，当前文件夹内的ts文件均编译成js文件输出在dist文件中，但是在终端执行 npm run start 也就是进行webpack-dev-serve启动的过程中，dist文件夹下的文件均消失，但是通过网页F12source中又能得到所需要文件，这是正常现象吗？为什么？

   2. 解决问题： 正常，npm run build通常会用在打包生成文件，然后发布的这类需求中，dist文件正是在生产环境中所需要的。当我安装了webpack-dev-serve启动服务器的这个过程，还是处于开发环境下，这时在内存中的dist文件就会转到缓存上来，供开发使用，这也是为什么npm run start之后 dist下文件消失却能在F12 source的localhost:8080中找到的原因。