前言
之前對TypeScript一直處於觀望的角度,總是覺得自己工作的時候要用到再學吧,但是這幾天經歷確實給我上了一課,都0202年了,前端還不會TypeScript?受傷的是自己,於是,開幹吧!
什麼是TypeScript
TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，TypeScript 在 JavaScript 的基礎上添加了可選的靜態類型和基於類的面向對象編程。其實TypeScript就是相當於JavaScript的增強版，但是最後運行時還要編譯成JavaScript。TypeScript最大的目的是讓程序員更具創造性，提高生產力，它將極大增強JavaScript編寫應用的開發和調試環節，讓JavaScript能夠方便用於編寫大型應用和進行多人協作。
變量類型
爲了讓程序有價值，我們需要能夠處理最簡單的數據單元：數字，字符串，結構體，布爾值等。 TypeScript支持與JavaScript幾乎相同的數據類型，此外還提供了實用的枚舉類型方便我們使用。
TypeScript中的數據類型
- Boolean:布爾值
- Number:數值類型;
- string : 字符串類型;
- enum：枚舉類型
- any : 任意類型
- void：空類型
- Null ：空類型
- undefined
- Never 永不存在的值的類型
- object 對象
- Array : 數組類型
- Tuple : 元祖類型
1. Boolean
作任何業務邏輯判斷都要有布爾類型的參與，通過對與錯的判斷是最直觀的邏輯處理,boolean類型只有兩種值，true和false。
let isOk:boolean = false
console.log(isOk)//false
2. Number
和JavaScript一樣，TypeScript裏的所有數字都是浮點數。 這些浮點數的類型是 number。 除了支持十進制和十六進制字面量，TypeScript還支持ECMAScript 2015中引入的二進制和八進制字面量。
let num1:number = 123
let num2:number = 0xf00d
let num3:number = 0b1111
let num4:number = 0o744
console.log(num1,num2,num3,num4)//123 61453 15 484
3 .string
跟javascript一樣可以使用雙引號:""和單引號:'',同樣是可以使用模板字符串(``)
let pz:string = "pzeng"
let age: number = 37;
let question: string = `Hello, my name is ${ pz },i love ${age}`
console.log(question) //Hello, my name is pzeng,i love 37
4. enum
這個世界有很多值是多個並且是固定的，比如：一年的季節：春、夏、秋、冬 ，有四個結果。這種變量的結果是固定的幾個數據時，就是我們使用枚舉類型的最好時機：
//默認情況下，從0開始爲元素編號
enum Color {yello,pink,red}
let c:Color = Color.pink
console.log(c)//1
//自定義編號
enum Color {yello=1,pink,red}
let c:Color = Color.pink
console.log(c)//2
//枚舉類型提供的一個便利是你可以由枚舉的值得到它的名字
enum Color {yello=1,pink,red}
let colorName:string = Color[2]
console.log(colorName)//pink
5.any
有時候，我們會想要爲那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自於動態的內容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那麼我們可以使用 any類型來標記這些變量.其實前端寫多了有時候不自覺的就分不清類型了。這是個不好的習慣，也是前端的痛，就因爲這個原因，JavaScript也多次被人詬病說大型項目不適合用JavaScript.
var t:any =10
t='你好'
t= false
console.log(t)
6.Void
某種意義上來講,viod跟any相反,他表示沒有任何類型,當一個函數沒有返回值的時候,通常會見到其返回值的類型爲void
function warnUser(): void {
console.log("This is my warning message");
}
let unusable: void = undefined;
7.Null 和 Undefined
默認情況下null和undefined是所有類型的子類型。 就是說你可以把 null和undefined賦值給number類型的變量。
let u: undefined = undefined;
let n: null = null;
8.never
never類型表示的是那些永不存在的值的類型。 例如， never類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型； 變量也可能是 never類型，當它們被永不爲真的類型保護所約束時。
never類型是任何類型的子類型，也可以賦值給任何類型；然而，沒有類型是never的子類型或可以賦值給never類型（除了never本身之外）。 即使 any也不可以賦值給never。
// 返回never的函數必須存在無法達到的終點
function error(message: string): never {
throw new Error(message);
}
// 推斷的返回值類型爲never
function fail() {
return error("Something failed");
}
// 返回never的函數必須存在無法達到的終點
function infiniteLoop(): never {
while (true) {
}
}
9.Object
object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined之外的類型。
使用object類型，就可以更好的表示像Object.create這樣的API
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
10 數組類型
//可以在元素類型後面接上 []，表示由此類型元素組成的一個數組
let list1: number[] = [1, 2, 3]
//使用數組泛型，Array<元素類型>
let list2: Array<number> = [1, 2, 3]
11 元組 Tuple
元組類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。 比如，你可以定義一對值分別爲 string和number類型的元組。
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
console.log(x[0].substr(1)); // ello
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'