项目编写框架总结
webpack 需要处理图片 js 视频 css文件大量文件适合
rollup 生产环境纯js时候rollup 轻巧精简
esbuild 目前对生产环境不太好（vite是一个工具的整合，生产用rollup ，开发用esbuild）
rollup命令启动：
npm i rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve -D
配置rollup.config.js 如果需要想通过esmodule来（import 引入文件）编写配置文件需要 需要修改package.json 里的type为 "type": "module",
es模块下没有__filename的变量需要自己构建
手写ts 的let name定义 会于ts内置类型的name冲突，想要解决冲突可以在文件尾部export{}// 默认这是一个独立模块不影响其他变量定义
写ts规范：
基础类型 const name：string='CXK'
我们在实用基本类型的时候需要采用小写类型来标识 大写来描述实实例的类型
![]GQFM(ZLIHCRH7{EAPZC@DE.png](p1-juejin.byteimg.com/tos-cn-i-k3…?)
包装类型:
let cxk:String= new String('cxk')// 这种情况就是 类的类型 简称类类型 用来描述实例的类型 给实例添加类型
js是语法，ts是类型 学习ts是往js里添加类型
数组声明
let arr：number[]=[];
let arr:Array<number>=[]
let arr:(number|string)[]=[];
let arr:Array<number|strin>=[];
元组：let tuple:[string,number,number,string]=[];
普通枚举:
例如
enum STATUS{
"OK",
"NO_OK"=100,
"NOT_FIND"
}
STATUS.OK=OK
并且枚举没有值会根据上面的值自动累加，例如STATUS.NOT_FIND的值是101
异构枚举：
例如
enum STATUS{
"OK"='OK',
"NO_OK"=100,
"NOT_FIND"
}
这是一个 枚举中有字符串还有数字 NOT_FIND的值就无法由NO_OK推导
以上枚举会被编译成对象
常量枚举 (不会编译成对象，使用常量枚举减少编译压力):
const enum STATUS{
"OK"='OK',
"NO_OK"=100,
"NOT_FIND"
}
枚举需要大写 防止变量冲突
null跟undefined
如果禁止非严格null检测，null和undefined可以复制给任何类型（null,undefied任何类型的子类型）
void 的类型标识空类型
undefiend 可以赋予给void 都代表空，null不行
never 永远不
例如函数无法执行完毕
````
function whileTrue():nerver{
while(true){
}
}
fuction throwError():nerver{
throw Error();//出错函数无法执行完毕
}
例如可以这么写代码
如果逻辑缺失会被检测到
代码的完整性保护
const 跟let 类型定义的区别
const a =1 默认回退到const a:1=1 a是字面量类型
如果let a=1 会推到let a:number=1;
看场景使用 const let使 类型推导更为规范;
联合类型问题:
联合类型在使用方法的时候只能采用公共方法，不然会报错，建议先定义再使用保证安全， 或者使用断言;
let strOrNum ：string |number ;
断言联合类型使用：
（strOrNum! as string）.charCodeAt(0);
或者
（<number>strOrnNum!）.toFixed(3)
（告诉ts这里！不为空的后果开发人员自己承担）
（注：这里发现 ！是ts语法的 ）
let cxk=document.getElementByid（'cxk'）;
ele?.style.background='green';//问号是取值操作不能赋值
ele.style.background='red'//感叹号标识某个变量一定存在
还有一种特殊情况
想把strOrum断言成布尔值
（strOrNum！ as unknown as boolean）
这是双重断言不建议使用会破坏原有类型关系，不排除特殊使用场景
可以将大类型范围断言定义成小类型范围
type Direction ='up'|'down'|'left'|'right'
let direction:Direction;
let up:'down' =direction !as 'down'
ts 函数导出开发规范
export function xx(){
const a=()=>{}
}
ts 开发中 函数声明的函数 不能标注啊函数类型
通过表达式声明的函数，赋值要满足类型定义的兼容性
例如
const sun:(a:any,b:any)=>any=function(a:string,b){
return a+b
}//这样可以
const sun:(a:number,b:any)=>any=function(a:string,b){
return a+b
}//这样就炸了
函数类型的定义（a:any,b:any）=>any |(a:any,b:any):any
const sum :{(a:any,b:any):any} =function(a,b){
return a+b
}
进化版
type ISum={(a:any,b:any):any}
const sum: ISum =function(a:string,b:string){
return a+b
}
这里可以看到a,b两参数定义了string类型 其实兼容的目标是ISum类型里的any类型
const sum= function(a:string,b?:string){
return a+b}
这里的?是可选参数的意思可选参数只能从第二位放起，函数形参第一位必须要有
const sum= function(a:string,b?:string='cxk'){
} 可穿参数跟 默认值同时设置是冲突的
type ISum={(a:string,b?:string):string}
const sum: ISum =function(a:string,b:string='cxk'){
return a+b
}
这种属于兼容类型处理，采用的是直接定义的类型
ts里尽量不采用this做函数式编程函数的上下文，会有this的类型推导问题
例如
function getValue（key）{
return this[key];//这里的this 推导是any
}
const person={name:'cxk',age:28}
getValue.call(person,'name')
如果限制this类型，需要手动指定类型(手动指定很累，多一个参数需要手动加)
function getValue（this:{name:string,age:number},key）{
return this[key];
}
const person={name:'cxk',age:28};
getValue.call(person,'name')
还可以根据值来获取类型
const person:IPerson={name:'cxk',age:28};
type IPerson=typeof person;//type 有一个变态提升的效果
type Ikeys=keyof IPerson
ts是类型的重载 ，js的重载是通过arguments来做的
