當前位置:
首頁 > 知識 > typescript入門,可以一起探討提點意見互相學習

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

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

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

一、類型批註和類

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

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函數

三、泛型

參數化的類型,一半用來限制集合的內容

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。

四、介面

用來建立某種代碼約定,使得其他開發者在調用某個方法或創建新的類時必須遵循介面所定義的代碼約定

第一種看如下代碼

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函數,不然不遵從就不行。

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

五、析構表達式

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

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

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

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

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

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

puppeteer實現線上伺服器任意區域截圖
10大Python集成開發環境和代碼編輯器(指南)

TAG:程序員小新人學習 |