ts數據類型

1,boolean

var flag:boolean=true

2,number

var num:number=123

3,數組類型

var arr1:number[]=[1,2,3]
var arr2:Array<number>=[1,2,3]
var arr3:any[]=[1,"2",true]

4,string

var string:string="1212"

5,元祖類型（tuple）

let arr:[number,string]=[1,"2"]

6,枚舉類型

enum Flag1{success=1,error=2}
let s:Flag1=Flag1.success;
console.log(s)   //1

enum Flaf2{blue,red};
let s:Flag2=Flag2.red;
console.log(s)   //1 如果爲賦值，則爲下標

7,任意類型 es5中未指定的類型（object）

var num:any=123/'123'/true

8, null和undefined

var num:undefined;
console.log(num)   //不報錯

var num:number;
console.log(num)  //報錯

9,void沒有任何類型

function(){
    console.log('此函數沒有任何返回值')
}

10,never類型（不常用）

11,函數定義

函數聲明
function getInfo(name:string,age:number):string{
    return name+'--'+age
}

匿名函數
var getInfo=function(name:string,age:number):string{
     return name+'--'+age
}

//可選參數
function getInfo(name:string,age?:number){

}

//默認參數
function getInfo(name:string,age:number=20){

}

//剩餘參數
function getInfo(...result:number[]){

}
console.log(getInfo([1,2,3,4]))

//函數重載  詳見百度

//匿名函數（同es6）

12,TS中類的定義

//es5
    function Persion(name){
        this.name=name;
        this.run=function(){
            alert(this.name)
        }

    }

//ts中

class Persion{
    name:string;   //省略public
    constructor(name:string){  //構造函數，實例化的時候會處罰的方法
        this.name=name
    }

    run():void{
        alert(this.name)
    }
}

13,ts中類的繼承

class Person{
    name:string,
    constructor(name:string){
        this.name=name
    }
    run():void{
        alert(this.name)
    }

class Web extends Person{
    constructor(name){
        super(name)   //初始化父類的構造函數
        }
    }
}

//父類和子類有同樣的方法則會調用子類的方法

14,修飾符

public：公有，在類和子類，類外都能訪問
protected：保護，在類，子類中都能訪問
provate：私有，在類中可以訪問，子類和類外都不能訪問

15,TS中的靜態屬性和靜態方法

先來了解一下ES5中的靜態屬性和靜態方法

function Persion(age){
    this.age=age;   //實例屬性
    this.run=function(){
        //實例方法
    }
}
Persion.name='xxx';  //靜態屬性
Persion.play=function(){
    //靜態方法
}
//在jq中會用到
function $(element){
    return new Base(element)

}
function Base(element){
    this.el=document.getElementBy(element);
    this.css=function(attr,value){
        this.el.style.attr=value
    }
}
//對應jq方法：$("button").css("color",'red')

ts中的靜態屬性和靜態方法

class Person{
    name:string;
    static age:number=12;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    },
    run():void{
        alert(this.name)
    }
    static play():number{   //靜態方法
        return Persion.age
    }
}
console.log(Person.age)  //12
console.log(Persion.play())

16,多態：父類定義一個方法不去實現，讓繼承他的子類去實現，不同的子類有不同的實現方法(多態屬於繼承)

class Animal{
    name:string,
    constructor(name:string){
        this.name=name;
    },
    eat(){
        console.log("吃的方法")
    }
}

class Dog extends Animal{
    constructor(name:string){
        super(name);
    }
    eat(){
        return this.name+'吃糧食'
    }
}

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃魚'
    }
}

17，抽象方法和抽象類

抽象類:提供其他類繼承的基類，不能夠被實例化
用abstract關鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現並且必須在派生類中實現
abstract抽象方法必須放在抽象類裏

// 抽象類和抽象方法用來定義標準，標準animal這個類要求她的子類必須包含eat方法

abstract class Animal{
    name:string:name;
    constructor(name:string){
        this.name=name;
    }
    abstract eat():any;// 抽象方法只能出現在抽象類中
}

new Animal  //錯誤寫法，不能夠被實例化

class Dog extend Animal{
    constructor()
}

18,接口

定義

接口是一種規範的定義，他定義了行爲和動作的規範，在程序設計裏面接口起到一種限制和規範的作用，接口定義了某一批類所需要遵守的規範，接口不關心這些類的內部狀態數據，也不關心這些類裏方法的實現細節，她只規定這批類裏必須提供某些方法，提供這些方法的類就可以滿足實際需要，typescript中的接口類似於java，同時還增加了更靈活的接口類型，包括屬性函數可索引和類等

屬性接口（對json的約束）


// TS中定義方法傳入參數

function printLabel(labelInfo:{label:string}){
   console.log('print label')
}

//對批量方法傳入的參數進行約束

interface FullName{   //傳入的參數有且必須是firstName和secondName
   firstName:string;
   secondName:string;
   thirdName?:string;   //接口可選屬性，可傳可不傳

}
function printName(name:FullName){
   //必須傳入對象 firstName secondName
   console.log(name.firstName)
}

舉個例子ajax

inerface 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){
            console.log('成功')
        }
    }
}

函數類型接口：對方法傳入的參數以及返回值進行約束批量約束

//加密的函數類型接口
    interface encrypt{
        (key:string, :string):string;
    }

    var md5:encrypt=function(key:string,value:string){  //傳入的參數格式複合上面接口的約束
        //模擬操作
        return key+value
    }

    console.log(md5('name',"張三")),


    var sha1:encrypt=function(key:string,value:string){
        return key+'---'+value
    }

    console.log(sha1('李四',"212"))

可索引接口，數組、對象的約束（不常用）

//ts中定義數組的方式
var arr:number[]=[1221,21212];

---

//可索引接口寫法一 對數組的約束
interface UserArr{
    [index:number]:string
}

var arr:UserArr=["12121",'212121'];
console.log(arr[0])   //'12121'

//可索引接口寫法二   對對象的約束
interface UserObj{
    [index:string]:string
}

var arr:UserObj={name:"zhangsan',age:"213"};

類類型接口：對類的約束和抽象類有點類似

interface Animal{
//整合屬性類型接口和方法類型藉口
    name:'string',
    eat(str:string):void;   
}

class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat():void{
        console.log(this.name+"吃糧食")
    }
}

var d=new Dog("小黑")；
d.eat();  //小黑吃糧食

19，接口的擴展、接口的繼承

interface Animal{
    eat():void;
}

//人繼承Animal的接口
interface Persion extends Animal{
    work():void;
}


class Programmer{
    public name:string;
    constructor(name:string){
        this.name=name;
    }
    coding(code:string){
        console.log(this.name+code)
    }
}

//繼承結合接口
 class Web  extends Programmer implements Persion{   //父類所有規範都要實現
    //  public name:string;
     constructor(name:string){
         super(name)
     }
        eat(){
            console.log(this.name+"--"+"喜歡吃饅頭")
        }  
        work(){
        console.log(this.name+"寫代碼")
    }  
 }

20，泛型

泛型的定義
泛型函數
泛型類
泛型接口

/*
泛型，軟件工程中，我們不僅要創建一致的定義良好的API，同時也要考慮可重用性。組建不僅能夠支持當前的數據類型，同事也能支持未來的數據類型，這在創建大型系統時爲你提供了十分靈活的功能。

在像C#和JAVA這樣的語言中，可以使用泛型來創建可重用的組建，一個組件可以支持多種類型的數據。這樣用戶就可以以自己的數據類型來使用組件。

通俗理解，泛型就是解決類 接口 方法的複用性 以及對不特定數據類型的支持
*/

//只能返回string類型的數據

function getData(value:string):string{
    return value;
}

function getData1(value:number):number{
        return value;
}

//泛型：可以支持不特定的數據類型  要求：傳入的參數和返回的參數一致

//定義一個泛型  T表示泛型，具體什麼類型是調用這個方法的時候決定的
function getData<T>(value:T):T{   //也可以指定返回any類型
        return value;
}

getData<number>(123);  //限制傳入的參數是number，則返回的參數也必須是number 


//泛型類：比如有個最小堆的算法，需要同時支持返回數字和字符串兩種類型，通過類的泛型來實現

class MinClass{
    publc list:number[]=[];
    add(num:number){
        this.list.push(num)
    }
    min(){
           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; 
    }
}
//上面的類是隻能返回number

//定義一個類的泛型
class MinClass<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; 
    }
}

//實例化類，並且制定了類的T代表的類型是number
var m1=new MinClass<number>();
m1.add(1);
m1.add(3);
m1.add(2);

alert(m1.min());


//泛型接口

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

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

getData<string>("張三")

Typescript學習筆記

ts數據類型

1,boolean

2,number

3,數組類型

4,string

5,元祖類型（tuple）

6,枚舉類型

7,任意類型 es5中未指定的類型（object）

8, null和undefined

9,void沒有任何類型

10,never類型（不常用）

11,函數定義

12,TS中類的定義

13,ts中類的繼承

14,修飾符

15,TS中的靜態屬性和靜態方法

16,多態：父類定義一個方法不去實現，讓繼承他的子類去實現，不同的子類有不同的實現方法(多態屬於繼承)

17，抽象方法和抽象類

18,接口

19，接口的擴展、接口的繼承

20，泛型

物理機開關機

前端使用 Konva 實現可視化設計器（15）- 自定義連接點、連接優化

bind方法解釋

關於上傳帶有圖片的表單數據至服務器

vue-cli項目中，H5頁面打包加載優化

關於echarts的api功能本地測試可行，打包線上功能失效問題

JS中的call()方法和apply()方法用法總結

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結