在上一節《第三節：快速編譯TypeScript，提高開發效率》，我們學習了如何結合IDE快速地幫助我們編譯TypeScript，有了這個輔助功能，我們的開發效率就大大提高。

?

接下來，我們就開始學習TypeScript的各種特性。說起數據類型，我們知道，javaScript 的數據類型分為了原始數據類型和對象類型，原始數據類型又叫基本類型，對象類型又叫引用類型。

?

javaScript?原始數據類型包括了：布爾值，數值，字符串，null，undefined。TypeScript同樣支持這5種原始數據類型，此外還提供了其他很實用的類型供我們使用，我們在后面的章節一一介紹。

?

這一節，我們就來看看這5個原始數據類型在TypeScript中的用法。

?

1.布爾值類型

布爾值最常見，也最為簡單。在TypeScript 中，使用 ?:boolean?定義布爾值類型：

?

?let isTrue:boolean = true;

?

也許你注意到了，聲明定義一個變量的同時，需要指定這個變量的類型，這一點跟javaScript不一樣，在javaScript中是不需要預先定義一個類型的，你可以直接給變量賦任何類型的值，變量的類型會根據值的數據類型而改變。

?

既然，上面代碼中的變量?isTrue?被指定為了布爾值類型了，好奇心滿滿的你，硬是想給它賦一個其他類型的值，看看會發生什么？

//聲明定義一個布爾值類型的變量
let isTrue:boolean = true;

//賦一個數值類型的值，會怎樣呢？
isTrue = 5;

?

還沒等你進行編譯，webstorm就會提示你：

(webstorm截圖)

提示：Type '5' is not assignable to type'boolean'

webstorm告訴我們：不能給布爾類型的變量分配一個數值5。

這樣，我們就知道了：在TypeScript中，變量指定類型后，后續只能給它賦指定類型的值，不能賦其他類型的值。

?

2.數值類型

我們使用用?:number 來定義一個數值類型的變量，除了支持十進制和十六進制字面量，Typescript還支持ECMAScript6中引入的二進制和八進制字面量。

?

//十進制
let data1:number = 8;

//十六進制
let data2:number = 0xf00d;

//ES6的二進制
let data3:number =? 0b1010;

//ES6的八進制
let data4:number = 0o744;

?

除了聲明變量需要指定其類型為number類型以外，其他的跟javaScript的用法一樣。再次提醒，一旦變了被定義為數值number類型，就不能賦其他類型的值。

?

3.字符串類型

跟javaScript一樣，字符串類型的值支持用雙引號?""?或者單引號?''?來表示。很簡單，我們來定義一個字符串的變量：

//定義字符串變量

//雙引號表示
let str1:string = "hello boy";

//單引號表示
let str2:string = 'hello girl';

?

記得我們在《趣味ES6》系列教程中介紹的字符串新特性：字符串模板，它允許我們用反引號?``?來表示字符串，同時可以嵌入?${}?來動態生成字符串變量。在TypeScript中，同樣支持這種寫法：

?

//模板字符串的運用
let myName:string = `前端君`;

let say:string = `大家好，我是${myName}`;

//結果：大家好，我是前端君

?

?

4.Null類型

在TypeScript中，我們使用?:null?來定義一個變量。

//定義一個null類型的值
let n:null = null;

?

注意：null 類型的變量只能被賦值為 null。

?

5.Undefined類型

在TypeScript中，我們使用?:undefined來定義一個變量。

//定義一個undefined類型的值
let u:undefined = undefined;

?

注意：undefined 類型的變量只能被賦值為 undefined。

6.空值類型

在 TypeScirpt 中，我們還可以用?:void?表示空值，它一般會用于表示沒有任何返回值的函數。

?

?//沒有返回值的函數say
?function say(): void {
??? alert('hello 前端君');
?}

?

需要注意的是，在 TypeScirpt 中，默認情況下Undefined 和 Null 是所有類型的子類型。也就是這兩種類型的值，可以賦值給其他類型。

?

?//聲明定義一個數值類型的變量
?let num:number = 10;

?//賦值undefined
?num = undefined;

?//賦值null
?num = null;

?//報錯，不允許賦字符串類型的值
?num = 'hello';

?

前面提過，一旦變量指定了類型，就不能賦其他類型的值，但由于Undefined和Null類型是所有類型的子類型，所以以上的案例不會報錯。但最后一行代碼，由于給變量賦字符串類型的值，是不允許的，所以報錯了。

本節小結

掌握5種原始數據類型在TypeScript中的用法，理解Null和Undefined兩種類型的特殊之處。

了解2種原始數據類型后，下一節，我們來學習TypeScript中的其他十分實用的數據類型。

熱門文章

擴展閱讀

?原創教程：《ECMAScript 6 教程》

?原創教程：《Vue2.0基礎教程》

?原創教程：《Vue2.0進階教程》

?附加習題：《ECMAScript 6 教程》的 2套

?附加習題：《Vue2.0基礎教程》的 1 套

聊聊職場

?職場感悟：混口飯吃，談不上喜歡

?感到迷茫：我很努力，但依然很迷茫

?薪資待遇：那么點工資，能招到人嗎？

?搞笑黑話：互聯網公司黑話，搞笑到爆

資源推薦

其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信:?abc15689893?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。

?

總結

以上是生活随笔為你收集整理的第四节：5种数据类型在TypeScript中的运用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。