oldMoon

上篇讲过的 基本数据类型来定义变量的类型，那么interface 接口用来定义对象的类型； 1.interface 接口一般首字母大写 约束对象 要与接口形状保持一致 123456789interface Person { name:string; age:number;}let user:Person;user={ name:'tom', age:18} 2.可选属性 12345interface Person { name:string; age:number; sex?:any;} 3.任意属性 12345interface Person { name: string; age?: number; [propName: string]: any;} 4.只读属性 1234interface Person { readonly name: string; age: number;}

1.布尔 1let isShow:boolean=true; 2.数字 1let total:number=0.1111; 3.字符串 1let userName:string='Jack'; 4.void表示没有返回值的函数 123function alertName(): void { alert('hello Tom');} 5.undefined 和 null 是所有类型的子类型 12let u:undefined=undefined;let n:number=null; 6.任意数据类型 any 123456let thing:any=100;thing=false;// 未指定数据类型的声明 会被指定为anylet some;some=200;some=true; 7.类型断言 声明变量且赋值 通过值的类型断言当前变量的类型； 1let str= 'tom'; // 等同于 let str:string='tom'; 8.联合类型 1let all:string|numbe ...

1.安装TypeScript npm install -g typescript 编译一个TypeScript 文件 tsc hello.ts 2.将以下代码 写入到 hello.ts 中 12345function sayHello(person:string) { return `hello ${person}`;}let user:string='Tom';sayHello(user); 然后执行 tsc hello.ts 这时候会生成一个编译好的文件 hello.js 12345function sayHello(person) { return `hello ${person}`;}let user = 'Tom';sayHello(user); TypeScript 使用 : 指定变量的类型 TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错

ES6新增Set和Map的简单使用1. Set基本用法 Set类似于数组，但成员的值都是唯一的，没有重复的值； Set 是一个构造函数； 123const list=new Set([1,2,2,3,4,5]);[...list];//[1,2,3,4,5]; Set函数可接收一个数组用来初始化； 12345678910111213141516const list=new Set([1,2,3,4]);[...list] // [1,2,3,4];list.add(5);[...list] // [1,2,3,4,5]list.delete(1);[...list] // [2,3,4,5]list.size; // 4list.has(2) // truelist.has(1) // falselist.clear();[...list]; // [] Set实例常用内置函数； add 添加一个成员 delete 删除某个成员 返回true/false has 判断内部是否有某个成员 clear 清空内部成员 .size 内置属性 获取成员个数 类似于Array.length; ...

话不多说直接贴代码： 123456789101112131415161718192021222324252627282930function download(imgBase64,fileName){ downloadFileByBase64(imgBase64,fileName) function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } function downloadFile(url,name='What\'s ...

父组件向子组件传值 使用props 方式传值，父组件引用组件，使用组件后，可通过子组件内定义的 props 属性，使用该属性名传值到子组件内; props 可以传入String,Number,Object,Boolean,Array数据类型; prop 验证：设置required 参数 可选择是否当前属性必传; default 设置如若不传将展示的内容; props 传值为单向数据流;注意:子组件内不能直接修改父组件传来的props；、; 创建父组件12345678910111213141516171819<template> <div class="root"> <h1>this is father</h1> <show-name :first-name="nick_name" last-name="jack" /> </div></template>& ...

ResizeObserver 监控dom标签变化 ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变 ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。 使用 构造器 123456const Observer =new ResizeObserver(entries=>{ entries.forEach(entry=>{ console.log('大小位置', entry.contentRect); console.log('监听的DOM', entry); })}) 添加监听dom对象 1Observer.observe(document.querySelector('.element'));

第一种方式定位1234567891011121314.box{ width: 400px; height: 400px; position:relative; border: 1px solid #0D0D0D;}.box div{ width: 100px; height: 100px; position:absolute; top: 50%; transform: translateY(-50%); background-color: palegoldenrod;} 第二种方式flex布局1234567891011121314.box{ width: 400px; height: 400px; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border: 1px solid #0D0D0D;} ...

引入 HighchartsHighcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是： 1<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> 创建一个简单的图表在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小 1<div id="container" style="width: 600px;height:400px;"></div> 然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，代码如下： 1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE ...

1234567891011121314151617/*整体*/.innerbox::-webkit-scrollbar{ width:4px; height:4px;}/*滚动块 */.innerbox::-webkit-scrollbar-thumb{ border-radius:5px; -webkit-box-shadow:rgba(0,0,0,0.2); background:rgba(0,0,0,0.2);}/*轨道 */.innerbox::-webkit-scrollbar-track{　　-webkit-box-shadow:rgba(0,0,0,0.2);　　border-radius:0;　　background:rgba(0,0,0,0.1);　}