李文豪の博客

Ref全家桶相当于vue2的data return中定义的数据，是数据的响应式。 ref1234567import {ref, Ref} from "vue";//不同写法//Ref的包装，复杂自定义类型时可以使用let msg:Ref<string> = ref('hello world')//让ref自己做类型推导let msg = ref('hello world') 改为ref后，在<script>中需要通过.value来进行取值或赋值（在<template>中不需要） isRef判断是否为ref对象 shallowRef浅层响应，只跟随.value响应，对于.value.属性的更改不响应 ref与shallowRef的使用不能混在一起，否则会导致shallowRef的浅层响应受到影响而更新。 这是因为二者的更新在底层都是调用的triggerRef，shallow在创建是被收集了依赖，而triggerRef调用时会更新所有依赖的修改，因此，无论隐式或显示地调用了 ...

Nvm 管理node版本 下载nvm https://github.com/coreybutler/nvm-windows/releases nvm常用命令 nvm list available 查看nodejs 官方的所有版本 nvm list 查看安装的所有版本 nvm install （版本号）下载对应的node版本号 nvm use 切换node版本 Nrm npm源管理器，可以在npm源之间进行切换 安装命令 npm install -g nrm nrm常用命令 nrm ls 查看源 nrm use 切换源 nrm add 名称 源 添加源 nrm test npm 测试延迟

元组类型元组定义元组可以看做一种数组的变型 12let arr:[number, string, boolean] = [1,'张三', true];console.log(arr[0]) 元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值，可以把这多个值作为元组返回，而不需要创建额外的类来表示。 越界元素越界元素被限制为联合类型，该样例中即number|string|boolean 12345let arr:[number, string, boolean] = [1,'张三', true];arr.push('hello');console.log(arr.length)console.log(arr.pop()) 输出 124hello 应用场景如：定义excel返回数据格式 123456let arr:[number, string, boolean] = [1,'张三', true];let exce ...

Class类定义类123456789class Person { name:string; age:number; constructor(name:string, age:number) { this.name = name; this.age = age }}let person:Person = new Person('lwh',18) 类内部定义的变量，必须初始化或在内部赋值 类的修饰符public、private、protected 12345678910class Person { public name:string; private age:number; protected like:any; constructor(name:string, age:number, like?:any) { this.name = name; this.age = age; this.l ...

内置对象ECMAScript的内置对象Boolean、Number、string、RegExp、Date、Error 1234567891011const bool:Boolean = new Boolean(1)const num:Number = new Number('114514')const str:String = new String('hello')const regexp:RegExp = /.*\.ts/const date:Date = new Date()const error:Error = new Error("error!") js正则：https://www.runoob.com/js/js-regexp.html DOM 和 BOM 的内置对象Document、HTMLElement、Event、NodeList 等 12345678910let body:HTMLElement = document.bodylet allDiv:NodeList = document.querySelec ...

类型断言 联合类型 交叉类型联合类型12let phone: number|string = 114514phone = '114-514' 交叉类型1234567891011121314151617181920212223242526interface Student { name:string age:number, score:number, exam():number}interface Child { happy:boolean}const analyseChildStudent = (cs:Child & Student):void => { console.log(cs.age) console.log(cs.score) console.log(cs.happy)}analyseChildStudent({ name:'张三', age:11, score:59, exam(): ...

函数拓展一般形式123const fn = function (name:string, age:number):string { return name + age;} 参数默认值 123const fn = function (name:string, age:number=30):string { return name + age;} 可选参数 123const fn = function (name:string, age?:number):string { return name + age;} 函数重载ts的函数重载将函数分为两种：重载函数、执行函数 重载函数负责定义函数头，真正执行的是执行函数 123456789101112//重载函数function fn(params: number): void//重载函数function fn(params: string, params2: number): void//执行函数 function fn(params: any, params2 ...

数组类型一般类型类型[] 1let arr1:string[] = ['1', 'hello', 'world'] 数组泛型Array<类型> 123456interface Person { name:string, age:number}let personArr:Array<Person> = [{name:'hhh', age:111}, {name:'aaa', age:22}] 用接口表示数组一般用来描述类数组，因为下标可以为任意数字 1234interface NumberArray { [index: number]: number;}let fibonacci: NumberArray = [1, 1, 2, 3, 5]; 多维数组1let arr_2:any[][] = [[1,'2',false],['q&#x ...

接口和对象类型对象类型声明与定义 123456789interface Person { name:string, age:number}let person:Person = { name:'lwh', age:18} 重名接口可合并 1234567891011interface Student { name:string}interface Student { age:number}let student:Student = { name:'hwl', age:81} 继承 123456789interface Pupil extends Student{ grade:number}let pupil:Pupil = { name:'sb', age:11, grade:4} 可选属性12345678inte ...

任意类型any123456let any:any = 'hello'any = 114514any = trueany = []any = {}any = Symbol() 没有强制限定类型，可随时切换类型 声明变量是不指定类型默认为any unknownTypeScript 3.0中引入的 unknown 类型也被认为是 top type ，但它更安全。与 any 一样，所有类型都可以分配给unknown unknow类型比any更加严格当你要使用any 的时候可以尝试使用unknow unknown只能赋值给any或unknown，保证类型上的安全 any变量为对象时，可引用不存在的属性。而unknown不能引用属性或方法