一文看懂 | 關于 TypeScript 總結
TypeScript 是微軟開發的一個開源的編程語言，通過在 JavaScript 的基礎上添加靜態類型定義構建而成。
TypeScript 更具表現力，這意味著它的語法混亂更少，由于高級調試器專注于在編譯時之前捕獲邏輯錯誤，因此調試很容易，靜態類型使 TypeScript 比 JavaScript 動態類型更易于閱讀和結構化，由于通用的轉譯，它可以跨平臺使用，在客戶端和服務器端項目中。
TypeScript 通過 TypeScript 編譯器或 Babel 轉譯為 JavaScript 代碼，可運行在任何瀏覽器，任何操作系統，當前穩定版本為 4.2.3 版本。
TypeScript 的主要特點是什么?
跨平臺性：
TypeScript 編譯器可以安裝在任何操作系統上，包括 Windows、macOS 和 Linux;
支持 ES6 特性：
TypeScript 包含計劃中的 ECMAScript 2015(ES6) 的大部分特性，例如箭頭函數;
面向對象編程思想：
TypeScript 提供所有標準的 OOP 功能，如類、接口和模塊;
嚴格的靜態類型檢查：
TypeScript 使用靜態類型并幫助在編譯時進行類型檢查，因此，你可以在編寫代碼時發現編譯時錯誤，而無需運行腳本;
可選的靜態類型：
如果你習慣了 JavaScript 的動態類型(在使用變量的時候可以根據傳值改變變量的數據類型)，TypeScript 還允許可選的靜態類型(在變量后面添加冒號+數據類型，在使用中不可以改變其數據類型，否則報錯);
DOM 操作：
您可以使用 TypeScript 來操作 DOM 添加或刪除客戶端網頁元素;
全局作用域：
在任何類之外定義，可以在程序中的任何地方使用;
函數/類范圍：
在函數或類中定義的變量可以在該范圍內的任何地方使用;
局部作用域/代碼塊：
在局部作用域中定義的變量可以在該塊中的任何地方使用;
TypeScript 內置數據類型
數字類型：
用于表示數字類型的值，TypeScript 中的所有數字都存儲為浮點值;
- let decLiteral: number = 6; // 十進制
- let hexLiteral: number = 0xf00d; // 十六進制
- let binaryLiteral: number = 0b1010; // 二進制
- let octalLiteral: number = 0o744; // 八進制
布爾類型：
一個邏輯二進制開關，只能包含 true 或 false;
- let isTrue:boolean = true;
字符串類型：
可以用單引號(')和雙引號(")來表示字符串類型，除此之外還支持使用模板字符串反引號(`)來定義多行文本和內嵌表達式，使用 ${ expr } 的形式嵌入變量或表達式;
- let name:string = 'Tom';
- let city:string = 'Beijing';
- let content:string = `他叫 ${ name } 生活在 ${ city }`;
數組類型：
TypeScript 數組的操作類似于 JavaScript 中數組的操作，TypeScript 建議最好只為數組元素賦予一種類型的值，定義數組有兩種寫法;
- let arr: number[] = [2,3];
- let arr: Array<number> = [2,3];
對象類型：
object 對象類型可以用于描述一個對象;
- const people: object = {
- name: "Tom",
- age: 20,
- city: 'Beijing',
- }
- console.log('他叫 ${people.name} ,他住在${people.city}');
symbol類型：
在 ES5 中，如果我們是不可以在對象中添加相同的屬性名稱的，但是我們也可以通過 symbol 來定義相同的名稱，因為 Symbol 函數返回的是不同的值;
- const s1 = Symbol("identity");
- const s2 = Symbol("identity");
- // 一個人多個身份
- const person = {
- [s1]: "校長",
- [s2]: "化學老師",
- }
元祖類型：
元組類型用來表示已知數量和類型的數組，各元素的類型不必相同;
- let x : [string,number];
- x = ['Angular',5]; // 正確
- x = [5,'Angular']; // 報錯
枚舉類型：
枚舉是一個可被命名的整型常數的集合，枚舉類型為集合成員賦予有意義的名稱增強可讀性;
- // 枚舉類型默認下標是0
- enum Color { red, yellow, blue };
- let c: Color = Color.blue;
- console.log(c); // 2
- // 手動設置枚舉下標
- enum Color { red = 1, yellow = 2, blue = 3 };
- let c: Color = Color.blue;
- console.log(c); // 3
任意值類型：
任意值是 TypeScript 針對編程時類型不明確的變量使用的一種數據類型，常用于以下三種;
值可能來自于動態的內容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查;
- let x: any = 123456;
- x = 'becomes a string';
- x = false;
允許你在編譯時可選擇地包含或移除類型檢查;
- let x: any = 4;
- x.toFixed(); // 正確，并不檢查是否存在
定義儲存各種類型數據的數組時;
- let arrarList: any[] = [1,'qwe',true];
null 與 undefined 類型：
默認情況下 null 和 undefined 是所有類型的子類型。 就是說你可以把 null 和 undefined 賦值給 number 類型的變量;
然而，如果啟用 -- strictNullChecks，就可以使得 null 和 undefined 只能被賦值給 void 或本身對應的類型;
- let x: number;
- x = 1;
- x = null; // 正確
- // 啟用 --strictNullChecks
- let y: number;
- y = 1;
- y = null; // 錯誤
void 類型：
使用 void 表示沒有任何類型，例如一個函數沒有返回值，意味著返回void;
- function sayHello(): void{
- console.log('I said hello');
- }
naver 類型：
never 是其他類型(包括 null 和 undefined )的子類型，代表從不會出現的值，這意味著聲明為 never 類型的變量只能被 never 類型所賦值，在函數中通常表示為拋出異常或無法執行到終止點;
- let x: never;
- let y: number;
- x = 123; // 報錯
- y = x; // 正確
編譯 TypeScript 文件
編譯 TypeScript 文件需要安裝 TypeScript 編譯器，使用以下指令安裝并運行 ts;
- npm install typescript -g
- cd到指定目錄下
- tsc typescript_test.ts
使用 TypeScript 創建變量
由于支持 ES6 語法，創建變量方式有 var、let、const 三種;
- var name:string = 'Tom';
var 是嚴格范圍變量的舊風格。你應該盡可能避免使用，var 因為它會在較大的項目中導致問題;
- let num:number = 123;
let 是在 TypeScript 中聲明變量的默認方式。與 var 相比，let 減少了編譯時錯誤的數量并提高了代碼的可讀性;
- const arr:Array<number> = [12,43];
const 創建一個其值不能改變的常量(如果創建的是引用類型，則可以改變其內部的值)，它使用相同的范圍規則，let并有助于降低整體程序的復雜性;
TypeScript 接口
接口為使用該接口的對象定義契約或結構，接口是用關鍵字定義的 interface，它可以包含使用函數或箭頭函數的屬性和方法聲明;
- interface staffInfo {
- staffCode: number;
- staffName: string;
- getSalary: (number) => number;
- getLeaderName(number): string;
- }
TypeScript 函數重載
要在 TypeScript 重載函數，只需創建兩個名稱相同但參數/返回類型不同的函數，兩個函數必須接受相同數量的參數。這是 TypeScript 中多態性的重要組成部分，例如，你可以創建一個add函數，如果它們是數字，則將兩個參數相加，如果它們是字符串，則將它們連接起來，白話意思就是一個方法傳不同參數，獲取到不同的返回值;
- function add(a:string, b:string):string;
- function add(a:number, b:number): number;
- function add(a: any, b:any): any {
- return a + b;
- }
- add("Hello ", "Steve"); // Hello Steve
- add(10, 20); // 30
TypeScript 模塊
TypeScript 中的模塊是相關變量、函數、類和接口的集合，你可以將模塊視為包含執行任務所需的一切的容器，可以導入模塊以輕松地在項目之間共享代碼;
- module addFun {
- class Add {
- export add(x, y) {
- return x+y;
- }
- }
- }
TypeScript 類
類表示一組相關對象的共享行為、屬性和方法，例如，一個學生類 Student。
- class Student {
- stuNum: number;
- stuName: string;
- constructor(num: number, name: string) {
- this.stuName = name;
- this.stuNum = num;
- }
- }
TypeScript 與 JavaScript 比較
TypeScript 是 JavaScript 的開源語法超集，可編譯為 JavaScript，所有原始 JavaScript 庫和語法仍然有效，但 TypeScript 增加了 JavaScript 中沒有的額外語法選項和編譯器功能。TypeScript 還可以與大多數與 JavaScript 相同的技術接口，例如 Vue 和 jQuery。
