1. 程式人生 > >typescript入門,可以一起探討提點意見互相學習。

typescript入門,可以一起探討提點意見互相學習。

  typescript是js的一個超集,TypeScript擴充套件了JavaScript的語法,所以任何現有的JavaScript程式可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計,而編譯時它產生 JavaScript 以確保相容性。這個語言添加了基於類的面向物件程式設計,可以幫助我們更好的理解什麼是面向物件程式設計!

  這篇文章只簡單的講解一下ts的擴充套件方法,不講擴充套件符,剪頭函式等es6已經支援的語法基礎了。

  一、型別批註和類

class Person {
    //protected name; protected是可以內部和子類呼叫
    
//public name; public是內部和外部都可以呼叫,預設為public //private name; private 只能類內部訪問 constructor(public name:string){ //constructor是建構函式,只有被new的時候被呼叫,且只被呼叫一次。 // public name:string 這個是製造一個約定,new這個例項時候必須傳入一個name才可以;不寫public如Employee中寫法也可 //在建構函式裡寫不寫public是兩種概念,寫public 下面this.name才可以有值 } eat(){ console.log(this.name
); } }

  * name:string 為型別批註,這個是可以寫可以不寫的,對於基本型別的批註是 number, bool 和 string。而弱或動態型別的結構則是 any 型別。如果沒有型別批註那麼就預設為any型別。

  二、繼承

// extends 為繼承,下面表示 Employee繼承了Person類
// super 為呼叫父類的方法
class Employee extends Person{
    //super調父類的建構函式
    constructor(name:string,code:string){
        super(name);//必須呼叫父類的建構函式,不調報錯
console.log("xixi"); this.code=code; } code:string; work(){ super.eat(); this.doWork(); } private doWork(){ console.log('im working'); } }

  * 注意在子類中如果有建構函式宣告則必須呼叫父類的建構函式,不調則報錯。

  呼叫就用這個super來調就可以。如上述程式碼super(name);

  為什麼必須呼叫不調就報錯呢?個人這樣理解的,子類本來就繼承了父類的屬性和方法,建構函式是指new這個例項時候必須遵從這個約定才可以使用,那麼子類繼承父類所以在製造一個約定的時候必須也遵從父類的這個約定才可以,所以必須呼叫一下這個父類的建構函式,不知道我這樣解釋大家可以明白不。。。

  總結super:有兩種呼叫方式,一個是呼叫父類的建構函式,一個是呼叫父類的方法,如super.eat();

var e1 = new Employee("name","1");
e1.eat(); //輸出name

  如這段程式碼,new了一個子類Employee傳入兩個值(因為建構函式約定必須傳兩個值就必須傳,不傳則報錯),可以直接呼叫父類eat函式

  3、泛型

    引數化的型別,一半用來限制集合的內容
var workers:Array<Person> = []; //泛型,指定一個數組只能放某一個型別的元素,其他不行 
workers[0] = new Person("zhangsan");
workers[1] = new Employee("lala","3");
workers[2] = 2; //報錯

  如上述程式碼,指定了workers是Person型別的陣列那麼workers只可以放person型別的 ,那麼有夥伴就會問了,為什麼也可以放Employee型別的?因為Employee型別繼承了person型別的屬性和方法,Employee是person的子類,所以也可以放Employee。

  4、介面

    用來建立某種程式碼約定,使得其他開發者在呼叫某個方法或建立新的類時必須遵循介面所定義的程式碼約定   第一種看如下程式碼   
interface IPerson{
    name:string;
    age:number;
}
class Person2{
    constructor(public config:IPerson){//當介面用作一個類的構造宣告時,在newperson呼叫時會檢查介面的屬性是否符合

    }
}
var p10 = new Person2({
    name:"zhangsan",
    age:18,
})

    interface是介面 聲明瞭一個Iperson這個東西吧,意思就是:person2裡面建構函式說了,必須遵循這個介面!就是說new我的時候必須遵循IPerson不管是型別還是數量還是鍵的名字,都要遵循!不然就報錯。

  第二種介面方式宣告一個函式,

interface Animal {
    eat();
}
class Sheep implements Animal{//implements關鍵字代表該類實現該介面,該類必須定義介面中的方法
    eat(){
        console.log("i eat grass");
    }
}
class Tiger implements Animal{
    eat(){
        console.log("i eat meat");
    }
}

  介面聲明瞭Animal這個東西里面有一個eat函式,那麼implements關鍵字代表該類實現該介面,該類必須定義介面中的方法,就是說哪個類用了這個介面就必須給我宣告一個這個eat函式,不然不遵從就不行。

還挺任性的,也就是強制讓大家都遵從這個約定來開發。

  5、析構表示式

function getName(){
    return {
        id:"13",
        borth:"1994",
        aaa:{
           a1:"lala",
           a2:"fafa"
        }
    }      
}
var {id:ids,aaa:{a2},aaa:{a1:as}}=getName();
console.log(ids);//13
console.log(a2);//fafa
console.log(as);//lala

  這個就是析構表示式啦!就是這樣直接就可以取到對應的值,如果要另外宣告別的名字就:xx就可以了。

另外想說一個問題就是ts這個檔案會搜尋類是否重複,兩個檔案用了共同的類的名字都是會報錯的哦。

如果有說的不對的地方請各路大神指正,互相交流增長經驗,感謝感謝,博主不怕批評互相借鑑。