Typescript基础

最近公司要求使用ts 闲来无事简单自学一波

Typescript的简单学习

一、环境搭建

1. 全局安装typescript
   cnpm i -g typescript
2. 新建ts后缀名文件 编译 后输入 tsc 文件名 编译出js的文件后通过node命令执行js脚本

二、typescript数据类型

1. number string boolean array Void 元祖 枚举 any 联合类型 类型推论 类型断言

   // ts 类型
   // 字符串
   let str :string =“aaa”;
   console.log(str);
   //数字类型
   let age :number =24;
   console.log(age);
   //布尔类型
   let bool :boolean =true;
   console.log(bool);
   //数组
   let list:number[]=[1,2,3];
   console.log(list);
   //元祖
   let arr :[string,number]=[‘hhh’,666];
   //枚举型
   enum week {Mon,Tue,Wed}
   let day:week=week.Mon;
   console.log(week[0]); //mon
   console.log(week[‘Mon’]); //0
   console.log(week.Mon); //0
   // 任意类型 any 后面可以随意赋值
   let x:any;
   x=123;
   // void没有类型 可用于函数没有返回值的时候使用
   function hello() :void{
   console.log(‘hello’);
   }
   // 联合类型
   let x2:number|string|boolean;
   x2=‘123’;
   // 这里的x2可以是number 可以是string 也可以是布尔值

   // 类型推论
   let x3 = 3; // 这里没有申明x3的类型 赋值是3 类型推论 变量是number 后面再赋值字符串就会报错
   // x3=‘123’ 报错

   // 类型断言
   let x5:number|string|boolean=‘this is a string’;
   let leng:number=x5.length;

三、接口的定义

1. interface关键字 implements 实现接口

   // 定义接口用interface
   interface Iprint{
   printing(msg:string):void;
   }
   // 实现接口
   class colorprint implements Iprint{
   printing(msg:string):void{
   console.log(msg) ;
   }
   }
   // 定义接口时只需要写规则申明不需要写具体类容
   // 实现接口的时候写具体的函数逻辑代码
   let p = new colorprint();
   p.printing(‘hello’);

接口实现对函数的规范

interface myfun{
    (a:number,b:number):number;
    // 设置函数的参数是数字返回值也是数字
}
let add : myfun ;
add = function(a:number,b:number):number {
   return a+b;
}
console.log(add(3,4));

接口对数组的规范（使用接口定义数组）

interface arr {
    [index:number]:string
    //设置索引是数字 每一项是字符串
}

let arr1:arr =['a','b','b'];

console.log(arr1);

1. 4.接口对json格式的规范

   interface idata{
   name:string;
   readonly age:number; // 只读属性
   email?:string;
   //email是可选属性
   }
   function showdata(data:idata){
   console.log(JSON.stringify(data));
   }
   showdata({name:‘zs’,age:23})

四、类的定义

1.使用class关键字定义类

class Person{
    name:string;
    age:number;
    //构造器
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showinfo(){
        console.log(this.age,this.name);
    }
}
let p1 = new Person('za',19);
p1.showinfo();

2.类的继承

用extends关键字

class Stu extends Person {
    score:number;
    school:string;
   
}
let stu1= new Stu('ll',12);
stu1.school='qinghua';
stu1.score=99;
console.log(stu1);
//Stu { name: 'll', age: 12, school: 'qinghua', score: 99 }



class Stu extends Person {
    score:number;
    school:string;
    dohomework(){
        console.log(this.name+this.age+this.score+this.school);
    }
}
let stu1= new Stu('ll',12);
stu1.school='qinghua';
stu1.score=100;
stu1.dohomework();

也可以stu建立自己的构造器 继承建立自己的构造器必须调用super父亲的构造

class Stu extends Person{
     score:number;
     school:string;
     dohomework(){
             console.log(this.name+this.age+this.score+this.school);
           }
     constructor(score,school){
        //  继承建立自己的构造器必须调用super父亲的构造
         super('zs',18);
         this.school=school;
         this.score=score;
     }
}
let stu2= new Stu(99,'qinglong');
console.log(stu2)

3.接口的继承

// 定义接口
interface Printer{
    getmsg();
}
//接口继承
interface colorprint extends Printer{
    pringting();
}
// 类实现接口 实现具体的业务逻辑
class hpp implements colorprint{
    pringting(){
        console.log(123);
    };
     getmsg(){
        console.log(456); 
     }

}
// 实例化
let hp1= new hpp();
hp1.getmsg();
hp1.pringting();

4.访问修饰符

public :全局变量都可以访问

protected：受保护的 只有在自己内部还有子类中可以访问

private：私人的 只有在自己内部可以访问

5.ts中的静态方法

static关键字

ts中的静态方法同js中的一样 静态方法只能由构造函数来调用

class Person{
    name:string;
    age?:number;// 可选属性
    static  email :string; // 静态属性
  constructor(name:string,age?:number){
      this.name=name;
      this.age=age;
    
  }
  //静态方法 同js中的静态方法一样只能是构造函数来调用
  static show(){
    console.log(122);
  }
  //实例方法是由实例来调用
  public  print(){
    console.log(this.name)
}
}
var p = new Person('hh',124);
// p.show();
p.print();
Person.show();

6.多态抽象类

1. 抽象类是提供其他类的继承基类（父类）不能直接被实例化
2. 抽象方法只能包含在抽象类中，抽象类中可以包括抽象方法
3. 子类继承抽象类实现抽象方法

4. // 定义抽象类
   abstract class animal{
       abstract  eat():void;  //定义抽象方法
       run():void{
           console.log('run')
       }
   }
   // 类继承抽象方法
   class Cat extends animal{
       eat(){
           console.log('fish')
       }
       run():void{
           console.log('miaomaio')
       }
   }
   也就是说抽象类是让其他子类继承并且实现内部的抽象方法
   let cat1 = new Cat();
   cat1.eat();
   cat1.run();
   

7.函数的定义

function add (x:number,y:number):number{
 return x+y;
}
console.log(add(2,3));

// 接口定义函数  也就是规范参数和返回值
interface add1{
    (x:number,y:number):number;
}
let add2 :add1;
add2=function(x:number,y:number):number{
    return x+y;
}
console.log(add2(3,4));

// 可选参数
function show(name:string,age?:number):void{
    console.log(name,age);
}
show('ll',23);
show('ll');

// 默认参数age=20

function show1(name:string,age:number=20):void{
    console.log(name,age);
}
show('ll',23); 
// 如果调用时传递了参数就以传递的为准
show('ll'); 
//没有传递就是默认  // 可选参数和默认参数写在参数列表的后面

// 剩余参数 ...扩展运算符
// 求x1...xn不确定的数的和
function addn(x1,x2,...xn){
    let sum=0;
    for( var i =0;i< xn.length;i++){
      sum+=xn[i];
    }
    return x1+x2+sum;
}
// 参数不确定时 xn 就是当做一个剩余参数的一个数组
console.log(addn(1,2,3,5,6,7,9));

// 泛型函数  不确定数据类型
 function printarr(arr:T[]):void{
      for(var items of arr){
        //   这里用for in遍历得到的是索引 用for of 得到具体的value值
          console.log(items+'\n');
      }
 }
 printarr(['aa','bb']);
 printarr([4,5]);

//  泛型接口
interface aaa {
  (x:T,y:T):T;

}
let add3:aaa;
add3=function(x:number,y:number):number{
    return x+y;
}
console.log(add3(30,20));