一篇了解編程語言 TypeScript
TypeScript 是微軟開發(fā)的一個(gè)開源的編程語言,通過在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。
TypeScript 更具表現(xiàn)力,這意味著它的語法混亂更少,由于高級(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 通過 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ū)ο缶幊趟枷耄?/strong>
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)類型(在變量后面添加冒號(hào)+數(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ù)字都存儲(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)制開關(guān),只能包含 true 或 false;
- let isTrue:boolean = true;
字符串類型:
可以用單引號(hào)(')和雙引號(hào)(")來表示字符串類型,除此之外還支持使用模板字符串反引號(hào)(`)來定義多行文本和內(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<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ì)象中添加相同的屬性名稱的,但是我們也可以通過 symbol 來定義相同的名稱,因?yàn)?Symbol 函數(shù)返回的是不同的值;
- const s1 = Symbol("identity");
- const s2 = Symbol("identity");
- // 一個(gè)人多個(gè)身份
- const person = {
- [s1]: "校長(zhǎng)",
- [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 針對(duì)編程時(shí)類型不明確的變量使用的一種數(shù)據(jù)類型,常用于以下三種;
值可能來自于動(dòng)態(tài)的內(nèi)容,比如來自用戶輸入或第三方代碼庫。 這種情況下,我們不希望類型檢查器對(duì)這些值進(jìn)行檢查而是直接讓它們通過編譯階段的檢查;
- 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];
默認(rèn)情況下 null 和 undefined 是所有類型的子類型。 就是說你可以把 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 表示沒有任何類型,例如一個(gè)函數(shù)沒有返回值,意味著返回void;
- function sayHello(): void{
- console.log('I said hello');
- }
naver 類型:
never 是其他類型(包括 null 和 undefined )的子類型,代表從不會(huì)出現(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)樗鼤?huì)在較大的項(xiàng)目中導(dǎo)致問題;
- 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ù)相加,如果它們是字符串,則將它們連接起來,白話意思就是一個(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 的開源語法超集,可編譯為 JavaScript,所有原始 JavaScript 庫和語法仍然有效,但 TypeScript 增加了 JavaScript 中沒有的額外語法選項(xiàng)和編譯器功能。TypeScript 還可以與大多數(shù)與 JavaScript 相同的技術(shù)接口,例如 Vue 和 jQuery;