《前端之路》 - 初試 TypeScript（一）基礎數據類型

目錄

• 1、先講講 TypeScript
• 2、 typeScript 的數據類型 （Basic Types）
• 3、總結

1、先講講 TypeScript

什麼是 typeScript ？

typeScript 是 Javascript 的超集 咱們用一張圖來簡單介紹下 ts 和 js 清清楚楚明明白白的關係～

爲何會出現 typeScript

在說 typeScript 以前 ，咱們先了解下 Javascript。

JS裏面一切皆爲對象，經過原型鏈來定義了系列不一樣類型數據的原生方法，而後給到了系列能夠改變上下文的奇淫巧技，讓 JS 在使用起來的時候能夠很是方便，不須要考慮過多，鏈上了我們就瘋狂使用，這樣真的好麼？（ 靈魂拷問 ）

並且在數據類型上，JS 也是沒有過多的限制，只要你定了這個變量且賦值了，那麼在該變量未被銷燬以前，你也能夠瘋狂改變它的數據類型（基礎數據類型）

在有了幾年的開發經驗以後，特別是參與過大型項目開發的同窗就會發現，對於初學者來說很是方便友好的特性，忽然就變成了bug製造機。每每由於數據類型的判斷，JS 都給出了一系列的方法，並且都還不是特別準確，這讓一項嚴謹的開發者們變的有些不那麼嚴謹，那麼 typeScript 就出現了，讓編程這項原本就須要很是嚴謹的工做，迴歸了本質。 這或許就是 typeScript 出現的緣由。

如何使用 typeScript
如何使用的話題，其實對於有過幾年的開發者來說，最簡單且最快速的學習方法就是打開 他們的官方文檔，typeScript官方文檔

可是了，我在閱讀過程當中查到了新的版本文檔，閱讀起來人性化了不少，這裏也奉上地址 typeScript官方文檔-V2

下面咱們就先針對 typeScript 的基礎知識來進行復習一下

2、 typeScript 的數據類型 （Basic Types）

typeScript 的 Basic Types 包含了哪些呢？

• Boolean （布爾類型）
• Number （數字類型）
• String （字符串類型）
• Array （數組類型）
• Tuple （元組類型）
• Enum （可枚舉類型）
• Any （任意類型）
• Void （Void 類型）
• Null & Undefined
• Never （Never 類型）
• Object （object 類型-非原始類型）

2.1.1 Boolean （布爾類型）

TypeScript 語法

let isBool: Boolean = false;

被編譯成 ES5 的 JavaScript

"use strict";
var isBool = false;

2.1.2 Number （數字類型）

TypeScript 語法

let nums: number = 123;

被編譯成 ES5 的 JavaScript

"use strict";
var nums = 123;

2.1.3 String （字符串類型）

TypeScript 語法

let str: string = "123";

被編譯成 ES5 的 JavaScript

"use strict";
var str = "123";

2.1.4 Array （數組類型）

TypeScript 語法

// 純數組類型數組表示方式
let arr0: number[] = [123, 123];
// 使用數組泛型
let arr1: Array<number> = [123, 345];
let arr2: Array<string> = ["123", "345"];
let arr3: Array<any> = [123, "345", { title: "123" }];

被編譯成 ES5 的 JavaScript

"use strict";
// 純數組類型數組表示方式
var arr0 = [123, 123];
// 使用數組泛型
var arr1 = [123, 345];
var arr2 = ["123", "345"];
var arr3 = [123, "345", { title: "123" }];

2.1.5 Tuple （元組類型）

稍微解釋下什麼叫元組類型,元組類型本質上也屬於 數組類型的一種，是數組類型的子集，而後不一樣的一點在於，元組類型的數據長度是已知的。就是說咱們爲這裏每一位數組中的數據定義類型。那這種類型就叫 ##元組類型##

TypeScript 語法

let tupleArr: [number, string];
tupleArr = [123, "123"];

被編譯成 ES5 的 JavaScript

"use strict";
var tupleArr;
tupleArr = [123, "123"];

2.1.6 Enum （可枚舉類型）

稍微解釋下什麼叫可枚舉類型，由於這對於大多數只瞭解 JS 的前端開發者來說是一個新的數據類型，可是 `可枚舉類型` 在 c/c#/java 中已是很是常見的了。一句話歸納就是，枚舉是組織收集有關聯變量的一種方式。來，咱們先舉個🌰：

 在 c語言中，咱們須要定義一系列的變量，咱們通常會這樣去定義：

#define MON 1
#define TUE 2
#define WED 3
#define THU 4
.
.
.

若是有了枚舉類型，咱們又能夠怎麼來定義呢？

enum DAY {
    MON=1, TUE, WED, THU, FRI, SAT, SUN
}

那就有同窗要過來問了， 這樣有什麼區別麼？這是一個好問題，由於咱們來結合一個實際咱們前端開發過程當中常常會遇到的一個場景來描述一下枚舉類型存在的必要性。

TypeScript 語法

enum HttpStutas {
    success = 200,
    error = 404,
    noRequestId = 10010,
    noRequestName = 10011,
}

let res = HttpStutas.success;
console.log(res);

被編譯成 ES5 的 JavaScript

"use strict";
var HttpStutas;
(function (HttpStutas) {
    HttpStutas[HttpStutas["success"] = 200] = "success";
    HttpStutas[HttpStutas["error"] = 404] = "error";
    HttpStutas[HttpStutas["noRequestId"] = 10010] = "noRequestId";
    HttpStutas[HttpStutas["noRequestName"] = 10011] = "noRequestName";
})(HttpStutas || (HttpStutas = {}));
var res = HttpStutas.success;
console.log(res);   // 200
console.log(HttpStutas)
/**
 * { '200': 'success',
  '404': 'error',
  '10010': 'noRequestId',
  '10011': 'noRequestName',
  success: 200,
  error: 404,
  noRequestId: 10010,
  noRequestName: 10011 }
 * 
*/

// 這裏對於咱們須要的一個理解是，在 JavaScript 賦值運算符，就是這裏的等號，返回的解決是被賦的這個值。

// 這裏其實咱們就簡單的定義了一些 http 請求返回的狀態碼，咱們實時根據狀態碼來轉譯成咱們能夠輕鬆看懂的字符串，這裏也算是一個前端的同窗在平常開發中經常會遇到的問題

2.1.7 Any （任意類型）

TypeScript 語法

let a: any = '123';
a = 123;
a = true;
a = {
    x: '123',
};

let arr: any[] = [1, '123', {}, true, [123]];

被編譯成 ES5 的 JavaScript

"use strict";
var a = '123';
a = 123;
a = true;
a = {
    x: '123',
};
var arr = [1, '123', {}, true, [123]];

2.1.8 Viod （Viod類型）

這裏也須要簡單介紹了，通常咱們的函數通常其實會分爲2種，一種是執行之後有數據返回的，一種是沒有任何數據返回的，那麼在介紹 Viod 以前咱們就須要介紹下，函數確認返回數據類型的時候，咱們須要怎麼去寫。

TypeScript 語法

let fun1 = function(): string {
    return '123';
};

let fun2 = function(): number {
    return 123;
};

let fun3 = function(): Array<number> {
    return [1, 213, 213];
};

let fun4 = function(): Array<string> {
    return ['13', 'axa'];
};

let fun5 = function(): Array<any> {
    return ['13', 213, {}];
};

let fun6 = function(): any {
    return { a: 123 };
};

let fun7 = function(): void {
    console.log(fun1);
};

// 注意這裏的 fun7 其實就是沒有 return 任何數據，這個時候咱們就給這個function 定義成一個 viod 類型。

被編譯成 ES5 的 JavaScript

"use strict";
var fun1 = function () {
    return '123';
};
var fun2 = function () {
    return 123;
};
var fun3 = function () {
    return [1, 213, 213];
};
var fun4 = function () {
    return ['13', 'axa'];
};
var fun5 = function () {
    return ['13', 213, {}];
};
var fun6 = function () {
    return { a: 123 };
};
var fun7 = function () {
    console.log(fun1);
};

2.1.9 null & undefined （null 和 undefied 類型）

TypeScript 語法

let n: null = null;
let u: undefined = undefined;

console.log(n === null); // true

被編譯成 ES5 的 JavaScript

"use strict";
var n = null;
var u = undefined;
console.log(n === null); // true

2.1.10 never（never 類型）

TypeScript 語法

let ass: never;

// ass = 123; // ts 會報錯

// never 是 null 和 undefined 的子集，表示歷來不會出現的類型

ass = (() => {
    // ts 正確寫法
    throw Error('錯誤');
})();

// 可是每每，咱們用never類型比較少，通常會用 number 類型或者 string 類型替代

被編譯成 ES5 的 JavaScript

"use strict";
var ass;
// ass = 123; // ts 會報錯
// never 是 null 和 undefined 的子集，表示歷來不會出現的類型
ass = (function () {
    // ts 正確寫法
    throw Error('錯誤');
})();
// 可是每每，咱們用never類型比較少，通常會用 number 類型或者 string 類型替代

2.1.11 object （object 類型）

其實這裏簡單解釋一下，什麼是 object 類型，object 是非原始類型，且是 非 number, string, boolean, symbol, null, or undefined. 之外的一種類型

TypeScript 語法

let o: object;
let names: string = 'zhang';
o = {
    names,
};

被編譯成 ES5 的 JavaScript

"use strict";
var o;
var names = 'zhang';
o = {
    names: names,
};

3、總結

這篇文章，總結來講是先介紹了下 typeScript 的基礎數據類型，以及 typeScript 的 what、why、how 的一個基本介紹，介紹 什麼是 typeScript，爲何要用typeScript以及 如何使用 typeScript 。那麼咱們初次接觸到的話，主要是須要注意 語法上的差別，由於每每，咱們在給各類數據類型定義類型的時候每每會出現一些語法錯誤，這裏你們在書寫的時候注意一下，若是出錯能夠經過 vscode 查看對應的錯誤提示.

GitHub 地址：（歡迎 star 、歡迎推薦 : )
《前端之路》 - 初試 TypeScript（一）基礎數據類型