typeScript基础1

布尔类型 boolean

let isDone: boolean = false;

isDone =true;

任意类型 any

let anyVualue:any = 7;

anyVualue ="stringhahah";

//隐式定义类型（变量的类型会是初始化 赋值 那个值的 类型）

let aa="seven"; // 这个aa的类型 被隐式 为 字符串类型

//可选类型  |

let myFavoriteNumber: string | number ="nihao";

myFavoriteNumber = 7;

//对象的类型 ---使用接口的方式申明对象的类型

interface Person{

    name:string,

    age:number,

  readonly  gender:string, //   不能修改的属性

    qita?:string,//可不定义，定义了就要字符串类型

    [propName:string]:any, //[propName:string] 剩下的属性，key值为string ,值为 所有类型

}

let person:Person={

    name:"Owen",

    age:26,

    gender:"男",

    qita:"其他",

    fdfd:"fdfs",

    fdfdd:"fdfdf",

    dfd:0,

    fdfg:false,

}

//person.gender="女";//设置了readonly,赋值之后不能改

//数组的类型

//1.「类型 + 方括号」来表示数组

let arr:number[ ]=[1,3,5,7,9];

let arrAny:any[ ]=["a",{a:"dd"},true,false,4];

//2.数组的泛型表示法

let  arr3:Array<number> = [1,3,5,7,9];

let arrStr:Array<string> = ["fd","fdd","feee"];

 

//2数组的接口表示法（不常用）

interface NumberArray{

    [index:number]:number;

}

let arrTestnum:NumberArray=[1,3,5,7,9];

 

interface AnyArray{

    [index:number]:any;

}

let arrTestAny:AnyArray=["a",{a:"dd"},true,false,4];

 

//函数

//1.函数的声明方式

function sum(x:number,y:number):number{ // 传入的参数类型  ：   返回值的类型

    return x+y;

}

sum(8,9);

 

  //可选参数,备注  可选参数必须   放在最后面

  function select(frist:string,second?:string){

    if(second){

        return frist+""+second

    }else{

        return frist

    }

}

 let Owen= select("O","wen")

// 默认值，系统直接识别它作为可选参数并不受「可选参数必须接在必需参数后面」的限制

function select2(frist:string,second:string="opp"){ //默认值不受qian

    if(second){

        return frist+""+second

    }else{

        return frist

    }

}

 let Owen2= select2("O")

 

 function select3(frist:string="tom",second:string){

    if(second){

        return frist+""+second

    }else{

        return frist

    }

}

 let Owen3= select3(undefined,"O")

//2.函数的表达式方式  =>的左边是输入类型，右边是输出类型

let mySum:(x:number,y:number)=>number = function(x:number,y:number):number{

    return x+y;

}

//3.用接口定义函数

interface SearchFunc{

  (w:string,r:string):boolean

}

let myfunction:SearchFunc=function(w:string,r:string){

   return w.search(r) !==-1

}

//4.剩余参数...rest

function push(array: any[], ...items: any[ ]){

    items.forEach(function(item){

        array.push(item)

    })

}

let a = [];

push(a,1,2,3,4)

//5.函数的重载

function reverse(x: number): number;

function reverse(x: string): string;

function reverse(x: number | string): number | string {

    if (typeof x === 'number') {

        return Number(x.toString().split('').reverse().join(''));

    } else if (typeof x === 'string') {

        return x.split('').reverse().join('');

    }

}

 

//类型断言

// function getLength(something: string | number): number {

//     if (something.length) {//这里需要把something断言成string

//         return something.length;

//     } else {

//         return something.toString().length;

//     }

// }

   // 方式1  <类型>值

   function getLength(something: string | number): number {

    if ((<string>something).length) {//这里需要把something断言成string(只能断言成联合类型存在的type)

        return (<string>something).length;

    } else {

        return something.toString().length;

    }

}

    //as 类型（在tsx中必须使用这种方式）！！！

    function getLength2(something: string | number): number {

        if ((something as string).length) {//这里需要把something断言成string(只能断言成联合类型存在的type)

            return (something as string).length;

        } else {

            return something.toString().length;

        }

    }

 

//声明 

// declare var 声明全局变量

// declare function 声明全局方法

// declare class 声明全局类

// declare enum 声明全局枚举类型

// declare namespace 声明（含有子属性的）全局对象

// interface 和 type 声明全局类型

// export 导出变量

// export namespace 导出（含有子属性的）对象

// export default ES6 默认导出

// export = commonjs 导出模块

// export as namespace UMD 库声明全局变量

// declare global 扩展全局变量

//declare module 扩展模块

/// <reference /> 三斜线指令

//声明文件  通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件

//声明文件必需以 .d.ts 为后缀。

 

//内置对象

  //ECMAScript 的标准的内置对象Boolean、Error、Date、RegExp等在typeScript的定义

  let b:Boolean = new Boolean(1);

  let e:Error = new Error("Error occurred");

  let d:Date = new Date();

  let r:RegExp = /[a-z]/;

 

  // DOM和BOM的内置对象

  let body:HTMLElement =document.body;

  let allDiv:NodeList = document.querySelectorAll('div');

  document.addEventListener("click",function(e:MouseEvent){

      //dosometing

  })

 

  //Math.pow(10,'6');//报错，TS核心库做了类型判断了

  Math.pow(10,6);

  //注意Node.js不是内置对象的一部分，如果要写Node.js,则需引入 npm install @types/node --save-dev

 

  //--------进阶部分----

    //1.类型别名  使用 type

    type Name =string;

    type NameResolver=()=>string;

    type NameOrResolver= Name|NameResolver;

    function getName(n:NameOrResolver):Name{

        if(typeof n==="string"){

            return n

        }else{

            return n()

        }

    }

    //2.字符串字面量类型  也使用 type

    type EventNames='click'|'scroll'|'mousemove';

    function handleEvent(ele:Element,event:EventNames){

       

    }

 handleEvent(document.getElementById("hello"),'scroll');//第二个参数在'click'|'scroll'|'mousemove'选其中之一

 //3.元组 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

 let tom: [string, number] = ['Tom', 25];

 //tom[0] = 'Tom';//1.也可以赋值一项

 tom[1] = 25;

 tom = ['Tom',26];//2.这样也可以

 //tom = ['Tom'];//3.这样不可以，没有对应上

 tom[0].slice(1);

 tom[1].toFixed(2);

 //  元素越界

 tom.push('male');//越界元素会受限为 元组中的每个类型的联合类型

//tom.push(true);//报错，true不在  推断出来的联合类型里面

 

//类（类的定义，继承，修饰符，抽象类）

//js类的定义

         function Person2(name){

             this.name = name;

           this.print=function(){

               console.log(this.name)

          }

         }

         var P= new Person2("Owen2");

         P.print();

//ts类的定义：

class Person2{

    name:string;

    age:number;

    constructor(name:string,age:number){

      this.name = name;

      this.age = age

    }

    print(){

        return  this.name+""+this.age

    }

}        

var P=new Person2("Owen2",26);

console.log(P.print());

 

//类的继承

class students extends Person2{

    cardnumber:string;

    school:string;

    constructor(cardnumber:string,school:string){

        super("wenmi",25);

       this.cardnumber=cardnumber;

       this.school=school;

    }

    dohomework(){

        return  this.name+""+this.age+"岁，就读于"+this.school+"学号"+this.cardnumber

        }

}

 

// var stu1=new students("wenmi",25);

// stu1.cardnumber="2001";

// stu1.school="江汉学院";

let stu1=new students("2001","江汉学院");

console.log(stu1.dohomework());

 

//接口的继承

 interface Printer{

     getMsg();

 }

interface ColorPrinter extends Printer{

    printing();

}

class HPPrinter implements ColorPrinter{

    printing(){

        console.log("打印Ok")

    }

    getMsg(){

        console.log("HP10011")

    }

}

 

let HP=new HPPrinter();

HP.getMsg();

HP.printing();

 

//访问修饰符：public private  protected

class Person3{

    public  name:string;

    private age:number;

    protected email:string;

    constructor(name:string,age:number,email:string){

      this.name = name;

      this.age = age;

      this.email = email;

    }

    print(){

        return  this.name+""+this.age

    }

}   

var P3= new Person3("Owen3",26,"221111@qq.com");  

console.log(P3.name);

console.log(P3.print);

//console.log(P3.age);//private私有属性 只能在类中访问

//console.log(P3.email);//protected只能在类 或其 子类中  访问

class student3 extends Person3{

    show(){

        console.log(this.name,this.email);//子类型能访问属性 email  （protected）

    }

}

 

//js类的静态属性 和方法

// function Persion4(){

//     //实例属性

//     this.name="Owendd";

//     //实例方法

//     this.print=function(){}

// }

// Persion4.age=28;//静态属性

// Persion4.print2=function(){};//静态方法

// Persion4.print2();//调用静态方法

// console.log(Persion4.age);

// let P4=new Persion4();

// P4.print();//调用实例方法

 

//ts类的静态属性和方法

class persion5{

      name:string;

   static  age:number;

    email:string;

    constructor(name:string,age:number,email:string){

      this.name = name;

      //this.age = age;

      persion5.age=age;

      this.email = email;

    }

    print(){

        return  this.name+""+":"

    }

    static show(){

     console.log("show  方法")

    }

}

persion5.show();

//persion5.age=25;

let P5=new persion5("owen5",25,"wwww@qq.com");

P5.print();

 

//多态

class Animal{

    eat(){

        console.log("animal eat");

 

    }

}

class Cat extends Animal{

    eat(){

        console.log("猫吃鱼")

    }

}

let C1=new Cat();

C1.eat();

 

//抽象类/抽象方法

   //1.抽象类是提供其他类继承的基类（父类），不能直接被实例化

   //2.抽象方法只能包含在抽象类中，抽象类中可以包含 抽象方法和非抽象方法

   //3.子类继承抽象类，实现抽象方法

 //定义

 abstract class Animals{

     abstract eat();//抽象方法没有 方法体

     run(){//普通方法

        console.log("run  run  run ")

     }

     

 }

 class Cats extends Animals{

     eat(){

         console.log("猫猫吃鱼")

     }

 }

 class Dogs extends Animals{

    eat(){

        console.log("狗狗吃骨头")

    }

}

let  C2=new Cats();

   C2.eat();//猫吃鱼

let D2=new Dogs();

  D2.eat();//狗狗吃骨头

 

  //函数的定义:  2.参数（可选参数/默认参数/剩余参数）

   //      js

// function add(x,y){

//     return x+y;

// }

// //匿名函数

// let  add1=function(x,y){

//     return x+y;

// }

    //           ts

function add(x:number,y:number):number{

    return x+y;

}

function show(name,age?:number):void{//1.可选参数需要在其他参数之后

    console.log(name,age)

}

function show2(age:number=20,name):void{//2.默认参数，不传时采用默认值

    console.log(name,age)

}

show2(10,"owen");//owen 10

 

function add1(x1,x2,...x:number[]):number{

   var sum2=0;

   for (var i=0;i<x.length;i++){

       sum2+=x[i];

   }

   return x1+x2+sum2;

}

 

var sum2=add1(1,2,3,4,5,6,7,8);

console.log(sum2);

 

//函数重载

function getinfo(name:string):void;

function getinfo(age:number):void;

function getinfo(str:any):void{

    if(typeof str=="string"){

        console.log("名字",str)

    }

    if(typeof str=="number"){

        console.log("年龄",str)

    }

}

getinfo("Owen");

getinfo(11);

 

//泛型

   //函数

 function parintT<T>(arr:T[ ]):void{//这个T是习惯写法，也可以写A其它字母

     for(var item of arr){

         console.log(item);

     }

 }

 parintT<number>([1,2,3,4]);

 parintT<string>(["aa","bb","cc"]);

 //泛型类

 class myArraylist<T>{

     public name:T;

     public list:T[]=[];

     addT(val:T):void{

         this.list.push(val)

     }

 }

 var  arrT=new myArraylist<number>();

 arrT.addT(11);

 console.log(arrT.list);

 

 //泛型接口

 interface Iadd<T>{

     (x:T,y:T):T;

 }

 var addJ:Iadd<number>

 addJ=function(x:number,y:number){

     return x+y;

 }

 console.log(addJ(1,8))