[[414624]]

TypeScript 是微軟開(kāi)發(fā)的一個(gè)開(kāi)源的編程語(yǔ)言，通過(guò)在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。

TypeScript 更具表現(xiàn)力，這意味著它的語(yǔ)法混亂更少，由于高級(jí)調(diào)試器專注于在編譯時(shí)之前捕獲邏輯錯(cuò)誤，因此調(diào)試很容易，靜態(tài)類型使 TypeScript 比 JavaScript 動(dòng)態(tài)類型更易于閱讀和結(jié)構(gòu)化，由于通用的轉(zhuǎn)譯，它可以跨平臺(tái)使用，在客戶端和服務(wù)器端項(xiàng)目中。

TypeScript 通過(guò) TypeScript 編譯器或 Babel 轉(zhuǎn)譯為 JavaScript 代碼，可運(yùn)行在任何瀏覽器，任何操作系統(tǒng)，當(dāng)前穩(wěn)定版本為 4.2.3 版本。

TypeScript 的主要特點(diǎn)是什么?

跨平臺(tái)性：

TypeScript 編譯器可以安裝在任何操作系統(tǒng)上，包括 Windows、macOS 和 Linux;

支持 ES6 特性：

TypeScript 包含計(jì)劃中的 ECMAScript 2015(ES6) 的大部分特性，例如箭頭函數(shù);

面向?qū)ο缶幊趟枷耄?/h3>

TypeScript 提供所有標(biāo)準(zhǔn)的 OOP 功能，如類、接口和模塊;

嚴(yán)格的靜態(tài)類型檢查：

TypeScript 使用靜態(tài)類型并幫助在編譯時(shí)進(jìn)行類型檢查，因此，你可以在編寫(xiě)代碼時(shí)發(fā)現(xiàn)編譯時(shí)錯(cuò)誤，而無(wú)需運(yùn)行腳本;

可選的靜態(tài)類型：

如果你習(xí)慣了 JavaScript 的動(dòng)態(tài)類型(在使用變量的時(shí)候可以根據(jù)傳值改變變量的數(shù)據(jù)類型)，TypeScript 還允許可選的靜態(tài)類型(在變量后面添加冒號(hào)+數(shù)據(jù)類型，在使用中不可以改變其數(shù)據(jù)類型，否則報(bào)錯(cuò));

DOM 操作：

您可以使用 TypeScript 來(lái)操作 DOM 添加或刪除客戶端網(wǎng)頁(yè)元素;

全局作用域：

在任何類之外定義，可以在程序中的任何地方使用;

函數(shù)/類范圍：

在函數(shù)或類中定義的變量可以在該范圍內(nèi)的任何地方使用;

局部作用域/代碼塊：

在局部作用域中定義的變量可以在該塊中的任何地方使用;

TypeScript 內(nèi)置數(shù)據(jù)類型

數(shù)字類型：

用于表示數(shù)字類型的值，TypeScript 中的所有數(shù)字都存儲(chǔ)為浮點(diǎn)值;

let decLiteral: number = 6; // 十進(jìn)制 
let hexLiteral: number = 0xf00d; // 十六進(jìn)制 
let binaryLiteral: number = 0b1010; // 二進(jìn)制 
let octalLiteral: number = 0o744; // 八進(jìn)制 

布爾類型：

一個(gè)邏輯二進(jìn)制開(kāi)關(guān)，只能包含 true 或 false;

let isTrue:boolean = true; 

字符串類型：

可以用單引號(hào)(')和雙引號(hào)(")來(lái)表示字符串類型，除此之外還支持使用模板字符串反引號(hào)(`)來(lái)定義多行文本和內(nèi)嵌表達(dá)式，使用 ${ expr } 的形式嵌入變量或表達(dá)式;

let name:string = 'Tom'; 
let city:string = 'Beijing'; 
let content:string = `他叫 ${ name } 生活在 ${ city }`; 

數(shù)組類型：

TypeScript 數(shù)組的操作類似于 JavaScript 中數(shù)組的操作，TypeScript 建議最好只為數(shù)組元素賦予一種類型的值，定義數(shù)組有兩種寫(xiě)法;

let arr: number[] = [2,3]; 
let arr: Array<number> = [2,3]; 

對(duì)象類型：

object 對(duì)象類型可以用于描述一個(gè)對(duì)象;

const people: object = { 
  name: "Tom", 
  age: 20, 
  city: 'Beijing', 
} 
console.log('他叫 ${people.name} ,他住在${people.city}'); 

symbol類型：

在 ES5 中，如果我們是不可以在對(duì)象中添加相同的屬性名稱的，但是我們也可以通過(guò) symbol 來(lái)定義相同的名稱，因?yàn)?Symbol 函數(shù)返回的是不同的值;

const s1 = Symbol("identity"); 
const s2 = Symbol("identity"); 
 
// 一個(gè)人多個(gè)身份 
const person = { 
  [s1]: "校長(zhǎng)", 
  [s2]: "化學(xué)老師", 
} 

元祖類型：

元組類型用來(lái)表示已知數(shù)量和類型的數(shù)組，各元素的類型不必相同;

let x : [string,number]; 
x = ['Angular',5]; // 正確 
x = [5,'Angular']; // 報(bào)錯(cuò) 

枚舉類型：

枚舉是一個(gè)可被命名的整型常數(shù)的集合，枚舉類型為集合成員賦予有意義的名稱增強(qiáng)可讀性;

// 枚舉類型默認(rèn)下標(biāo)是0 
enum Color { red, yellow, blue }; 
let c: Color = Color.blue; 
console.log(c); // 2 
// 手動(dòng)設(shè)置枚舉下標(biāo) 
enum Color { red = 1, yellow = 2, blue = 3 }; 
let c: Color = Color.blue; 
console.log(c); // 3 

任意值類型：

任意值是 TypeScript 針對(duì)編程時(shí)類型不明確的變量使用的一種數(shù)據(jù)類型，常用于以下三種;

值可能來(lái)自于動(dòng)態(tài)的內(nèi)容，比如來(lái)自用戶輸入或第三方代碼庫(kù)。 這種情況下，我們不希望類型檢查器對(duì)這些值進(jìn)行檢查而是直接讓它們通過(guò)編譯階段的檢查; 

let x: any = 123456; 
x = 'becomes a string'; 
x = false; 

允許你在編譯時(shí)可選擇地包含或移除類型檢查; 

let x: any = 4; 
x.toFixed(); // 正確，并不檢查是否存在 

定義儲(chǔ)存各種類型數(shù)據(jù)的數(shù)組時(shí); 

let arrarList: any[] = [1,'qwe',true]; 

null 與 undefined 類型：

默認(rèn)情況下 null 和 undefined 是所有類型的子類型。 就是說(shuō)你可以把 null 和 undefined 賦值給 number 類型的變量;

然而，如果啟用 -- strictNullChecks，就可以使得 null 和 undefined 只能被賦值給 void 或本身對(duì)應(yīng)的類型; 

let x: number; 
x = 1; 
x = null; // 正確 
 
// 啟用 --strictNullChecks 
let y: number; 
y = 1; 
y = null; // 錯(cuò)誤 

void 類型：

使用 void 表示沒(méi)有任何類型，例如一個(gè)函數(shù)沒(méi)有返回值，意味著返回void; 

function sayHello(): void{ 
  console.log('I said hello'); 
} 

naver 類型：

never 是其他類型(包括 null 和 undefined )的子類型，代表從不會(huì)出現(xiàn)的值，這意味著聲明為 never 類型的變量只能被 never 類型所賦值，在函數(shù)中通常表示為拋出異常或無(wú)法執(zhí)行到終止點(diǎn); 

let x: never; 
let y: number; 
 
x = 123; // 報(bào)錯(cuò) 
y = x; // 正確 

編譯 TypeScript 文件

編譯 TypeScript 文件需要安裝 TypeScript 編譯器，使用以下指令安裝并運(yùn)行 ts; 

npm install typescript -g 
cd到指定目錄下 
tsc typescript_test.ts 

使用 TypeScript 創(chuàng)建變量

由于支持 ES6 語(yǔ)法，創(chuàng)建變量方式有 var、let、const 三種; 

var name:string = 'Tom'; 

var 是嚴(yán)格范圍變量的舊風(fēng)格。你應(yīng)該盡可能避免使用，var 因?yàn)樗鼤?huì)在較大的項(xiàng)目中導(dǎo)致問(wèn)題; 

let num:number = 123; 

let 是在 TypeScript 中聲明變量的默認(rèn)方式。與 var 相比，let 減少了編譯時(shí)錯(cuò)誤的數(shù)量并提高了代碼的可讀性;

const arr:Array<number> = [12,43]; 

const 創(chuàng)建一個(gè)其值不能改變的常量(如果創(chuàng)建的是引用類型，則可以改變其內(nèi)部的值)，它使用相同的范圍規(guī)則，let并有助于降低整體程序的復(fù)雜性;

TypeScript 接口

接口為使用該接口的對(duì)象定義契約或結(jié)構(gòu)，接口是用關(guān)鍵字定義的 interface，它可以包含使用函數(shù)或箭頭函數(shù)的屬性和方法聲明; 

interface staffInfo { 
  staffCode: number; 
  staffName: string; 
  getSalary: (number) => number; 
  getLeaderName(number): string;  
} 

TypeScript 函數(shù)重載

要在 TypeScript 重載函數(shù)，只需創(chuàng)建兩個(gè)名稱相同但參數(shù)/返回類型不同的函數(shù)，兩個(gè)函數(shù)必須接受相同數(shù)量的參數(shù)。這是 TypeScript 中多態(tài)性的重要組成部分，例如，你可以創(chuàng)建一個(gè)add函數(shù)，如果它們是數(shù)字，則將兩個(gè)參數(shù)相加，如果它們是字符串，則將它們連接起來(lái)，白話意思就是一個(gè)方法傳不同參數(shù)，獲取到不同的返回值; 

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 中的模塊是相關(guān)變量、函數(shù)、類和接口的集合，你可以將模塊視為包含執(zhí)行任務(wù)所需的一切的容器，可以導(dǎo)入模塊以輕松地在項(xiàng)目之間共享代碼; 

module addFun { 
  class Add { 
    export add(x, y) { 
      return x+y; 
    } 
  } 
} 

TypeScript 類

類表示一組相關(guān)對(duì)象的共享行為、屬性和方法，例如，一個(gè)學(xué)生類 Student。 

class Student {     
  stuNum: number;     
  stuName: string;     
  constructor(num: number, name: string) {     
    this.stuName = name; 
    this.stuNum = num; 
  } 
} 

TypeScript 與 JavaScript 比較

TypeScript 是 JavaScript 的開(kāi)源語(yǔ)法超集，可編譯為 JavaScript，所有原始 JavaScript 庫(kù)和語(yǔ)法仍然有效，但 TypeScript 增加了 JavaScript 中沒(méi)有的額外語(yǔ)法選項(xiàng)和編譯器功能。TypeScript 還可以與大多數(shù)與 JavaScript 相同的技術(shù)接口，例如 Vue 和 jQuery。