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

創(chuàng)新互聯(lián)專注于分宜網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供分宜營銷型網(wǎng)站建設(shè)，分宜網(wǎng)站制作、分宜網(wǎng)頁設(shè)計(jì)、分宜網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造分宜網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供分宜網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

跨平臺性：

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)行類型檢查，因此，你可以在編寫代碼時(shí)發(fā)現(xiàn)編譯時(shí)錯(cuò)誤，而無需運(yùn)行腳本;

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

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

DOM 操作：

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

全局作用域：

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

函數(shù)/類范圍：

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

局部作用域/代碼塊：

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

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

數(shù)字類型：

用于表示數(shù)字類型的值，TypeScript 中的所有數(shù)字都存儲為浮點(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)制開關(guān)，只能包含 true 或 false;

 
 
 

  
  
  
let isTrue:boolean = true;
 
 
 

字符串類型：

可以用單引號(')和雙引號(")來表示字符串類型，除此之外還支持使用模板字符串反引號(`)來定義多行文本和內(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ù)組有兩種寫法;

 
 
 

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

對象類型：

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

 
 
 

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

symbol類型：

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

 
 
 

  
  
  
const s1 = Symbol("identity");
  
  
  
const s2 = Symbol("identity");
  
  
  

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

元祖類型：

元組類型用來表示已知數(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 針對編程時(shí)類型不明確的變量使用的一種數(shù)據(jù)類型，常用于以下三種;

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

 
 
 

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

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

 
 
 

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

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

 
 
 

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

null 與 undefined 類型：

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

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

 
 
 

  
  
  
let x: number;
  
  
  
x = 1;
  
  
  
x = null; // 正確
  
  
  

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

void 類型：

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

 
 
 

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

naver 類型：

never 是其他類型(包括 null 和 undefined )的子類型，代表從不會出現(xiàn)的值，這意味著聲明為 never 類型的變量只能被 never 類型所賦值，在函數(shù)中通常表示為拋出異?；驘o法執(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 語法，創(chuàng)建變量方式有 var、let、const 三種;

 
 
 

  
  
  
var name:string = 'Tom';
 
 
 

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

 
 
 

  
  
  
let num:number = 123;
 
 
 

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

 
 
 

  
  
  
const arr:Array = [12,43];
 
 
 

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

TypeScript 接口

接口為使用該接口的對象定義契約或結(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ù)相加，如果它們是字符串，則將它們連接起來，白話意思就是一個(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)對象的共享行為、屬性和方法，例如，一個(gè)學(xué)生類 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 中沒有的額外語法選項(xiàng)和編譯器功能。TypeScript 還可以與大多數(shù)與 JavaScript 相同的技術(shù)接口，例如 Vue 和 jQuery。

網(wǎng)頁題目：一文看懂|關(guān)于TypeScript總結(jié)
分享網(wǎng)址：http://uogjgqi.cn/article/dpjposj.html