TypeScript學習（一）—— 資料型別

conqorld發表於2019-04-23
TypeScript資料型別

前端時間在學習TS，但是發現一直沒去使用，就忘得差不多了，所以打算做個記錄，鞏固一下。

今天來說TS中的型別。

準備

先安裝TypeScript:

npm i -g typescript
複製程式碼

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

TypeScript學習（一）—— 資料型別
修改下你的ts檔案，就會在ts檔案下面生成個編譯好的js：

TypeScript學習（一）—— 資料型別

型別

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型別同上
複製程式碼
  1. 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型別，編譯器報錯
複製程式碼
  1. tuple型別
//元祖型別屬於陣列的一種，可以給每一個位置指定型別
let arr:[number, string] = [1, '222'] //定義一個第一個元素為number型別， 第二個元素為string型別的陣列
arr[0] = 2 //編譯器不報錯
arr[1] = 2 //arr[1]只能是string型別，編譯器報錯
複製程式碼
  1. 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
複製程式碼
  1. any型別
//任意型別，如其名字，不限型別
let item:any = 123
item = '123' //因為item是任意型別，編譯器不會報錯
let dom:any = document.querySelector('#box') //獲取dom元素進行操作
複製程式碼
  1. null和undefind 型別
let num:number | undefined //可以這樣定義變數
let num1:number | null
複製程式碼
  1. void型別
//一般用於定義沒有返回值的方法
function Fn():void {  
    console.log(666)
}

function Fn1():number {   //編譯器報錯，該函式沒有number型別的返回值
    console.log(666)
}
function Fn2():number {   //返回number型別值，編譯器不報錯
    console.log(666)
    return 666
}
複製程式碼
  1. never型別
//never是其他型別（包括null 和 undefined）的子型別，代表從不會出現的值。
//這意味著宣告never的變數只能被never型別所賦值
let a:never;
a = 123 //報錯
a = (()=>{      //a表示不會出現的型別，不報錯
    throw new Error('錯誤！！！')
})()
複製程式碼

相關文章