TypeScript

1.基本类型

1. 声明变量

   let a:number
   

2. 直接使用字面量

let a:10
let b:"male"|"female"

3. any表示任意类型，关闭了类型检测，可以赋值给任意变量

4. unknown表示未知类型的值，不能赋值给其他变量

   if(typeof e==="string"){
   s=e
   }
   
   s=e as string
   s=<string>e
   

5. void设置函数返回值，表示无返回值

6. never没有值，表示永远不会有返回结果

7. object表示对象中有哪些属性，属性是什么类型

   let a:{name:string,age?:number,[propName:string]:any}
   let d:(a:T,b:T)=>T
   

8. array

   let e:string[]
   let e:Array<string>
   

9. tuple长度固定

   let h:[string,number]
   

10. enum枚举类型

    enum Gender{
    Male=0,
    Female=1
    }
    let s:Gender
    s=Gender.Male
    

11. |或 &与

12. 类型别名

    type mytype=string
    let a:mytype
    

2.编译选项

1. 自动编译选项

   tsc 文件名 -w 监视模式 只对当前文件监视

2. 新建一个tsconfig.json文件

   然后再命令行直接输入tsc 会编译所有ts文件

   tsc -w 监视所有ts文件

3. tsconfig.json是配置文件

   include用来指定哪些ts需要被编译 ./src/**/* * src下任意目录下的任意文件

   exclude表示不包含 ./src/hello/**/* * 不需要被编译的文件

   extends继承的配置文件

   files被编译的文件

   compileOptions编译器的选项

   ​ target用来指定ts用来被编译的版本

   ​ module指定要是用的模块化的规范

   ​ lib用来制定项目中要使用的库

   ​ outDir用来指定编译后的文件所在目录

   ​ outFile将代码合为一个文件

   ​ allowJs是否允许目对js文件进行编译，默认是false

   ​ checkJs是否检查js文件是否符合规范，默认是false

   ​ removeComment是否移除注释

   ​ noEmit不生成编译后的文件

   ​ noEmitOnError当有错误时不生成编译后的文件

   ​ alwaysStrict用来设置编译后的文件是否使用严格模式

   ​ noImplicitAny不允许使用隐式的any

3. webpack打包ts

1. yarn init -y

2. webpack打包时使用的是箭头函数

   output environment:arrowFunction:false

3. yarn add webpack webpack-cli -D

4. 资源

   1. asset/resource 发送单独的文件并导出URL (加载字体)
   2. asset/inline 用于导出URL base64格式
   3. asset/source 用于导出资源的源代码
   4. asset会在resource和inline中选择一个

5. images图像

   1. (背景图像)

6. 加载数据

   1. csv-loader
   2. xml-loader

7. json

   1. toml
   2. yaml
   3. json5

8. babel-loader

   1. babel-loaeder 应用babel解析es6的桥梁
   2. @babel/core babel核心模块
   3. @babel/preset-env babel预设，一组babel插件的集合
   4. @babel/runtime async await
   5. @babel/plugin-transform-runtime

{
	test:/\.js$/,
	exclude:/node_modules/
	use:{
		loader:babel-loader,
		options:{
			presets:["@babel/preset-env"],
			plugins:[
				[
					"@babel/plugin-transform-runtime"
				]
			]
		}
	}
}

1. 代码分离

   1. 入口起点

      如果有重复的模块被引入会重复加载到每个文件中

      entry:{
      	index:路径,
      	another:路径
      }，
      output:{
      	filename:"[name].bundle.js"
      }
      

   2. 防止重复

      把公共模块导入到一个文件中，然后引入

      entry:{
      	index:{
      		import:路径,
      		dependOn:"shared"
      	},
      	another:{
      		import:路径,
      		dependOn:"shared"
      	},
      	shared:"公共模块名字"
      },
      output:{
      	filename:"[name].js"
      }
      
      
      使用webpack内置插件split-chunks-plugin
      把公共模块抽离成公共文件
      entry:{
      	index:路径,,
      	another:路径,
      },
      output:{
      	filename:"[name].js"
      },
      optimization:{
          splitChunks:{
              chunks:all
          }
      }
      

   3. 动态导入

      动态导可以自己抽离公共文件

      动态导入和静态导入一起有时，必须配置抽离，否则不会抽离

      懒加载

      entry:{
      	index:路径
      },
      output:{
      	filename:"[name].js"
      }
      

   4. 预加载/预获取

      import(/* webpackChunkName:'打包后的名字',webpackPrefetch:true*/)
      

   5. 缓存

      optimization:{
          splitChunks:{
              cacheGroups:{
              	vendor:{
              		test:/[\\/]node_modules[\\/]/,
              		name:"vendors",
              		chunks:"all"
              	}
              }
          }
      }
      

   6. 拆分开发环境和生产环境配置

      1. 公共路径publicPath

         output{
         	publicPath:"http://localhost:8080/"
         }
         

      2. 环境变量

         terser-webpack-plugin

         module.ecports=(env)=>{
         	return {
         		mode:env.production?'production':"development",
         		optimization:{
         			minimizer:[
         				new CssMinimizerPlugin(),
         				new TerserPlugin()
         			]
         		}
         	}
         }
         

      3. npm脚本

         scripts:{
         	"dev":"webpack serve -c 配置文件目录",
         	"build":"webpack -c 生产环境目录"
         }
         

      4. 提取公共配置

         1. webpack-merge

         const {merge}=require("webpack-merge")
         
         

   7. source-map

      1. 显示错误来源
      2. 分类
         1. eval 默认 显示源文件地址
         2. false 不显示
         3. source-map 生成source-map文件
         4. hidden-source-map 关闭最后注释的source-map地址
         5. inline-source-map 生成dataurl格式的源文件地址
         6. eval-source-map

   8. dev-server

      devServer:{
      	指向当前服务的物理路径
      	static:，
      	compress:是否进行压缩
      	port配置端口号
      	headers:{}添加响应头
      	开启代理
      	proxy：{
      		"/api":"服务器地址"
      	}，
      	https
      	https:true,
      	http2:true
      	historyApiFallback:true   单页应用  中如果没有找到页面可以使用访问到
      	host:'0.0.0.0'其他人也可以访问
      	
      }
      

   9. 模块热替换 热加载

      devServer:{
      	hot:true,
      	liveReload:true
      }
      

   10. eslint

       eslint插件

       eslint-loader

   11. git-hooks husky

       git提交时代码检查

       husky

       git config core.hooksPath 文件路径  修改hook路径
       

   12. 模块与依赖

       1. 模块解析 resolve

       2. 外部扩展 externals

          externals:{
          	"第三方库":["cdn地址",“别名”]
          }，
          externalsType:"script"
          

   13. 依赖图 dependency graphy

   14. postcss与css模块 自动添加前缀

   15. web works

   16. typescript

       1. ts-loader

   17. entry

       //入口文件放到一个出口文件里
       entry:{
       	main:[入口文件放一起]，
       }
       
       
       //入口文件引用第三方库，
       //第三方库单独打包到一个文件里
       entry:{
           main:{
               dependOn:"lodash",
               import:[入口文件]
           },
           lodash:'lodash'
       }
       
       
       

   18. 自定义html模板配置

       plugins:[
       	new HtmlWebpackPlugin({ 
       		title:""  //网页标题
       		inject:'body'//script放置位置
       		chunks：['main'，'lodash']  //规定当前页面打包哪些chunk--入口文件
       	})
       ]
       
       
       html文件中
       <title><%= htmlWebpackPlugin.options.title %></title>
       

   19. 多页面

       plugins:[
       	new HtmlWebpackPlugin({ 
       		title:""  //网页标题
       		inject:'body'//script放置位置
       		chunks：['main'，'lodash']  //规定当前页面打包哪些chunk--入口文件
       	}),
       	new HtmlWebpackPlugin({ 
       		title:""  //网页标题
       		inject:'body'//script放置位置
       		chunks：['main'，'lodash']  //规定当前页面打包哪些chunk--入口文件,
       		filename:'',//文件名字
       		publicPath:''//设置包的前缀
       		
       	})
       ]
       

   20. tree shaking

       没有使用不会打包

   21. sideEffects

       package中配置，指定哪些有副作用，得打包

   22. 渐进式网络应用程序PWA

       workbox-webpack-plugin

       离线访问是根据浏览器缓存实现的

       http-server
       
       devServer:{
       	devMiddleware:{
       		writeToDisk:true  //写入到硬盘里
       	}
       }
       
       plugins:[
       	new WorkboxPlugin.GenerateSW({
       		clientClaim:true//快速启用service works
       		skipWaiting:true//不允许遗留任何旧的service work
       	})
       ]
       
       
       注册service-works
       在入口文件里书写
       if('serviceWorker' in navigator){
       	window.addEventListener('load',()=>{
       		navigator.serviceWorker.register('/serivce-worker.js').then((res=>{
       			
       		})).catch((error)=>{
       			
       		})
       	})
       }
       

   23. shimming 预置依赖

       实现按需加载，第三方库

       imports-loader

       在入口文件中不引用第三方文件
       const webpack=require('webpack')
       plugins:[
       	new webpack.ProvidePlugin({
       		_:"lodash"
       	})
       ],
       module:{
       	rules:[
       		this指向window
       		{
       		test:require.resolve("./src/index.js"),
       		use:'imports-loader?wrapper=window'  
       		}
       	]
       }
       
       
       
       全局导出exports
       exports-loader
       module:{
       	rules:[
       		this指向window
       		{
       		test:require.resolve("./src/index.js"),
       		use:'imports-loader?wrapper=window'  
       		},
       		{
       		test:require.resolve("文件")，
       		use:"exports-loader?type=commonjs&exports=file,multiple|helpers.parse|parse"
       		}
       	]
       }
       
       
       要导出的文件
       const file='example.txt'
       const helper={
       	test:function(){
       	
       	},
       	parse:function(){
       	
       	}
       }
       

   24. polyfills

       @babel/polyfill
       babel-loader @babel/core @babel/preset-env corejs@3
       module:{
       	rules:[
       		{
       			test:/\.js/,
       			use:{
       				loader:'babel-loader',
       				options:{
       					presets:[
       						'@babel/preset-env',
       						{
       							target:[
       								'last 1 version',
       								'>1%'
       							],
       							useBuiltIns:'usage',
       							corejs:3
       						}
       					]
       				}
       			}
       		}
       	]
       }
       

   25. 创建Library

       output:{
       	library:'文件名'
       }
       
       output:{
       	library:{
       		name:'库名字',
       		type:'window'  commonjs   module umd  打包以后以什么样的方式引入
       	}
       }
       

   26. 模块联邦

       微前端

       ​

   27. 提升构建性能

       通用环境

       ​ 更新到最新版本

       ​ 将loader应用于最少数量的必要文件

       ​ 引导

       ​ 解析

       ​ 持久化缓存

       开发环境

       生产环境

       dll

       webpack.dll.config.js
       
       

       worker-pool

       ​ thread-loader

4.面向对象

1. 类 所有具有相同特征的对象的抽象 对象 具体实现

   使用class关键字创建
   class 类名{
   	实例属性
   	name:string=""
   	定义类性/静态属性
   	static age:number
   	只读属性
   	readonly sex:string
   	
   	构造函数
   	constructor(name:string,age:number){
   		this.name=name
   		this.age=age
   	}
   	
   	实例方法
   	方法名(){
   		
   	}
   	
   	静态方法/类方法
   	static 方法名(){
   	
   	}
   }
   实例化对象
   const 对象=new 类名()
   
   

2. 继承

   class animal{
   	name:string
   	age:number
   	constructor(name:string,age:number){
   		this.name=name
   		this.age=age
   	}
   	bark(){
   	
   	}
   }
   
   class Cat extends animal{
   	sex:string
   	constructor(name:string,age:number,sex:string){
   		super(name,age)
   		this.sex=sex
   	}
   	重写
   	bark(){
   		super.bark()
   	}
   }
   

3. 抽象类 不能创建对象，只能作为父类

   abstract class animal{
   	name:string
   	age:number
   	constructor(name:string,age:number){
   		this.name=name
   		this.age=age
   	}
   	抽象方法，没有方法体 只能定义在抽象类中，子类必须实现抽象方法
   	abstract bark():void
   }
   
   class Cat extends animal{
   	sex:string
   	constructor(name:string,age:number,sex:string){
   		super(name,age)
   		this.sex=sex
   	}
   	重写
   	bark(){
   		super.bark()
   	}
   }
   

4. 接口

   用来定义一个类结构

   用来定义一个类中包含哪些属性和方法

   可以重复声明=》合并

   都不能有实际的值，只定义结构

   其实是规范

   interface 名{
   	name:string
   	bark():void
   }
   class my implements 名{
   	必须实现接口的所有属性和方法
   }
   

5. 属性的封装

   class animal{
   	_name:string
   	_age:number
   	constructor(name:string,age:number){
   		this._name=name
   		this._age=age
   	}
   	
   	get name(){
   		return this._name
   	}
   	set name(value:string){
   		this._name=value
   	}
   }
   
   
   class animal{
   	直接声明加赋值
   	constructor(public name:string,public age:number){}
   
   }
   

6. 泛型

   不知道具体的类型

   function fn<T>(a:T):T{
   	return a
   }
   fn(10)不指定泛型  自动推断
   fn<string>('hello') 指定泛型
   
   function fn<T,K>(a:T,b:K):T{
   	return a
   }
   
   interface Inter{
   	length:number
   }
   
   function fn<T extends Inter>(a:T):number{
   	return a.length
   }
   

5.项目

1. 项目搭建

   1. webpack搭建
   2. css编译

2. 界面

3. 定义类

4. food

5. snake

6. score-plane

7. 分模块

8. 撞墙和吃食检测

   1. 只会在一个方向上变化