TypeScript语法

一、基础部分

1.安装和编译

npm install -g typescript
tsc helloword.ts

2.用VScode 自动编译 .ts

a. 创建tsconfig.json文件。 tsc --init 生成配置文件
b. 任务 - 运行任务，监视tsconfig.json

3.typescript 中的数据类型（ts新增类型校验，ts 代码必须指定类型）

• 布尔类型（boolean）
  var flag:boolean=true;

• 数字类型（number）
  var num:number=123;

• 字符串类型 （string）

• 数组类型（array）
  定义数组的两种方式
  a. var arr:number[]=[11,22,33,44] ----- b. var arr:Array<number>=[11,22,33] --- var arr:any[]=[123,'123']

• 元祖类型（tuple）属于数组的一种，为数组每一个位置指定一个类型
  let arr:[number,string]=[12,'aa']; let arr:Array<number,string>=[12,'string']

• 枚举类型（enum）

enum Err {'undefined'=-1,'null'=-2,'success'=1};
var e:Err=Err.sucess;
console.log(e) //打印出的为1（如果标识符没赋值，它的值就是下标）

• 任意类型（any）
  var num:any=123;
• null 和 undefined
  var num:number | null | undefined
• void 类型

//当方法没有返回值时：
function run():void{
  console.log('run')
}

//当方法有返回值时：
function run():number {
  return 123;
}

• never类型

var a:never;
a=(()=>{
  throw new Error('错误');
})()

4. 函数的定义

//函数声明法
function run():string{
  return 'run';
}
//匿名函数法
var fun2=function():number{
  return 123;
}
//定义方法传参
function getInfo(name:string,age:number):string{
  return `${name}--${age}`;
}
//配置可选参数(用？)
function getInfo(name:string,age?:number):string{
  return ''
}
getInfo('zhangsan');
//三点运算符，接收传过来的值 
function sum(...result:number[]):number{
  var sum=0;
  for(var i=0;i<result.length;i++){
    sum+=result[i]
  }
}
//ts中方法的重载
function getInfo(name:string):string;
function getInfo(name:number):number;
function getInfo(str:any):any{
  if(typeof str==='string'){
    return ''
  }else{
  return '123'
}

ts中的类

class Person(){
  name:string; //属性，前边省略 了public关键词
  constructor(n:string){
     this.name=n;
  }
  run():void{
    alert(this.name)
  } 
}

class Person(){
  name:string; //属性，前边省略 了public关键词
  constructor(n:string){
     this.name=n;
  }
  getName():string{
    return this.name;
  } 
  setName(name:string):void{
    this.name=name;
  }
}

ts中的继承

class Person(){    
  public name:string; //公有属性
  constructor(name:string){
     this.name=name;
  }
 run():string{
    return `${this.name}在运动 `
  } 
}

class Web extends Person{
  constructor(name:string){
    super(name); //初始化父类的构造函数
  }
}

var w=new Web('李四');
alert(w.run();

类里面的修饰符，ts提供了三种修饰符

• public:公有，内外部都可以访问
• protected:保护类型 类内部、子类内部可以访问，类外无法访问
• private:私有 在类内可以访问，子类无法访问。
  属性如果不加修饰符，默认为public

静态方法和静态属性

function Person(){
  this.run1=function(){} //实例方法，new之后才能用
}
Person.run2(); //静态方法，可以直接用。

class Person(){
  public name:string；
  public age:number=20;
  static sex="男"；//静态属性
  constructor(name:string){
    this.name=name;
  }
  run(){ //实例方法
    alert()
  }
  static print(){
    console.log('print'+this.age) //会出错，静态没法不能直接调用类里的属性
    console.log('print'+Person.sex) //不会出错
  } //静态方法
}

多态：父类定义一个方法，不去实现。让继承它的子类去实现，每个子类有不同的表现。

比如先定义个ainimal类，里面有eat方法。然后有猫和狗两个子类去继承这个类，然后重写eat的方法。

抽象类：提供其他类继承的基类，不能直接被实例化。

用abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。

抽象类和抽象方法用来定义标准，比如：Animal这个类要求它的子类必须包含eat方法。

abstract class Animal{
  public name:string;
  constructor(name:string){
    this.name=name;
  }
  abstract eat():any;
}
var a=new Animal() //错误写法，抽象类不能直接被实例化。只能给其他类提供基类。
class Dog extends Animal{
  constructor(name:any){
    super(name);
  }
  //抽象类的子类必须实现抽象类中的抽象方法
  eat(){
    console.log('dog)
  }
}

---

接口的作用：在面向对象的编程中，它定义了行为和动作的规范，起到限制和规范的作用。它不关心类的内部状态数据和类里方法的实现细节，只规定这批类里必须提供某些方法。ts中的接口类似java，还增加了更多 接口类型，包括属性函数可索引和类等。

• 属性接口 对json的规范。

function printLabel(labelInfo:{label:string}):void(){
  console.log(' ')
}
printLabel({name:'zhangsan'}) //错误
printLabel({label:'zhangsan'}) //正确

• 属性类型接口

interface FullName{ //对传入对象的约束   （属性接口）
  firstName:string;
  secondName:string;
}

function printName(name:FullName){

}

实例：ajax

interface Config{
  type:string;
  url:string;
  data?:string;
  dataType:string
}
function  ajax(config:Config){
  var xhr=new XMLHttpRequest();
  xhr.open(config.type,config.url,true );
  xhr.send(config.data);
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
      config.log('success');
  }
  }
}

ajax({
  tyle:'get',
  url:'http://www.baidu.com,
  data:{},
  dataType:'JSONP' 
 })

• 函数类型接口 （对方法传入的参数以及返回值进行约束 ）

interface encrypt{
  (key:string,value:string):string;
}

var md5:encrypt=function(key:string,value:string):string{
  return key+value;
}

• 可索引接口：数组、对象的约束（不常用）

var arr:number[]=[123,123]
var arr1:Array<string>=['123','123']
 
interface UserArr{
  [index:number]:string
}

var arr:UserArr=['aaa','bbb'];
console.log(arr[0 ])

• 类类型的接口（对类的约束）

interface Animal{
  name:string;
  eat(str:string):void;
}

class Dog implements Animal{
  name:string;
  constructor(name:string){
    this.name=name;
  }

  eat(){
    console.log(this.name + '');
  }
}

var d= new Dog();

• 接口的扩展：接口可以继承接口

interface Animal{
  eat():void;
}
interface Person extends Animal{
  work():void;
}
class Programmer{
  public name:string;
  constructor(name:string){
    this.name=name;
    constructor(name:string){
      this.name=name;
    }
    coding(code:string){
      console.log('写代码')
    }
  }
}
class Web extends Programmer implements Person{
  public name:string;
  constructor(name:string){
    super(name)
  }
  eat(){
    console.log()
  }
  work(){
    console.log()
  }
}

--- ts中的泛型：就是解决类、接口、方法的复用性、以及对不特定数据类型的支持 ，传入和返回类型一致
T表示泛型，具体什么类型是调用方法的时候决定的

function getData<T>(value:T):T{
  return value;
}
getData<number>(123)

class MinCla<T>{
  public list:T[]=[];
  add(value:T):void{
    this.list.push(value);
  }
  min():T{
    var minNum=this.list[0];
    for(var i=0;i<this.list.length;i++){
      if(minNum>this.list[i]){
        minNum=this.list[i]
      }
    }
    return minNum;
  }
}
var m1=new MinClas<number>(); //实例化类 并制定了类的T代表的类型是number；

var m2=new MinClas<string>(); //实例化类 并制定了类的T代表的类型是number；

• 泛型接口

interface ConfigFn{
  <T>(value:T):T;
}

var getData:ConfigFn=function<T>(value:T):T{
  return value;
}

getData<string>('zhangsan');
getData<string>(123); //错误

---

• 装饰器

装饰器是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

1. 类装饰器：在类声明前被声明（紧靠着类），可以用来监视修改或替换类。传入一个参数。

function logClass(params:any){
  console.log(params) //params 就是当前类
  params.prototype.apiUrl='aaaa';
  params.prototype.run=function(){
    console.log('我是一个run方法')
  }
}
@logClass
class HttpClient{
  constructor(){
    
  }
  getData(){
    
  }
}  
var http:any=new HttpClient();
console.log(http.apiUrl) // aaaa
http.run();

1.2 类装饰器：装饰器工厂（可传参）

function logClass(params:string){
  return function(target:any){
    console.log(target); // 当前类
    console.log(params); //hello
    target.prototype.apiUrl=params;
  }
}
@logClass('hello')
class HttpClient{
  constructor(){
    
  }
  getData(){
    
  }
}  
var http:any=new HttpClient();
console.log(http.apiUrl) // aaaa

1.3. 类装饰器，重载构造函数的例子

function logClass(target:any){
    console.log(target);
    return class extends target{
      apiUrl:any='我是修改后的值';
      getData(){
        apiUrl=this.apiUrl+'111'
      }
    }
}
@logClass('hello')
class HttpClient{
  constructor(){
    
  }
  getData(){
    
  }
}  
var http:any=new HttpClient();
console.log(http.apiUrl) // aaaa
http.run();

2.属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数
1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2.成员的名字

function logClass(params:string){ //类装饰器
  return function(target:any){
    console.log(target); // 当前类
    console.log(params); //hello
  }
}

//属性装饰器
function logProperty(params:any){
  return function(target:any,attr:any){
    console.log(target);
    console.log(attr);
    target.attr=params;
  }
}
@logClass('hello')
class HttpClient{ 
  @logProperty('http:itying.com')
  public url:any | undefined;
  constructor(){
    
  }
  getData(){
    console.log(this.url);
  }
}  
var http:any=new HttpClient();
console.log(http.apiUrl) // aaaa
http.run();

3.方法装饰器 - 会被应用到方法的属性描述符上，可以用来监视修改或者替换方法定义。

方法装饰器会在运行时传入下列三个参数
1.对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。
2.成员的名字
3.成员的属性描述符。

function get(params:any){
  return function(target:any,methodName:any,desc:any){
    console.log(target); // 当前类
     console.log(methodName) //getNData
     console.log(desc.value) //getData方法
    //修改装饰器的方法 把所有参数改成string类型
    //保存当前方法
    var oMethod=desc.value;
    desc.value=function(...args:any[]){
      args=args.map((value)=>{
        return String(value)
      })
      oMethod.apply(this,args); //如果没这句，会覆盖getData方法。
    }
  }
}
class HttpClient{
  public url:any | undefined
  constructor(){
    
  }
  @get('http://dddd')
  getData(...args:any[]){
    console.log(this.url)
  }
}  

• 装饰器 的执行顺序：
  属性 > 方法 > 方法参数 >类
  如果有多个，则从后向前执行