不练剑的温不胜

学习TS必须要对TS的配置有一定了解 生成tsconfig.json 文件 – tsc --init命令生成 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263"compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印诊断信息 "target": "ES5", // 目标语言的版本 "module": "CommonJS ...

引入我们先看下面简单的代码 1234function foo() { foo();}foo(); 这样就会报错 某些情况下，调用堆栈中函数调用的数量超出了调用堆栈的实际大小，浏览器会抛出一个错误终止运行。上面的就是无限循环调用导致。

理解执行上下文 执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念 执行上下文的类型执行上下文总共有三种类型 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。 Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用 执行栈执行栈，也叫调用栈，具有LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。根据执行栈LIFO规则，当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中Pop出，上下文控制权将移到当前执行栈的下一个执行上下文。 执行上下文的创建执行上下文的创建分两个阶段:创建阶段、执行阶段 创建阶段 确定 this 的值，也被称为 This Binding。 全局执行上下文中，this 的 ...

泛型泛型在TypeScript 是很重要的东西,个人理解类似于类型入参 函数泛型 1234567891011121314151617181920212223//普通类型函数function num (a:number,b:number) : Array<number> { return [a ,b];}num(1,2)function str (a:string,b:string) : Array<string> { return [a ,b];}str('独孤','求败')// 函数优化function Add<T>(a: T, b: T): Array<T> { return [a,b]} Add<number>(1,2)Add<string>('独孤','求败')//也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以function S ...

枚举在JavaScript中是没有枚举的概念的TS帮定义了枚举这个类型,定义通过enum关键字 数字枚举 123456789enum Types{ Red, Green, BLue}//简单的定义默认为数字枚举，那么什么是数字枚举呢，即：枚举值是数字，如果你不设置默认值，那么每一个组员默认都是从0开始的自增数console.log(Types.Red);//0console.log(Types.Green);//1console.log(Types.BLue);//2 增长枚举：细心的我们能发现数字枚举是会自增的，那么如果我们给上一个设置了一个默认值，下一个是自动增加 12345678enum Types{ Red = 1, Green, BLue}console.log(Types.Red);//1console.log(Types.Green);//2console.log(Types.BLue);//3 字符串枚举 字符串枚举的概念很简单。 在一个字符串枚举里，每个成员都必须用字符串字面量 ...

Class类定义类123456789101112class Person { //在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明 name: string age: number constructor(name: string, age: number = 11) { //你如果了定义了变量不用 也会报错 通常是给个默认值 或者 进行赋值 this.name=name this.age=age; } run() { }}let item=new Person('张三') 类的修饰符 访问修饰符总共有三个 public、private、protected public :公共的,没有访问限制 protected : 受保护的,只能自身和子类访问，实例不能访问 pravite :私人的，只能自身访问 只读修饰符 readonly 123456789class ...

前言继续上级第一章的学习 类型断言 | 联合类型 | 交叉类型联合类型123456789//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机//所以我们就可以使用联合类型支持座机字符串let myPhone: number | string = '010-820'//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值let myPhone: number | string = true//函数使用联合类型const fn = (something:number | boolean):boolean => { return !!something} 交叉类型多种类型的集合，联合对象将具有所联合类型的所有成员 12345678910111213interface People { age: number, height： number}interface Man{ sex: string}const haleFn = (man: People ...

前言目前，JavaScript已经成为编写网页和应用程序的主要语言，前端也在一个产品中的权重越来越大，但是因为JavaScript设计之初的先天问题，导致JavaScript创建大型复杂Web应用系统很困难，也很难维护。 比如 JavaScript的数据类型是不确定的，可以进行隐式转换，导致很多错误在运行的时候才能发现，这就需要开发使用更多的精力去检查代码； 而TypeScript能解决这些问题，甚至他是JS的超集，JS有的我都有，JS没有的我也有，总之我是前端版西厂对东厂。 起步安装12npm install typescript -g tsc -v 以上为安装和查看安装的版本 我们创建一个ts文件，然后使用 tsc [文件名] 就可以执行生成一个解析的js文件当我们需要配置ts我们可以执行tsc -init去创建 tsconfig.json 文件例如我们取消严格模式的时候可以在该文件中修改strict:false 为了方便我们学习我们需要借用一些工具全局安装 ts 的编译工具，使用 ts-node 可以将 ts 文件执行 npm i ts-node -g 使用：ts-nod ...

前言为了方便自己开发做的总结 总结插槽slot匿名插槽 12345678910<!-- 子组件 --><template> <div><slot></slot></div></template><!-- 父使用组件 --> <Dialog> <template v-slot> <div>2132</div> </template></Dialog 具名插槽具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中 12345678910111213141516171819<!-- 子组件 --><div> <slot name="header"></slot> <slot></slot> <slot ...

当执行 npm run dev命令的时候，会去项目的package.json文件对象的scripts对象中去寻找，然后执行对应的命令，比如我们使用vite去构建vue项目。配置文件 12345"scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview" } 如上，找到dev后,会去执行vite 命令,但是如果我们直接执行 vite,那么就会报错，所以就可以得到执行vite的时候这边项目做了配置。 其实在执行的时候，这边会在本地的node_modules文件中去寻找vite去执行,如果没有就会去 npm install -g（全局包）中去寻找，如果这里面有，也可以去执行，如果这里也没有，那么就去直接去系统的环境变量中去寻找，但是一般你没配置就没有了，然后就报错，这就是这边执行的全部过 ...