摘要:抽象類就是只是用來繼承而不是實現的類。這里我解釋清楚沒有為什么會有抽象類。接口就是這么一個玩意,我們看看你劉姨的需求。
好,我們繼續那個沉重的話題分割我的財產,上一篇
TypeScript極速完全進階指南-1初級篇
我兒子確實拿到錢了,
class Person{ name:string; age:number; food:string = "剁椒魚頭";//外面賦值這里賦值一碼事 private money:number = 10000000000000;//別激動,肯定不是中國天堂銀行發行的 //構造函數,人生下來,年齡就定了 constructor(name:string,age:number){ this.name = name; this.age = age; } //eat 大彬哥就特么愛吃魚 favoriteFood(){ return this.food; } makeMoney(salary:number):number{ return this.money+=salary; } //我自己被窩偷著樂,數1后面的0 touZheLe(){ return this.money; } } //1.啥也別說先造個人再說 var dabinge = new Person("大彬哥",18); //2.想問我多大撩我或者請我吃飯問我愛吃啥我肯定告訴你 console.log(dabinge.age); console.log(dabinge.favoriteFood()); //3.想問我銀行卡里有多少錢?我肯定不告訴你 // console.log(dabinge.money); // 大彬哥每個月工資不是很多998 dabinge.makeMoney(998); //4.我自己在被窩可以偷著看自己余額,通過偷著樂函數看私有屬性 console.log(dabinge.touZheLe());//10000000000998 class bingeSons extends Person{ isHandsome:boolean = true; constructor(name:string,age:number){ super(name,age);//都是我的老底兒,姓名年齡cls } } let binSon = new bingeSons("彬哥2.0",18); console.log(binSon.food);//我兒子錢都到手了
但是,不管是法律或者大彬哥遺囑肯定不能這么寫,我大兒子能繼承我的錢,我二兒子也能繼承,我三兒子也能繼承,我大女兒能繼承,二女兒能繼承,這么寫估計我還沒寫完就掛了,或者法律書得多厚??!一般都會這么說只要是直系親屬這一類人都能繼承我的錢,而不用強調某個人。這里我根本不用管單個人。這里我寫分錢,寫一個特別適用而典型的例子,數學方法。我們平常用數學方法的時候沒必要先New一個吧(我不想臭拽那些名詞,比如實例化)。
肯定不這樣用:
let M = new Math(); M.random()
而是直接用類調用
Math.random() Math.PI
這個玩意在類里面叫靜態屬性和方法,用static去修飾,跟private類似。
class BinMath{ static PI:number=66666; static random():number{ return Math.random(); } } console.log(BinMath.PI); console.log(BinMath.random());
好,回到財產分配問題,確實給我子女一部分錢了,但是我還是個很精確的人我說的是一部分,而不是所有,因為我想捐給慈善機構一部分。但是這里問題就來了,大家考慮,我不可能說清楚所有慈善基金會的標準,那我豈不是要累死。我只能說這個基金會的大體標準,后續基金會打算拿錢肯定得滿足我說的條件,然后還有自己的實際情況。我只能抽象的說些條件,比如慈善機構必須得有名字,存活50年以上的,比如必須財務透明,還有就是教育類的,要解決這個問題就得使用抽象類。抽象類就是只是用來繼承而不是實現的類。其實你看極端的情況我只說這類慈善機構必須有名字,實際這個跟沒說一樣,你隨便套一個機構都行,所以說新建一家有名字的機構跟廢話一樣,但是其他機構必須符合這些條件。這里我解釋清楚沒有為什么會有抽象類。比如你要開發一個實際組件,你知道這個組件肯定得有名字,得有描述得有版本號,但是這些東西你new出一個對象沒有毛用,它只是一個規范,更合適的方式是 按照這個規范去做事,也就是繼承它。拿分錢舉例,
abstract class Jigoubiaozhun { abstract jigouName: string; age:number = 50; abstract showMoney(money:number):number;//你只要把我錢公示就行了是網上還是其他地方我不管,你自己去實現 constructor(name: string,age:number) { } } //假設有一類慈善機構是專門去給沙漠兒童捐款挖井的,想申請,說符合我要求 class shamoChildren extends Jigoubiaozhun{ public jigouName = "沙漠挖井基金協會" private money: number = 5000000; showMoney():number{ return this.money; } constructor(name:string,age:number){ super(name,age); } } var xinJiangWajing = new shamoChildren("新疆挖井隊",50); console.log(xinJiangWajing.showMoney());
大彬哥分錢圓滿結束!
正寫著教程呢,這時候你劉姨打電話跟我說,別吹牛逼了,趕緊找對象,要找個懂事的,工作好的,疼你的,但是你懂得,你問她誰?。克偸侵挥袠藴剩ń涌冢屇阕约喝崿F(implements),就像接口一樣。接口就是這么一個玩意,我們看看你劉姨的需求。
interface girl { dongshi:boolean; job:string; tengNi(): boolean;//接口不能實現方法 只有規定,跟你劉姨真像 } class GirlFriend implements girl{ dongshi=true; job = "good"; tengNi(){ return true; } } var cuihua = new GirlFriend(); console.log(cuihua.job);
為啥要有interface呢,太好理解了你劉姨怕我走歪路唄,好我們看看代碼出事兒的情況:
function renshi(meizi:any){ console.log(meizi.name); } function yuehui(meizi:any){ console.log(meizi.name+"晚上一起看電影吧,記得帶身份證"); } const meizi = { name:"白富美" } renshi(meizi); yuehui(meizi);
我修改一點,
const meizi = { mingzi:"白富美" }
完蛋了,約會三件套都得改……有同學說我改meizi一個地方不就行了,這樣有兩個問題1.你懂大彬哥的妹子有一個加強連那么多你怎么改?第二要是能在寫的時候就防止這么寫多好?滿足你需求。
interface date{ mingzi:string; } function renshi(meizi:date){ console.log(meizi.name);//報錯,直接扼殺錯誤在搖籃之中 } function yuehui(meizi:date){ console.log(meizi.name+"晚上一起看電影吧,記得帶身份證"); } const meizi = { name:"白富美" } renshi(meizi); yuehui(meizi);
但是你懂得,不是每一個女孩用約會三件套都好使,比如運動型女孩,你可以找她去打羽毛球,文靜型女孩你可以去帶她聽音樂會,書香門第的女孩你可以帶她去逛逛潘家園……你得對癥下藥,但是問題來了,你劉姨雖然給你介紹一加強連的女孩,但是我在見面之前我是不知道她是什么類型,這就容易產生你對著古典的女孩約她打羽毛球的問題。用代碼表示,就是有時候我們一開始并不知道參數的類型,只有在執行的時候才知道。
function showData(data:any){ return data; } showData("leolau").length; showData(12).length;//這特么不就廢了么 showData({ name: "leo" }).length; showData([12, 5, 8]).length;
咋整?TS里面又一個牛逼的東西叫做泛型。泛型的意思就是,先別管類型是啥,先到我碗里來,然后處著的時候我在看她是哪種類型。好,我們看下咋整。
function showData(data:T){ return data; } console.log(showData ("leolau").length); console.log(showData (12).length); console.log(showData({ name: "leo" }).length); console.log(showData([12, 5, 8]).length);
話不投機,當場報錯,當然了泛型也可以用在類型上,比如說長頭發大眼睛是不是很可能是溫柔的女孩啊,就像數組很可能裝的是數字一樣。
const arr: Array= [12, 5, 8]; arr.push("約么");//人家數字類型,你總不好放string吧
函數參數也可以泛型,其實就是不知道啥類型。
function showArray(data:T[]){//這里雖然是泛型但是規定了必須死數組 for(var i = 0;i (["leo","lau"]);
說到妹子的話差別還是很大的,有些人家境一般有些人是含著金鑰匙長大的,但是良好的家境只是人家的裝飾,而不是決定一切的,畢竟順境加個人努力成功的人很多,我說這句話是想說ts里面也有裝飾器,它就像手槍的消聲器一樣。代碼如下:
function hasKey(constructor:Function){ console.log("我含著金鑰匙呢"); } @hasKey class Person{ name:string; age:number; constructor(name: string, age: number){ this.name = name; this.age = age; console.log("我是" + name +",今年"+age+"歲我驕傲了嗎"); } } const baifumei = new Person("白富美",18); console.log(baifumei);
說了很多關于類,和接口的東西,這些其實很大程度上是為了復用和代碼簡潔!
面我要說另外一個東西,讓代碼更加簡潔和實用的東西-模塊化。
新建./Math/two.ts
export const double:number = 2; export function doubleKill(num:number):number{ return num * double; }
新建techMod.ts并引入,
import { double, doubleKill} from "./Math/two"; console.log(double, doubleKill(3));
報錯,export未定義,原因是原生js哪怕ES6瀏覽器都不支持模塊化,咋整,實用模塊加載庫。
個人比較喜歡,SystemJs,為啥喜歡它?喜歡需要理由嗎?好吧這么說容易挨打,因為它的語法很可能成為將來的事實標準,這樣可以讓你省的在學一遍。
npm install systemjs --save
啥也不說了,上一梭子代碼。
Document
到目前我們已經搞定了大部分TypeScript,但是我知道你在想啥,知道了知識該怎么實際應用呢?比如說如何搭建一個工作流開發項目呢?或者說如何用TS去結合到angular、react、vue框架呢?
我知道大家想的是你是不是想要講TS怎么用到Angular中啊?既然大家呼聲那么高,那我就講TypeScript如何搭建工作流開發React應用……
更多精彩內容歡迎大家觀看我的SF講座TypeScript極速完全進階指南
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94517.html
摘要:簡介比更強大的開源語言,簡稱,親爸是微軟。大彬哥就愛吃剁椒魚頭。接口,范型,命名空間,以及模塊化管理,并講在框架和工作流中的應用等更多精彩內容歡迎大家觀看我的講座極速完全進階指南 +TypeScript簡介 ? 1.比javascript更強大的開源語言,簡稱TS,親爸是微軟。 ? 2.官網 ? 英文官網:https://www...
摘要:前面我們已經說了大部分的核心內容,接下來我們就說說如何用開發實際項目。因為和結合很緊密,資料也很多,而且我會找機會專門說下這方面的知識,所以我們將重點放到如何用結合上來。所以前面打牢基礎,現在我們開始實際組建工作流。 前面我們已經說了大部分typescript的核心內容,接下來我們就說說如何用typescript開發實際項目。 因為angular和typescript結合很緊密,資料也...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 2007·2021-11-24 09:39
閱讀 1143·2021-09-10 11:25
閱讀 1769·2021-09-08 10:42
閱讀 3733·2021-09-06 15:00
閱讀 2498·2019-08-30 15:54
閱讀 3116·2019-08-29 17:08
閱讀 3271·2019-08-29 11:26
閱讀 2840·2019-08-28 18:27