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

?

接下來(lái)，我們就開始學(xué)習(xí)TypeScript的各種特性。說(shuō)起數(shù)據(jù)類型，我們知道，javaScript 的數(shù)據(jù)類型分為了原始數(shù)據(jù)類型和對(duì)象類型，原始數(shù)據(jù)類型又叫基本類型，對(duì)象類型又叫引用類型。

?

javaScript?原始數(shù)據(jù)類型包括了：布爾值，數(shù)值，字符串，null，undefined。TypeScript同樣支持這5種原始數(shù)據(jù)類型，此外還提供了其他很實(shí)用的類型供我們使用，我們?cè)诤竺娴恼鹿?jié)一一介紹。

?

這一節(jié)，我們就來(lái)看看這5個(gè)原始數(shù)據(jù)類型在TypeScript中的用法。

?

1.布爾值類型

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

?

?let isTrue:boolean = true;

?

也許你注意到了，聲明定義一個(gè)變量的同時(shí)，需要指定這個(gè)變量的類型，這一點(diǎn)跟javaScript不一樣，在javaScript中是不需要預(yù)先定義一個(gè)類型的，你可以直接給變量賦任何類型的值，變量的類型會(huì)根據(jù)值的數(shù)據(jù)類型而改變。

?

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

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

//賦一個(gè)數(shù)值類型的值，會(huì)怎樣呢？
isTrue = 5;

?

還沒(méi)等你進(jìn)行編譯，webstorm就會(huì)提示你：

(webstorm截圖)

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

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

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

?

2.數(shù)值類型

我們使用用?:number 來(lái)定義一個(gè)數(shù)值類型的變量，除了支持十進(jìn)制和十六進(jìn)制字面量，Typescript還支持ECMAScript6中引入的二進(jìn)制和八進(jìn)制字面量。

?

//十進(jìn)制
let data1:number = 8;

//十六進(jìn)制
let data2:number = 0xf00d;

//ES6的二進(jìn)制
let data3:number =? 0b1010;

//ES6的八進(jìn)制
let data4:number = 0o744;

?

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

?

3.字符串類型

跟javaScript一樣，字符串類型的值支持用雙引號(hào)?""?或者單引號(hào)?''?來(lái)表示。很簡(jiǎn)單，我們來(lái)定義一個(gè)字符串的變量：

//定義字符串變量

//雙引號(hào)表示
let str1:string = "hello boy";

//單引號(hào)表示
let str2:string = 'hello girl';

?

記得我們?cè)凇度の禘S6》系列教程中介紹的字符串新特性：字符串模板，它允許我們用反引號(hào)?``?來(lái)表示字符串，同時(shí)可以嵌入?${}?來(lái)動(dòng)態(tài)生成字符串變量。在TypeScript中，同樣支持這種寫法：

?

//模板字符串的運(yùn)用
let myName:string = `前端君`;

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

//結(jié)果：大家好，我是前端君

?

?

4.Null類型

在TypeScript中，我們使用?:null?來(lái)定義一個(gè)變量。

//定義一個(gè)null類型的值
let n:null = null;

?

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

?

5.Undefined類型

在TypeScript中，我們使用?:undefined來(lái)定義一個(gè)變量。

//定義一個(gè)undefined類型的值
let u:undefined = undefined;

?

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

6.空值類型

在 TypeScirpt 中，我們還可以用?:void?表示空值，它一般會(huì)用于表示沒(méi)有任何返回值的函數(shù)。

?

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

?

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

?

?//聲明定義一個(gè)數(shù)值類型的變量
?let num:number = 10;

?//賦值undefined
?num = undefined;

?//賦值null
?num = null;

?//報(bào)錯(cuò)，不允許賦字符串類型的值
?num = 'hello';

?

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

本節(jié)小結(jié)

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

了解2種原始數(shù)據(jù)類型后，下一節(jié)，我們來(lái)學(xué)習(xí)TypeScript中的其他十分實(shí)用的數(shù)據(jù)類型。

熱門文章

擴(kuò)展閱讀

?原創(chuàng)教程：《ECMAScript 6 教程》

?原創(chuàng)教程：《Vue2.0基礎(chǔ)教程》

?原創(chuàng)教程：《Vue2.0進(jìn)階教程》

?附加習(xí)題：《ECMAScript 6 教程》的 2套

?附加習(xí)題：《Vue2.0基礎(chǔ)教程》的 1 套

聊聊職場(chǎng)

?職場(chǎng)感悟：混口飯吃，談不上喜歡

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

?薪資待遇：那么點(diǎn)工資，能招到人嗎？

?搞笑黑話：互聯(lián)網(wǎng)公司黑話，搞笑到爆

資源推薦

其實(shí)學(xué)好技術(shù)并不難，架構(gòu)師免費(fèi)分享全網(wǎng)全套最新web前端、JavaScript、HTML5、PHP、數(shù)據(jù)庫(kù)……等視頻資料！

[總價(jià)值超3萬(wàn)！]年薪35萬(wàn)以上的大牛幾乎都看了！

加微信:?abc15689893?免費(fèi)領(lǐng)取，由于領(lǐng)取的朋友比較多，所以加微信時(shí)一定要備注：555，否則很難通過(guò)。

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。