欢迎来到我的小站

ES6 class类中应用TSclass类的修饰器12345678910111213141516171819202122232425// 类的修饰器：// public (公共) 允许内外部使用// protected (受保护的) 允许在内部和继承内使用// private (私有) 允许在内部使用，但不能在继承中使用// 类的内部和外部，{}内属于内部，外面是外部class Person { // public 内外都可以使用，可省略，不写时默认public。 protected只允许内部使用 name: string // 这里的string注释是TS使用的 private age: 18 public sayHello() { console.log(this.name + this.age + 'say hello') }}class Teacher2 extends Person { public sayBye() { console.log(thi ...

类型断言1234567891011121314151617181920const el = document.querySelector('#img');(el as HTMLImageElement).src = 'xx' // 断言el就是图片元素类型// 对象内的类型断言type TestObj = { a: string};const obj = { test: <TestObj>{ a: 'aaa' }}// 或者const obj = { test: { a: 'aaa' } as TestObj ,}

实用的高级前端 CSS 技巧 解决图片 5px 间距问题 方案一：设置其父元素的 font-size:0px 方案二：在 img 的样式中添加 display:block 方案三：在 img 的样式中添加 vertical-align:bottom 方案四：增加父元素的样式为 line-height:5px 如何让元素的高度与窗口相同当前，前端中 CSS 的单位为 vh，元素高度样式设置为 height:100vh 修改输入框占位符样式这是表单输入框的占位符属性。修改默认样式的方法如下： 1234input::-webkit-input-placeholder { color: #babbc1; font-size: 12px;} 使用 :not 选择器 除了最后一个元素之外的所有元素都需要一些样式，这可以使用 not 选择器轻松实现。 例如，要实现列表，最后一个元素不需要加下划线，如下所示： 123li:not(:last-child) {border-bottom: 1px solid #ebedf0;} 使用 car ...

奇偶排序数组一个整数数组 _nums_，将 nums 中的的所有偶数元素移动到数组的前面，后跟所有奇数元素。 返回满足此条件的 任一数组 作为答案。 输入：nums = [3,1,2,4] 输出：[2,4,3,1] 解释：[4,2,3,1]、[2,4,1,3] 和 [4,2,1,3] 也会被视作正确答案。 思路：双指针 start 从头到尾遍历，end 从尾到头，每当 start 找到奇数，end 找到偶数二者交换，任意时刻 start < end 循环结束，返回数组 A 123456789101112131415var sortArrayByParity = function(nums) {let start = 0, end = nums.length-1 while(start < end){ while(start<end && nums[start]%2 ==0) start++ while(start<end && nums[end]%2 !==0) end-- ...

丑数丑数 就是只包含质因数 2、3 和 5 的正整数。 一个整数 n ，判断 n 是否为 丑数 。如果是，返回 true ；否则，返回 false 。 输入：n = 6 输出：true 解释：6 = 2 × 3 输入：n = 1 输出：true 解释：1 没有质因数，因此它的全部质因数是 {2, 3, 5} 的空集。习惯上将其视作第一个丑数。 负数和 0 肯定不是丑数。（2，3，5）组合相乘肯定是大于 0 的正数 不断使用 2,3,5 去除。如果是丑数，得到的最后的值一定为 1，反之不是 1 那就不是丑数 1234567891011121314let isUgly = function(n) { if(n <= 0) return false while(n%2===0){ n = n/2; } while(n%3===0){ n = n/3; } while(n%5===0){ n = n/5; } return ...

类型注解123456function fn(person: string):void{ // 参数类型是字符串，没有返回值 ///...}fn('str') // 如传递参数非字符串，vscode编辑器中或在编译时将给出错误提示const test:number = 1 有哪些基础类型注解？12345678910111213141516171819// 基础类型:string:number:boolean:null // 只能是null值:undefined // 只能是undefined值:symbol// 引用类型:object // 不常用，多使用接口来给对象进行类型注解// 其他:any // 任意类型:void // 空，用于函数的无返回值的注解:never // 用于标注函数代码永远执行不完（如抛出错误的函数，死循环函数） 什么是类型注解和类型推断、类型断言？类型注解 是显式的标注类型 类型推断 是编辑器根据值来自动推断出类型 (编辑器中鼠标移到变量会显示类型的提示)。 类型断言 是告诉编译器，“相信我，它就是这个类 ...

数组的类型注解1234567891011121314151617181920212223242526272829303132333435const numberArr: number[] = [1, 2, 3]const stringArr: string[] = ['a', 'b']const undefinedArr: undefined[] = [undefined, undefined]const arr: (number | string | boolean)[] = [1, 'a', true, false] // 用到联合类型// 类型别名 type aliastype lady = { name: string, age: number }const xiaojj: lady[] = [ { name: 'xiaojj', age: 90 }, { name: 'j', age: 30 &# ...

配置文件tsconfig.json12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970// 此文件由命令 tsc -init 生成// 直接运行 tsc 命令就会运用此配置文件// 选项详解：https://www.tslang.cn/docs/handbook/compiler-options.html{ // "include": ["demo15-1.ts"], // 要编译的指定文件，不配置此项时运行tsc默认编译全部 // "files": ["demo15-1.ts"], // 和include类似 // "exclude": ["demo15-3.ts"], ...

类型操作typeof获取数据的类型 123456let str = 'kkk'let t = typeof str // 使用typeof获取str的类型，返回string给变量t （原生js的typeof使用）type myType = typeof str // 使用typeof获取str的类型，返回string给类型myType （TS的typeof使用） keyof获取类型的所有key的集合 12345678// 使用示例1interface Person{ name: string; age: number;}type PersonKeys = keyof Person// 等同： type PersonKeys = 'name' | 'age'; // 注意是key的集合，不是值的集合 12345678910// 使用示例2let p1 = { name: 'xx', age: 28}// keyof typeof p1 的作用，首先typeo ...

类型保护我们通常在 JavaScript 中通过判断来处理⼀些逻辑，在 TypeScript 中这种条件语句块还有另外⼀ 个特性：根据判断逻辑的结果，缩⼩类型范围（有点类似断⾔），这种特性称为 类型保护 ，触发条 件： 逻辑条件语句块：if、else、elseif 特定的⼀些关键字：typeof、instanceof、in typeof1234567891011function fn(a: string|number) { // error，不能保证 a 就是字符串 a.substring(1); if (typeof a === 'string') { // ok a.substring(1); } else { // ok a.toFixed(1); }} instanceof1234567function fn(a: Date|Array<any>) { if (a instanceof Array) { a.push(1); } else  ...