TypeScript極速完全進階指南-2中級篇

前端大彬哥發表於2018-04-23

好,我們繼續那個沉重的話題分割我的財產,上一篇
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());

大彬哥分錢圓滿結束!

正寫著教程呢,這時候你劉姨打電話跟我說,別吹牛逼了,趕緊找物件,要找個懂事的,工作好的,疼你的,但是你懂得,你問她誰啊?她總是隻有標準(介面),讓你自己去實現(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<T>(data:T){
    return data;
}
console.log(showData<string>(`leolau`).length);
console.log(showData<number>(12).length);
console.log(showData({ name: `leo` }).length);
console.log(showData([12, 5, 8]).length);

話不投機,當場報錯,當然了泛型也可以用在型別上,比如說長頭髮大眼睛是不是很可能是溫柔的女孩啊,就像陣列很可能裝的是數字一樣。

const arr: Array<number> = [12, 5, 8];
arr.push(`約麼`);//人家數字型別,你總不好放string吧

函式引數也可以泛型,其實就是不知道啥型別。

function showArray<T>(data:T[]){//這裡雖然是泛型但是規定了必須死陣列
    for(var i = 0;i<data.length;i++){
        console.log(data);
    }
}
showArray<string>([`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

啥也不說了,上一梭子程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/node_modules/systemjs/dist/system.js"></script>
    <script>
        SystemJS.config({
            baseURL: `/`,
            packages:{
                `/`:{
                    defaultExtension: `js`
                }
            }
        });

        // loads /modules/jquery.js
        SystemJS.import(`techMod.js`);
    </script>
</head>
<body>
</body>
</html>

到目前我們已經搞定了大部分TypeScript,但是我知道你在想啥,知道了知識該怎麼實際應用呢?比如說如何搭建一個工作流開發專案呢?或者說如何用TS去結合到angular、react、vue框架呢?

我知道大家想的是你是不是想要講TS怎麼用到Angular中啊?既然大家呼聲那麼高,那我就講TypeScript如何搭建工作流開發React應用……
更多精彩內容歡迎大家觀看我的SF講座TypeScript極速完全進階指南

相關文章