前端二：TypeScript+ES

一、 TypeScript

1. function a( p1:int):number

        {
                 return p1+1;
        }

2. 类型

字面量
let c:11212 这样c 只能是11212
联合类型
let c： boolean | string 。 c可以是bool 或着是 string
let q: {Name:string} & {Age:number}
q={Name=“aaasd”,Age=19}

类型断言
s= e as string 或 s= e;
any类型的变量可以赋值给任何变量，相当于不进行类型检测了

unknown 是一个类型安全的any，不能直接赋值给其他变量，如果要赋值，需要进行下面操作。
if（typeof e===“string”）
s=e;
object 对象
let b:{name?:string} // ？表示属性是可选的
let b:{name:string,[propName:string]:any} //[propName:string]:any表示任意属性

function 函数
let d:(a: number, b:number)=>string; //参数a与b， 返回是string的函数。
枚举 Enum
enum Gender{ Male=0,Female=1}
类型别名 type myType=1|2|3|4|5

3 面向对象 类

class Dog :extends xxxx {
constructor(name:string,age:number) //构造函数；
{
this.name=name; this.age=age; //可以在此定义属性
}
}
// extends xxxx继承，
子类可以覆盖父类的方法。
如果不想覆盖父类的方法，可以用 _super 关键字
父类 如果子类有构造函数，必须调用一下父类的构造函数 。super(）

4 抽象类 abstract class

 不可定义实例。    
 可以添加抽象方法        abstract  sayHello():void ;

5 接口

interface myInterface{
name:string;
age:number;
}

类型定义
type myType{
name:string,
age:number
}
接口可以重复声明。 如果声明两个， 则可是两个的合并
接口可以定义类的时候，限制类的结构

6 属性的封装

public 修饰的属性可以在任何位置修改 ，默认
private 类的内部修改。
protect 能在当前类或子类中有效
get set 方法
一般 getName(）{} 或 get name() {}

7 泛型

类型不明确的时候， 可以使用泛型
定义
function fn(a:T) :T{
return a;
}
function fn<T，K>(a:T，b:K) :T{
return a;
}
// 限制泛型的范围
function fn<T extends interger，K>(a:T，b:K) :T{
return a;
}
class Myclass {
name:T;
constructor(name:T){ this.name=name;}
}
使用
fn(10); //TS 可以推断， 不是所有的都能推断出来
fn(10);

ES

1 定义

 ECMA script European computer manufacture association
 ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

2 变量的解构赋值

const zhao={name:"赵"，age：10，fnSing():{console.log('爱哦我中华')}
解构    let {name,age, fnSing)=zhao；
还有一种就是  .....

3 模版字符串 ‘’

 支持换行， 支持通过${变量} 进行拼接
 let  name=‘张’;
 let Hello=‘${name}:
                       欢迎您’ 

4 对象的简化写法

let name=‘张';
const school ={
     name,     //相当于   name=name；
     improve() {}  //相当于 improve= function(){}
}

5 箭头函数

let fn=(a:int ,b:int )=>{return a+b;}
注意  此处的this 是静态的， 始终指向函数声明时所在的作用域
     一般函数， this , 是谁调用就是谁。   可以对象的实例调用， 也可用call 方法   fn.call()
     不可作为构造函数
     不能使用  arguments变量
     箭头函数的简写    省略小括号，当形参有且 只用一个的  let add=n=>{}
                              省略花括号，代码只有一条语句， return 也省略

函数参数赋值初始值

     function connect ( {host="",username})

Rest 可以获取实参，用来代替arguments

 function   fn（a,b , ...argu）{}

扩展运算符

数组i的合并 const 合并数组=数组1.concat(数组2）
或 const 合并数组=[…数组1 , …数组2）
数组的克隆 const 克隆后的数组=[…克隆前的数组]
将伪数组 const 克隆后的数组=[…克隆前的数组]

Symbol数据类型

Promise

const p =new Promise(function (resolve,reject){
可调用 resove（xxx）状态变成成功，会调用then的第一个函数
reject(xxxx) 状态变成失败，会调用then的第二个函数
})
p.then(fuction(value){},function (reason){}}

对象方法的扩展

1Object.is //判断两个值是否完全相等
2. Object.assign 对象的合并
3. Object.setPrototypeOf 设置原型对象

模块化

防止命名冲突， 代码复用， 高维护性
export
暴露方法 1， 分别暴露 export let school=‘’；
2 . 统一暴露 export {school,others}
3. 默认暴露 export default {school :‘’, change:function(){}}

import
<script type="module>
1 通用模式 import * as m1 from …xxx.js 这样xxx.js 所有的导入， 都放到m1了。
2. 解构方式 import {school as alias, change} from “xxxx.js”
import {default as aa} from
3. 渐变形式只是针对默认暴露 import school from
在项目中， 使用 bable 。

ECMAScript 8

 async 
 async fuction fn()  
 { 只要返回的不是Promise对象，就返回Promise对象
     如果，throw ， 则返回一个失败的promise
      如果返回结果是promise对象，则，fn返回的值就是promise返回的值。
 }

await 必须放到 async函数中。
await 右侧的必须是一个promise对象
await
发送ajax 请求
function sendAJAX(url)
{ return new Promise((resolve,reject)=>{
const x=new XMLHttpRequest();
x.open(‘GET’,url）；
x.send()
x.onreadystatechange=function(){
if(x.readyState===4) if(x.status>200<300) resolve(x.response);
else reject(x.status)
}
}

  sendAJAX("").then(value=>{},reason=>{})
 
 async function main(){
      let result= await sendAJAX("")
      console.log(result)
 }

ECMAScript 11 动态import 懒加载

import(‘./hello.js’).then(module=>{modulue.methodname();})