Typescript
WebYanXin
一起探讨最前沿的前端技术,希望做出一款自动补全修复前端Bug的工具出来。
展开
-
前端系列三十八:node版本及配置
node里npm版本:npminstall-gnpm@7.5.4node设置镜像:npmconfigrmproxynpmconfigrmhttps-proxy原创 2022-01-04 11:42:20 · 390 阅读 · 0 评论 -
前端系列三十七:项目中方便解耦使用枚举
当有时项目中有的模块是根据传值过来的条件判断来达到显示隐藏时就可以使用枚举,方便后期维护写法:<template v-if="types === WORKORDERTYPE.SUBMIT || types === WORKORDERTYPE.MODIFY"><h1>测试</h1></template>export default {props: {types: {type: String,require: true,原创 2022-01-04 11:36:23 · 221 阅读 · 0 评论 -
前端系列三十六:添加本地请求参属地址及请求
第一步:一般我们会在项目中的src下新建一个api文件夹用来放请求配置及接口中请求的请求参数第二步:我们在api文件夹下,新建一个例如apis.js文件用来存储接口参数,示例:apis.js文件里:const apiList = {//参数地址aliBaiDuNList: {label: '开发组-业务数据入库超时',//这边是后面给的接口地址url: 'ali_bai_du_n_list',method: 'post',},//参数地址ali原创 2022-01-04 11:30:20 · 639 阅读 · 0 评论 -
前端系列三十五:跨域问题及解决方案
SwitchHosts下载及添加配置:http://test.auclt.baidu.os.comhttp://test.asclt.baidu.os.com这里仔细观察会发现请求地址后缀名后三位域名都是一样的,而这个时候我们本地请求这些地址会报跨域问题解决步骤:第一步:打开项目找到vite.config.ts或vue.config.js文件:在文件里const config = {// 配置前端服务地址和端口server: {port: 9002,open: t原创 2022-01-04 10:55:59 · 420 阅读 · 0 评论 -
前端系列三十四:TS类型兼容
类型兼容性:两种类型系统:1. Structural Type System (结构化类型系统)2.Nominal Type System ( 标明类型系统 )TS采用的是结构化类型系统,也叫做 duck typing (鸭子类型) ,'类型检查关注的是值所具有的形状'也就是说,在结构类型系统中,如果两个对象具有相同的形状,则认为它们属于同一类型写法:class Point { x: number; y: number }class p: Point { x:number;原创 2022-01-04 10:03:19 · 872 阅读 · 0 评论 -
前端系列三十二:TS字面量类型跟Any类型
字面量类型: 使用模式: ' 字面量类型配合联合类型一起使用 '使用场景: 用来' 表示一组明确的可选值列表 '写法: function changeDirection( direction: 'up' | 'down' | ' left ' | ' right ') { consloe.log( direction ) }解释: 参数direction 的值只能是 up/down/left/right 中的任意一个优势: 相比于string 类型, 使...原创 2021-12-31 11:30:41 · 835 阅读 · 0 评论 -
前端系列三十一:TS枚举类型跟元组
枚举类型:枚举的功能类似于字面量类型+联合类型组合的功能,也可以 ' 表示一组明确的可选值 '枚举:' 定义一组命名常量 ' , 它描述一个值, 该值可以是这些命名常量的一个定义枚举写法:enum Direction { Up, Down,Left,Right } function changeDirection( direction: Direction ) { console.log( direction ) }解释:1.使用'enum' 关键字定义枚举...原创 2021-12-31 11:26:35 · 992 阅读 · 0 评论 -
前端系列三十:TS接口跟类型推断
接口:当一个对象类型被多次使用时,一般都会使用'接口 (interface)' ;来描述对象的类型, 达到'复用'的目的解释:1.使用' interface ' 关键字来声明接口。 2.接口名称 (比如, 此处的 IPerson),可以是任意合法的变量名称3.声明接口后,直接 ' 使用接口名称作为变量的类型 '。4.因为每一行只有一个属性类型, 因此,属性类型后没有 ; (分号) 写法: interface Iperson {...原创 2021-12-31 11:22:48 · 2290 阅读 · 0 评论 -
前端系列二十九: Typescript简介跟安装编译TS
TS:TS是JS的超集(JS有的TS都有),在JS基础之上,为JS添加了类型支持TS为什么要为JS添加类型支持:因为JS类型系统存在"先天缺陷",JS中绝大部分错误都是"类型"错误,增加了找BUG,改BUG时间,影响开发效率编程语言的动静区分:Typescript属于静态类型的编程语言,JS属于动态类型的编程语言。 静态类型:编译期做类型检查; 动态类型:执行期做类型检查;代码编译和代码执行的顺序:1 编译 2执行对于JS来说:需要等到代码真正去'执行'...原创 2021-12-31 11:17:18 · 414 阅读 · 0 评论 -
前端系列二十八:TS常用类型
类型注解:let age :number = 18 代码中的 : number 就是类型注释。 作用: 为变量'添加类型约束',上面代码中,约定变量age的类型为number ( 数值类型 ) 解释: 约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错常用基础类型概述:JS已有类型:原始类型:number/string/boolean/null/undefined/symbol对象类型: object ( ...原创 2021-12-31 11:12:46 · 1307 阅读 · 0 评论 -
前端系列二十六:异常处理
全局异常处理:示例: function test1() { try { console.log('test1') test2( ) } catch ( error ) { console.log( 'catch in test1', error ) } } function test...原创 2021-12-31 10:57:54 · 69 阅读 · 0 评论 -
前端系列二十五:利用Node来查看V8引擎内存使用情况
通过process.memoryUsage( ) 写法:function getMemory( ) { let memory = process.memoryUsage( ) let format = function (bytes) { return `${(bytes/ 1024 /1024 ).toFied(2)}MB` } } co...原创 2021-12-31 10:55:40 · 974 阅读 · 0 评论 -
前端系列十四:Vue3获取DOM跟传值
Vue3里获取dom获取单个元素 先定义一个空的响应式数据ref定义的 setup中返回数据,你想获取那个dom元素, 在改元素上使用red属性 setup( ) { const dom = ref( null ) onMounted( ( ) => { console.log( dom.value ) } ) }Vue3里获取父子props传过来的值,并打印出来写法: props:{ money: ...原创 2021-12-30 09:39:38 · 841 阅读 · 0 评论 -
前端系列十二:Vue3较Vue2的变化
变化一:is属性仅限于用在component标签上,以前Vue2时v-is可以写在标签里面,最终写在 .component("row",{ props:["data"], template: "<tr><td>{{this.data}}</td></tr>" })变化二:底层api变化,不影响多数开发者比如底层一些遇到传进来的值是undefine 或者没有值该怎么处理,是true还是flase,还是删除。...原创 2021-12-29 18:29:56 · 314 阅读 · 0 评论 -
前端系列十一:Vue3较Vue2变化
一 新特性:Teleport 传送门:它可以指定它里面内容的父元素 它可以在别的组件里使用,但是它可以让控制权还是在自己手上写法: 在别的组件注册引用组件 在自己组件里写上功能 //to 代表要去的地方显示 一般传送门写在teleport标签里 <button @click="modelOpen = true">弹出一个模态框</button> <teleport to="body">...原创 2021-12-29 18:23:44 · 342 阅读 · 1 评论 -
前端系列十:Vue3较Vue2变化
一: 新特性 Composition API特点: 可以更好的逻辑复用和代码组织,初始化方式变了,在main.js里实例获取方式变成函数 :以前Vue2是new一个构造函数createApp(App) 变成了工厂函数,直接获取,直接挂载以前写响应式数据写在data中 在Vue3里响应式数据使用和...原创 2021-12-28 11:17:37 · 246 阅读 · 0 评论 -
前端系列九:前端项目部署上线流程、开发环境、测试环境、生产环境
开发环境、测试环境、生产环境、UAT环境、仿真环境– 区别开发环境(development):开发环境时程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告和测试工具,是最基础的环境。测试环境(testing):一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布到生产服务器上,是开发环境到生产环境的过度环境。测试人员会模拟各种操作情况,主要用于测试是否存在bug,如果有那么肯定不能把它发布到生产机上生产环境(producti原创 2021-12-28 10:54:39 · 4761 阅读 · 0 评论 -
前端系列八:Vue3项目中定义全局方法遇到的问题
步骤一:在src文件夹下,自己定义一个文件夹,再建一个公共文件例如:api.ts,在里面定义export default{install: (app: any, options: any) => {下面这段代码是在Vue3里定义公共方法的$api公共方法名app.config.globalProperties.$api ="这后面就是要写定义的公共方法函数"}}步骤二:在main.ts文件里 引入定义的公共方法文件 例如引入前面的api.ts,引入后,在main...原创 2021-12-28 10:42:43 · 1138 阅读 · 0 评论 -
前端系列七:在Vue3+TS+Vite插件的初始化项目模块报错的问题
细节问题:当我们使用Vite创建Vue3项目时,项目创建完成时,在script里有 setup lang="ts"因为export default 是JS的导出模式,这个时候没有把script里的setup lang="ts" 去掉就会报模块错误问题原创 2021-12-28 10:37:49 · 1028 阅读 · 1 评论 -
前端系列六:Vue3项目中遇到的原型方法问题
Vue3项目中引入插件报错问题:Cannot read properties of undefined (reading '$api')无法读取未定义的属性(读取“$api”)思路:先去查一下Vue3在原型上写法是否有改变;Vue3在原型上定型方法已经跟Vue2不同;解决方案:Vue2中定义原型方法:Vue.prototype.$api = function(){consloe.log("Vue2定义方法")}Vue3中定义原型方法:app.config.globalPr原创 2021-12-28 10:34:55 · 723 阅读 · 0 评论 -
前端系列五:Vue3中利用js跳转页面
goPage() { this.Z$router.push({path:"/",query:{search:'超人'}})}原创 2021-12-28 10:28:32 · 505 阅读 · 0 评论 -
前端系列四:Typescript中遇到多个any影响性能解决方案
第一种方案:可以在项目创建初期去tsconfig.json里去配置:"noImplicitThis": true这样可以当表达式值为any类型的时候,生成一个错误第二种方案:let xj: unknow = '小新'let b: string = xj as stringunknown(不知道是什么类型)加as(类型断言告诉是什么类型)搭配使用的话可以解决any的问题但是前提是要能确定或者知道我这个值是用什么类型的,也不知道会不会有性能问题,还得再研究一下第三种方案:let .原创 2021-12-28 10:26:45 · 457 阅读 · 0 评论