初學者這樣玩 TypeScript，遲早進大廠系列！

極客江南：一個對開發技術特別執著的程式設計師，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等伺服器端技術。

初學者玩轉 TypeScript系列，總計 5 期，本文為第 1 期，點贊、收藏、評論、關注、三連支援！

一期目錄

對於初學者來說，學習程式設計最害怕的就是，難。

那麼，Typescript 是不是很難？

首先，我可以肯定地告訴你，你的焦慮是多餘的。新手對學習新技術有很強的排斥心理，主要是因為基礎不夠紮實，然後自信心不夠強。

我個人一直強調的是基礎不牢，地動山搖，基礎牢固，什麼都是切菜。其實學習 TS 成本很低，只要你會 JS，學習 TS 就和切菜沒什麼區別。你要知道 TS 程式碼與 JS 程式碼有非常高的相容性，無門檻，你把 JS 程式碼改為 TS 就可以執行，所以說不用擔心。

對於學習 TS 的困擾，我想這部分學生主要是因為沒有接觸過強型別的程式語言，導致他們認為學習TS需要定義各種型別，還有一些新概念等等，會增加學習成本。其實如果你瞭解過強型別語言，那麼上手 TS 並不困難，即便沒接觸過強型別語言，學習起來其實也有一些技巧和規律可循。

1.什麼是 TypeScript (TS)？

TypeScript 簡稱 TS
TS 和 JS 之間的關係其實就是 Less/Sass 和 CSS 之間的關係
就像 Less/Sass 是對 CSS 進行擴充套件一樣, TS 也是對 JS 進行擴充套件
就像 Less/Sass 最終會轉換成 CSS 一樣, 我們編寫好的 TS 程式碼最終也會換成 JS

2.為什麼需要 TypeScript?

因為 JavaScript 是弱型別, 很多錯誤只有在執行時才會被發現
而 TypeScript 是強型別, 它提供了一套靜態檢測機制, 可以幫助我們在編譯時就發現錯誤
… …

3.TypeScript特點

支援最新的 JavaScript 新特特性
支援程式碼靜態檢查
支援諸如 C,C++,Java,Go 等後端語言中的特性
(列舉、泛型、型別轉換、名稱空間、宣告檔案、類、介面等)

4. TypeScript 基礎型別

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

// 數值型別 number
let val1:number; // 定義了一個名稱叫做val1的變數, 這個變數中將來只能儲存數值型別的資料
val1 = 123;
// val1 = "123"; // 會報錯
// 注意點: 其它的用法和JS一樣
// val1 = 0x11;
// val1 = 0o11;
// val1 = 0b11;
console.log(val1);

// 布林型別 boolean
let val2:boolean;
val2 = true;
// val2 = 1; // 會報錯
console.log(val2);

// 字串型別 string
let val3:string;
val3 = "123";
val3 = `val1=${val1}, val2==${val2}`;
console.log(val3);

4. TypeScript 陣列與元祖

陣列型別
元祖型別

// 陣列型別
// 方式一
// 需求: 要求定義一個陣列, 這個陣列中將來只能儲存數值型別的資料
let arr1:Array<number>; // 表示定義了一個名稱叫做arr1的陣列, 這個陣列中將來只能夠儲存數值型別的資料
arr1 = [1, 3, 5];
// arr1 = ['a', 3, 5]; // 報錯
console.log(arr1);

// 方式二
// 需求: 要求定義一個陣列, 這個陣列中將來只能儲存字串型別的資料
let arr2:string[]; // 表示定義了一個名稱叫做arr2的陣列, 這個陣列中將來只能夠儲存字串型別的資料
arr2 = ['a', 'b', 'c'];
// arr2 = [1, 'b', 'c']; // 報錯
console.log(arr2);

// 聯合型別
let arr3:(number | string)[];// 表示定義了一個名稱叫做arr3的陣列, 這個陣列中將來既可以儲存數值型別的資料, 也可以儲存字串型別的資料
arr3 = [1, 'b', 2, 'c'];
// arr3 = [1, 'b', 2, 'c', false]; // 報錯
console.log(arr3);

// 任意型別
let arr4:any[]; // 表示定義了一個名稱叫做arr4的陣列, 這個陣列中將來可以儲存任意型別的資料
arr4 = [1, 'b', false];
console.log(arr4);

// 元祖型別
// TS中的元祖型別其實就是陣列型別的擴充套件
// 元祖用於儲存定長定資料型別的資料
let arr5:[string, number, boolean]; // 表示定義了一個名稱叫做arr5的元祖, 這個元祖中將來可以儲存3個元素, 第一個元素必須是字串型別, 第二個元素必須是數位型別, 第三個元素必須是布林型別
arr5 = ['a', 1, true];
// arr5 = ['a', 1, true, false]; // 超過指定的長度會報錯
arr5 = ['a', 1, true];
console.log(arr5);

5. TypeScript 列舉型別

列舉型別是TS為JS擴充套件的一種型別, 在原生的JS中是沒有列舉型別的

/*
列舉用於表示固定的幾個取值
例如: 一年只有四季、人的性別只能是男或者女
*/
enum Gender{ // 定義了一個名稱叫做Gender的列舉型別, 這個列舉型別的取值有兩個, 分別是Male和Femal
    Male,
    Femal
}
let val:Gender; // 定義了一個名稱叫做val的變數, 這個變數中只能儲存Male或者Femal
val = Gender.Male;
val = Gender.Femal;
// val = 'nan'; // 報錯
// val  = false;// 報錯
// 注意點: TS中的列舉底層實現的本質其實就是數值型別, 所以賦值一個數值不會報錯
// val = 666; // 不會報錯
// console.log(Gender.Male); // 0
// console.log(Gender.Femal);// 1

// 注意點: TS中的列舉型別的取值, 預設是從上至下從0開始遞增的
//         雖然預設是從0開始遞增的, 但是我們也可以手動的指定列舉的取值的值
// 注意點: 如果手動指定了前面列舉值的取值, 那麼後面列舉值的取值會根據前面的值來遞增
// console.log(Gender.Male); // 6
// console.log(Gender.Femal);// 7

// 注意點: 如果手動指定了後面列舉值的取值, 那麼前面列舉值的取值不會受到影響
// console.log(Gender.Male); // 0
// console.log(Gender.Femal);// 6

// 注意點: 我們還可以同時修改多個列舉值的取值, 如果同時修改了多個, 那麼修改的是什麼最後就是什麼
// console.log(Gender.Male); // 8
// console.log(Gender.Femal);// 6

// 我們可以通過列舉值拿到它對應的數位
console.log(Gender.Male); // 0
// 我們還可以通過它對應的資料拿到它的列舉值
console.log(Gender[0]); // Male

// 探究底層實現原理
/*
var Gender;
(function (Gender) {
 // Gender[key] = value;
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Femal"] = 1] = "Femal";
})(Gender || (Gender = {}));

let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";
* */

6. any-void型別

// any型別
// any表示任意型別, 當我們不清楚某個值的具體型別的時候我們就可以使用any
// 一般用於定義一些通用性比較強的變數, 或者用於儲存從其它框架中獲取的不確定型別的值
// 在TS中任何資料型別的值都可以負責給any型別
// let value:any; // 定義了一個可以儲存任意型別資料的變數
// value = 123;
// value = "abc";
// value = true;
// value = [1, 3, 5];


// void型別
// void與any正好相反, 表示沒有任何型別, 一般用於函數返回值
// 在TS中只有null和undefined可以賦值給void型別
function test():void {
    console.log("hello world");
}
test();

let value:void; // 定義了一個不可以儲存任意型別資料的變數, 只能儲存null和undefined
// value = 123; // 報錯
// value = "abc";// 報錯
// value = true;// 報錯
// 注意點: null和undefined是所有型別的子型別, 所以我們可以將null和undefined賦值給任意型別
// value = null; // 不會報錯
value = undefined;// 不會報錯

7. Never-object型別

// Never型別
// 表示的是那些永不存在的值的型別
// 一般用於丟擲異常或根本不可能有返回值的函數
// function demo():never {
//     throw new Error('報錯了');
// }
// demo();

// function demo2():never {
//     while (true){}
// }
// demo2();

// Object型別
// 表示一個物件
let obj:object; // 定義了一個只能儲存物件的變數
// obj = 1;
// obj = "123";
// obj = true;
obj = {name:'lnj', age:13};
console.log(obj);

8. 型別斷言

什麼是型別斷言?
TS中的型別斷言和其它程式語言的型別轉換很像, 可以將一種型別強制轉換成另外一種型別
型別斷言就是告訴編譯器, 你不要幫我們檢查了, 相信我，我知道自己在幹什麼。

/*
例如: 我們拿到了一個any型別的變數, 但是我們明確的知道這個變數中儲存的是字串型別
      此時我們就可以通過型別斷言告訴編譯器, 這個變數是一個字串型別
      此時我們就可以通過型別斷言將any型別轉換成string型別, 使用字串型別中相關的方法了
* */
let str:any = 'it666';
// 方式一
// let len = (<string>str).length;
// 方式二
// 注意點: 在企業開發中推薦使用as來進行型別轉換(型別斷言)
//         因為第一種方式有相容性問題, 在使用到了JSX的時候相容性不是很好
let len = (str as string).length;
console.log(len);

碼字不易，線上求個三連支援。

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到。

推薦閱讀：

最後，再多一句，粉絲順口溜，關注江哥不迷路，帶你程式設計上高速。

版權所有，請勿轉載，轉載請聯絡本人授權