讓前端的子彈飛-TypeScript

黑馬大前端發表於2019-03-03
前端TypeScript
“ Any application that can be written in JavaScript，will eventually be written in JavaScript. ”

-- Jeff Atwood 2007

“ 前端，文也；
後端，武也；
全棧，文武雙全者也；
前端全棧者，涉獵甚廣，
文可互動，武可併發，
硬體程式設計，更添異彩。
吾乃前端門下後生之輩，時值太學二年，拜入星辰門下，
研修前端之術，數年以來，前端招式變化之快，
群雄割據，框架紛爭，
三國鼎立者，Angular、React、Vue，吾惶恐不及，
09年始，NodeJS中途島登陸，攻城略地，
超炫3D，WebVR，歎為觀止。
古人有云，習前端者，足以立天下。 ”

-- cuitianze 2016


讓前端的子彈飛-TypeScript


本文開篇同時引用了程式設計界大牛和菜鳥的語錄來"大肆"宣揚前端的地位，不，不止於前端，我們的真正名字應該叫JavaScript開發者，“前端”是歷史遺留下的誤解，亦或是在工作崗位中被侷限於的小小領域。


01

—

Jeff Atwood定律


那麼2007年提出震驚中外的“Atwood定律”的Jeff Atwood何許人也？他便是叱吒程式設計界的StackOverflow創始人。


原部落格連結如下：https://blog.codinghorror.com/the-principle-of-least-power/。


Jeff Atwood定律的由來：JavaScript既能獨立完成所有網際網路應用所需的功能開發，同時又是主流程式語言中最為輕量級的。


02

—

JavaScript應用場景


JavaScript雖然不是萬能的，但他卻能執行在我們所期望能執行的任何地方，譬如：


  • 你的瀏覽器上（幾乎所有的瀏覽器，估計不支援的瀏覽器早已消逝在歷史長河中）；

  • 你的手機和平板電腦（如React Native，Weex，Cordova）;

  • 你的桌面應用（如Electron、NW.js可以橫跨Mac、Windows、Linux三大主流作業系統）;

  • 你的伺服器上執行著NodeJS甚至最近剛推出的讓人學不動了的Deno。


不僅如此，目前最高流量入口的微信小程式和支付寶小程式的開發語言全都是JavaScript，硬體程式語言中JavaScript也佔得了一席之地，區塊鏈應用開發中JavaScript也是不可或缺的一環。



03

—

JavaScript弊端


然而，儘管JavaScript如此火，幾乎扛下了網際網路應用的半壁江山，但在語言設計上卻飽受詬病，正如Node 之父 Ryan Dahl所說的Node設計缺陷一樣，其中也涉及到了JavaScript的短板，要不然他也不會在新服務端框架Deno中使用TypeScript作為主要語言。


冥冥中自有定數，Deno也許未必能替代Node，尤其是在Node已經誕生10年，早已是前端工程化中流砥柱的工具，全世界也有無數個執行中的服務端應用；而Deno此時此刻卻仍然是Demo。但TypeScript必將從此一振，此時此刻，也許不是學習Deno的最佳時機，但一定是學習TypeScript的最佳時機。JavaScript開發者必將迎來一個嶄新的時代，開啟構建大型應用的新時代。


04

—

踩過的坑


曾幾何時，我們在開發除錯過程中不知道踩過了多少坑，無數次激昂澎湃地面對專案程式碼重構卻望而卻步，因為你不確定弱型別的JavaScript程式碼究竟埋藏了多少地雷，也許正是你親手埋下的。


JavaScript的函式可以接受任意型別的引數，看起來很靈活，但一不小心就讓我們陷入排查Bug的地獄中。


function func(anything) {
    return;
}
複製程式碼


像Java這樣的強型別語言，如果引數不是特定的型別就會報錯，雖然在定義變數時有些繁瑣，但確實能夠在很大程度上避免很多低階卻很隱蔽的Bug。


05

—

TypeScript的問世


鑑於以上問題，TypeScript橫空出世，TypeScript是JavaScript的超集，遵循最新的ES6規範，彌補了JavaScript在大型應用開發中的不足。TypeScript在靜態型別檢查、程式碼重構和語言服務方面的優勢十分明顯，而這些正好是JavaScript的劣勢。


除此之外，在前端面試過程中經常會考一些JavaScript型別轉換的黑魔法，如+String型別可以轉換成Number型別。我個人認為就算這樣程式碼十分精簡，也是不應該提倡使用的，因為這以犧牲程式碼可讀性和可維護性為代價，讓許久之後的重構變得有心無力、如履薄冰。


以弱型別語言著稱的JavaScript在字串、數字和日期等型別直接的隱式型別轉換讓流入和流出函式的物件型別變得無法窺視，導致在團隊開發過程中，強調撰寫程式碼註釋成為家常便飯的事情，對程式碼進行註釋變得極其重要，否則團隊新成員很難立即接手專案。


TypeScript可以很好地解決這個問題，你不需要再單獨提交一份文件進行詳細地解釋程式碼，TypeScript可以清楚地記錄每一個物件的屬性、方法的引數等。


06

—

TypeScript基本介紹


TypeScript支援與JavaScript幾乎相同的資料型別，此外還提供了實用的列舉型別方便我們使用。

  • 布林值

let isDone: boolean = false;

  • 數字

let decLiteral: number = 6;

  • 字串

let name: string = "bob";

  • 陣列

let list: number[] = [1, 2, 3];

  • 元組 Tuple

let x: [string, number];

  • 列舉

enum Color {Red, Green, Blue}

  • 任意值

let notSure: any = 4;

  • 空值

function warnUser(): void {

alert("This is my warning message");

}

let unusable: void = undefined;

  • Null 和 Undefined

let u: undefined = undefined;

let n: null = null;

  • Never

function infiniteLoop(): never {

while (true) {

}

}

  • Object

declare function create(o: object | null): void;


聯合型別，又可以稱之為選擇型別，只要滿足其一便可。


let age: number | string;


類，類是TS的核心，使用TS開發時，大部分程式碼都是寫在類裡面的。


class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
複製程式碼


更進一步，類有公共，私有與受保護的修飾符。


class Person {
    public name: string;
    private age: number;
    public constructor(theName: string) { this.name = theName; }
    protected move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
複製程式碼


  • public 公有 任何人可以訪問

  • private 私有 只有類內部可以訪問

  • protected 受保護 只有子類能用


介面Interface，介面的作用就是為這些型別命名和為你的程式碼或第三方程式碼定義契約。


interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});
複製程式碼


其中“？”表示可選引數。


function test(a:string, b?:string, c:"ctz"){
    console.log(a);
    console.log(b);
    console.log(c);
}
複製程式碼


泛型，在像C#和Java這樣的語言中，可以使用泛型來建立可重用的元件，一個元件可以支援多種型別的資料。 這樣使用者就可以自定義資料型別來使用元件。


function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;
複製程式碼


class Calc<T> {
    a: T;
    b: T;
}
複製程式碼


07

—

TypeScript的未來


總之，對於Javascript來說，TypeScript就像超時代的自己！

隨著技術的發展，JavaScript終會向著TypeScript的方向看齊，屆時我們能更加遊刃有餘地開發超大型應用。

在未來，我相信，任何能用JavaScript實現的應用，終將使用TypeScript寫成。

“ Any application that can be written in JavaScript，will eventually be written in TypeScript. ”


本文只是拋磚引玉，更多關於TypeScript的用法還需要大家在實踐中自己去探索和慢慢積累。

TypeScript官方文件地址：http://www.typescriptlang.org/docs/home.html。


本文作者：黑馬大前端 cuitianze


相關文章