TypeScript學習（一）—— 數據類型

前端時間在學習TS，可是發現一直沒去使用，就忘得差很少了，因此打算作個記錄，鞏固一下。

今天來講TS中的類型。

準備

先安裝TypeScript:

npm i -g typescript
複製代碼

webStrom進行配置File -> Settings -> Languages & Frameworks -> TypeScript, 勾上勾：

修改下你的ts文件，就會在ts文件下面生成個編譯好的js：

類型

TypeScript中的類型主要分爲如下幾種：

/* 布爾類型（boolean） 數字類型（number） 字符串類型（string） 數組類型（array） 元組類型（tuple） 枚舉類型（enum） 任意類型（any） null 和 undefind void 類型 never 類型 */
複製代碼

1. boolean類型、number類型、string類型

let flag:boolean = true //定義一個類型爲boolean的變量
flag = false //正確
flag = 123 //編譯器報錯
flag = null  //編譯器不報錯
flag = undefined  //編譯器不報錯

let num:number = 123 //定義一個類型爲number的變量
num = 456 //編譯器不報錯
num = '2222' //編譯器報錯
num = NaN //編譯器不報錯
num = null //編譯器不報錯
num = undefined //編譯器不報錯

...string類型同上
複製代碼

2. array類型

// Ts裏定義數組的方式有兩種
//第一種，number爲數組內元素的類型
let arr:number[] = [1,2,3,4,5]
arr[2] = 22 //編譯器不報錯
arr[1] = 'wwww' //數組內元素只能爲number類型，編譯器報錯

//第二種，泛型定義。。
let arr1:Array<string> = ['11', '22', '33']
arr1[1] = '111' //編譯器不報錯
arr1[1] = 21 //數組內元素只能爲string類型，編譯器報錯
複製代碼

3. tuple類型

//元祖類型屬於數組的一種，能夠給每個位置指定類型
let arr:[number, string] = [1, '222'] //定義一個第一個元素爲number類型， 第二個元素爲string類型的數組
arr[0] = 2 //編譯器不報錯
arr[1] = 2 //arr[1]只能是string類型，編譯器報錯
複製代碼

4. enum類型

/* 相似於一個反數組，value會自增，提供了一個語義化的標準 enum 枚舉名{ 標識符[=整形常數], 標識符[=整形常數], 標識符[=整形常數], ...... 標識符[=整形常數], } */
enum flag {success, error};
let s:flag = flag.success
console.log(s) // ==> 0
enum flag1 {success = 2, error};
console.log(flag1.success) // => 2
console.log(flag1.error) // =>3
複製代碼

5. any類型

//任意類型，如其名字，不限類型
let item:any = 123
item = '123' //由於item是任意類型，編譯器不會報錯
let dom:any = document.querySelector('#box') //獲取dom元素進行操做
複製代碼

6. null和undefind 類型

let num:number | undefined //能夠這樣定義變量
let num1:number | null
複製代碼

7. void類型

//通常用於定義沒有返回值的方法
function Fn():void {  
    console.log(666)
}

function Fn1():number {   //編譯器報錯，該函數沒有number類型的返回值
    console.log(666)
}
function Fn2():number {   //返回number類型值，編譯器不報錯
    console.log(666)
    return 666
}
複製代碼

8. never類型

//never是其餘類型（包括null 和 undefined）的子類型，表明從不會出現的值。
//這意味着聲明never的變量只能被never類型所賦值
let a:never;
a = 123 //報錯
a = (()=>{ //a表示不會出現的類型，不報錯 throw new Error('錯誤！！！') })() 複製代碼