讓前端的子彈飛-TypeScript，子彈飛-TypeScript

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

-- Jeff Atwood 2007

“ 前端，文也；
后端，武也；
全棧，文武雙全者也；
前端全棧者，涉獵甚廣，
文可交互，武可并發(fā)，
硬件編程，更添異彩。愛掏網(wǎng) - it200.com
吾乃前端門下后生之輩，時值太學二年，拜入星辰門下，
研修前端之術(shù)，數(shù)年以來，前端招式變化之快，
群雄割據(jù)，框架紛爭，
三國鼎立者，Angular、React、Vue，吾惶恐不及，
09年始，NodeJS中途島登陸，攻城略地，
超炫3D，WebVR，嘆為觀止。愛掏網(wǎng) - it200.com
古人有云，習前端者，足以立天下。愛掏網(wǎng) - it200.com ”

-- cuitianze 2024

本文開篇同時引用了編程界大牛和菜鳥的語錄來"大肆"宣揚前端的地位，不，不止于前端，我們的真正名字應該叫JavaScript開發(fā)者，“前端”是歷史遺留下的誤解，亦或是在工作崗位中被局限于的小小領域。愛掏網(wǎng) - it200.com

01

—

Jeff Atwood定律

那么2007年提出震驚中外的“Atwood定律”的Jeff Atwood何許人也？他便是叱咤編程界的StackOverflow創(chuàng)始人。愛掏網(wǎng) - it200.com

原博客鏈接如下：https://blog.codinghorror.com/the-principle-of-least-power/。愛掏網(wǎng) - it200.com

Jeff Atwood定律的由來：JavaScript既能獨立完成所有互聯(lián)網(wǎng)應用所需的功能開發(fā)，同時又是主流編程語言中最為輕量級的。愛掏網(wǎng) - it200.com

02

—

JavaScript應用場景

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

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

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

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

• 你的服務器上運行著NodeJS甚至最近剛推出的讓人學不動了的Deno。愛掏網(wǎng) - it200.com

不僅如此，目前最高流量入口的微信小程序和支付寶小程序的開發(fā)語言全都是JavaScript，硬件編程語言中JavaScript也占得了一席之地，區(qū)塊鏈應用開發(fā)中JavaScript也是不可或缺的一環(huán)。愛掏網(wǎng) - it200.com

03

—

JavaScript弊端

然而，盡管JavaScript如此火，幾乎扛下了互聯(lián)網(wǎng)應用的半壁江山，但在語言設計上卻飽受詬病，正如Node 之父 Ryan Dahl所說的Node設計缺陷一樣，其中也涉及到了JavaScript的短板，要不然他也不會在新服務端框架Deno中使用TypeScript作為主要語言。愛掏網(wǎng) - it200.com

冥冥中自有定數(shù)，Deno也許未必能替代Node，尤其是在Node已經(jīng)誕生10年，早已是前端工程化中流砥柱的工具，全世界也有無數(shù)個運行中的服務端應用；而Deno此時此刻卻仍然是Demo。愛掏網(wǎng) - it200.com但TypeScript必將從此一振，此時此刻，也許不是學習Deno的最佳時機，但一定是學習TypeScript的最佳時機。愛掏網(wǎng) - it200.comJavaScript開發(fā)者必將迎來一個嶄新的時代，開啟構(gòu)建大型應用的新時代。愛掏網(wǎng) - it200.com

04

—

踩過的坑

曾幾何時，我們在開發(fā)調(diào)試過程中不知道踩過了多少坑，無數(shù)次激昂澎湃地面對項目代碼重構(gòu)卻望而卻步，因為你不確定弱類型的JavaScript代碼究竟埋藏了多少地雷，也許正是你親手埋下的。愛掏網(wǎng) - it200.com

JavaScript的函數(shù)可以接受任意類型的參數(shù)，看起來很靈活，但一不小心就讓我們陷入排查Bug的地獄中。愛掏網(wǎng) - it200.com

function func(anything) {
 return;
}
復制代碼

像Java這樣的強類型語言，如果參數(shù)不是特定的類型就會報錯，雖然在定義變量時有些繁瑣，但確實能夠在很大程度上避免很多低級卻很隱蔽的Bug。愛掏網(wǎng) - it200.com

05

—

TypeScript的問世

鑒于以上問題，TypeScript橫空出世，TypeScript是JavaScript的超集，遵循最新的ES6規(guī)范，彌補了JavaScript在大型應用開發(fā)中的不足。愛掏網(wǎng) - it200.comTypeScript在靜態(tài)類型檢查、代碼重構(gòu)和語言服務方面的優(yōu)勢十分明顯，而這些正好是JavaScript的劣勢。愛掏網(wǎng) - it200.com

除此之外，在前端面試過程中經(jīng)常會考一些JavaScript類型轉(zhuǎn)換的黑魔法，如+String類型可以轉(zhuǎn)換成Number類型。愛掏網(wǎng) - it200.com我個人認為就算這樣代碼十分精簡，也是不應該提倡使用的，因為這以犧牲代碼可讀性和可維護性為代價，讓許久之后的重構(gòu)變得有心無力、如履薄冰。愛掏網(wǎng) - it200.com

以弱類型語言著稱的JavaScript在字符串、數(shù)字和日期等類型直接的隱式類型轉(zhuǎn)換讓流入和流出函數(shù)的對象類型變得無法窺視，導致在團隊開發(fā)過程中，強調(diào)撰寫代碼注釋成為家常便飯的事情，對代碼進行注釋變得極其重要，否則團隊新成員很難立即接手項目。愛掏網(wǎng) - it200.com

TypeScript可以很好地解決這個問題，你不需要再單獨提交一份文檔進行詳細地解釋代碼，TypeScript可以清楚地記錄每一個對象的屬性、方法的參數(shù)等。愛掏網(wǎng) - it200.com

06

—

TypeScript基本介紹

TypeScript支持與JavaScript幾乎相同的數(shù)據(jù)類型，此外還提供了實用的枚舉類型方便我們使用。愛掏網(wǎng) - it200.com

• 布爾值

let isDone: boolean = false;

• 數(shù)字

let decLiteral: number = 6;

• 字符串

let name: string = "bob";

• 數(shù)組

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;

聯(lián)合類型，又可以稱之為選擇類型，只要滿足其一便可。愛掏網(wǎng) - it200.com

let age: number | string;

類，類是TS的核心，使用TS開發(fā)時，大部分代碼都是寫在類里面的。愛掏網(wǎng) - it200.com

class Greeter {
 greeting: string;
 constructor(message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}
復制代碼

更進一步，類有公共，私有與受保護的修飾符。愛掏網(wǎng) - it200.com

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 私有 只有類內(nèi)部可以訪問

• protected 受保護 只有子類能用

接口Interface，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。愛掏網(wǎng) - it200.com

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"});
復制代碼

其中“？”表示可選參數(shù)。愛掏網(wǎng) - it200.com

function test(a:string, b?:string, c:"ctz"){
 console.log(a);
 console.log(b);
 console.log(c);
}
復制代碼

泛型，在像C#和Java這樣的語言中，可以使用泛型來創(chuàng)建可重用的組件，一個組件可以支持多種類型的數(shù)據(jù)。愛掏網(wǎng) - it200.com 這樣用戶就可以自定義數(shù)據(jù)類型來使用組件。愛掏網(wǎng) - it200.com

function identityT>(arg: T): T {
 return arg;
}

let myIdentity: (arg: T) => T = identity;
復制代碼

class Calc {
 a: T;
 b: T;
}
復制代碼

07

—

TypeScript的未來

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

隨著技術(shù)的發(fā)展，JavaScript終會向著TypeScript的方向看齊，屆時我們能更加游刃有余地開發(fā)超大型應用。愛掏網(wǎng) - it200.com

在未來，我相信，任何能用JavaScript實現(xiàn)的應用，終將使用TypeScript寫成。愛掏網(wǎng) - it200.com

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

本文只是拋磚引玉，更多關(guān)于TypeScript的用法還需要大家在實踐中自己去探索和慢慢積累。愛掏網(wǎng) - it200.com

TypeScript官方文檔地址：http://www.typescriptlang.org/docs/home.html。愛掏網(wǎng) - it200.com

原文發(fā)布時間：2024-06-22

原文作者：黑馬大前端

本文來源掘金如需轉(zhuǎn)載請緊急聯(lián)系作者