前言：

自學第一天，什么是TS ，為什么要用 TS

目前成都創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、潼南網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

TS 全程Typed JavaScript at Any Scale解釋起來就是添加了類型系統(tǒng)的 JavaScript， 是 JavaScript 的一個超集

讓 JS 從動態(tài)類型的語言，變成了一個靜態(tài)類型的語言，給變量賦予了類型

好，到這里有同學就會問了，什么是動態(tài)類型，什么是靜態(tài)類型，啥是給變量賦予類型？讓我們來看下邊這一個栗子：

let a ;
a = "a";
a = 10;

我們先來看第三步，10 是有類型的吧，類型是number，第二步也同理，此時回過頭來，我們再看第一步，a 是什么類型？

a 在第一步的時候，沒有類型， 就是一個變量

這就是 JS 中的動態(tài)類型，a 什么都可以存放，TS 就不同 你 let 了一個 String 類型的 a ，你就只能存放String類型

PS：擴展

有的同學就會說了，這樣動態(tài)類型怎么了，很方便啊，啥都能放不好嗎？

對，是很方便，靈活，但卻是一把雙刃劍，我們舉個栗子：

funtion fun(a,b){
.....
}

我們給 fun 傳了倆參數(shù)一個 a，一個 b 這時候 a 和 b 有類型嗎，也沒有類型

問題這就來了

假如這時候我要算一個加法，就是想要 a 和 b 加一塊的數(shù)值，按理來說我們做加法，傳的時候就該傳數(shù)字了，但 JS 這一塊你愛傳傳啥，我不管，隨便你傳

如果這時 a 和 b 這倆值又在別處 經(jīng)歷了其他運算，這時候 JS 會把這個錯誤埋起來，我不立刻報錯

假如我們的這個運算是在第三行寫的，他不立刻報錯可能在三千行，三萬行在報錯，那維護成本，誰找錯誰知道...

最后上圖：

總結(jié)一下上圖的內(nèi)容，TS 是以 JS 為基礎(chǔ)搭建的語言，是一個 JS 的超集。

可以在任何支持 JS 的平臺中執(zhí)行，也就是說 TS 完全兼容 JS

不能被 JS 解析器直接執(zhí)行，TS 不能直接被瀏覽器識別需要編譯成 JS

TS 擴展了 JS ，但不能取代 JS

開發(fā)環(huán)境：

好了介紹了這么多，大家都對 TS 有了一個基本的概念了吧，現(xiàn)在我們第一天的正式學習

首先要想寫 TS 我們第一件事就是要搭建一個 TS 的開發(fā)環(huán)境，用 Node.js 來解析 TS

1. 下載 Node.js

地址 ：http://nodejs.cn/download/

2. 安裝 Node.js

3. 使用 npm 全局安裝 TypeScript ：

npm install -g typescript

安裝完之后輸入 tsc 出一堆 不報錯就代表安裝完成了 接下來讓我們開始寫吧

首先我們在創(chuàng)建一個后綴名為 ts 的文件，然后隨便用什么東西打開寫一段 js 代碼 因為 ts 是完全兼容 js 的

所以我們這里就寫一個簡單的 console

ts 文件是不能被網(wǎng)頁識別的 這時候就要進行編譯了

基本類型聲明：

我們都知道 JavaScript 的類型分為兩種：一種是原始數(shù)據(jù)類型（Primitive data types）另一種是對象類型（Object types）

現(xiàn)在我們來看原始數(shù)據(jù)類型，也就是布爾值，數(shù)值，字符串，null，nudefined 在 TS 中如何聲明

如圖，let a ：number 之后 ，在以后的使用過程中 a的值 只能是數(shù)字，如果賦值字符串的話，會明確的告訴你錯誤信息

當然，我們也可以直接這樣聲明并賦值：

let a ： number = 10 ;

但這種語法在實際我們寫 TS 過程中是不常用的，TS的變量聲明和賦值是同時進行的，TS可以自動對變量進行類型檢測

類型聲明也可以用于函數(shù)上邊

JS 中的函數(shù)是不考慮參數(shù)的類型和個數(shù)的

TS 中

當然 TS 相對嚴格你傳多傳少也是會報錯的

你也可以給函數(shù)的返回值添加類型，比如

其他基本類型：

類型	例子	描述
number	1, -33, 2.5	任意數(shù)字
string	'hi', "hi",hi	任意字符串
boolean	true、false	布爾值true或false
字面量	其本身	限制變量的值就是該字面量的值
any	*	任意類型
unknown	*	類型安全的any
void	空值（undefined）	沒有值（或undefined）
never	沒有值	不能是任何值
object	{name:'孫悟空'}	任意的JS對象
array	[1,2,3]	任意JS數(shù)組
tuple	[4,5]	元組，TS新增類型，固定長度數(shù)組
enum	enum{A, B}	枚舉，TS中新增類型

上邊我們演示了前三個，接下來我們來看后邊

字面量

什么是字面量，廢話不多說直接上圖

此時的 a 只能是 數(shù)字 10 ，當然這種是不常用的，我們一般都這樣使用，取一個字面量的范圍，我也叫這種為（聯(lián)合類型）

當然聯(lián)合類型不只用于字符串，我們也可這樣

any

any的意思就是隨便，愛啥啥

注意的一點是，一個變量設(shè)置為 any 后（顯示的 any ），就相當于該對象關(guān)閉了 TS 的類型檢測，使用 TS 時候不建議使用 any

當然這還不最可怕的一點，最可怕的是

此時的 d 類型 還是 any 。所以聲明變量如果不指定類型，則 TS 解析器會自動判斷變量的類型為 any （隱式的 any ）

雖然不建議使用，但代碼是死的，人是活的，因為 JS 是靈活的，在一些開發(fā)的過程中，你就是不知道那個值是什么，或者說是不確定，這時我們可以用any或unknown

unknown

字面意思很明顯，unknown --> 我不知道 ，也是表示未知類型的值

這時就有人問了，誒六扇老師，這和 any 一樣啊，沒什么區(qū)別啊

別急，看圖，區(qū)別這就來了

我們來看，變量 s 是 string 類型，而 變量 d 是 any 值是 字符串10 卻成功賦值沒有報錯，也就是說這玩意不止霍霍自己，還霍霍別人

而 unknown 就不一樣了

unknown 實際上就是一個類型安全的 any ，unknown 類型的變量，不能直接賦值給其他變量

這會又會有人問了，六扇老師，我就想讓 unknown 賦值給 s 怎么辦？

第一種方法，在前邊加上一個類型判斷

用typeof判斷 e 是不是 string 是的話 賦值

方法二，在 TS 里面有一個叫類型斷言，先別管什么意思，我們直接看圖

空值（Void）

JS里面是沒有Void的概念， 在 TypeScript 中，可以用Void表示沒有任何返回值的函數(shù)

上文我們也說了，我們也可以給函數(shù)設(shè)置返回值的類型，在某些情況下我們寫的函數(shù)是沒有返回值的，此時就用到了 Void

never

和空不一樣，其實沒有返回值，也是一種返回，never是表示永遠不會返回結(jié)果

在我們寫代碼的時候，有一種函數(shù)是用來處理報錯，不會返回直接報錯，就可以用never

不常使用，了解就行

復雜的類型，object

我們可以跟上邊設(shè)置類型一樣，也可給 a 設(shè)置一個object類型，但這種不常用，通常我們都直接給后邊加{ }來設(shè)置類型

{ } 也可以用來指定對象可以包含哪些屬性，比如這時的 b 只能給它賦值 對象且里面帶有 name 是 string 類型的，多一個不行，少了也不行

那六扇老師，我就想添加屬性怎么辦？

看下圖

在屬性名后邊加上 ？代表可選屬性，就是有沒有都行的屬性，可加，可不加

效果是達到了，但好麻煩啊，六扇老師我就想 name 是固定值，后邊不管，愛怎么加怎么加行不？

好，這位同學很會問問題，看完下圖之后叉出去

[propName:string] 表示 我這個屬性是字符串類型，propName 不是固定的，可以隨便寫，比如放個 xxx 也是行得通的

：any 表示任意類型

那回過頭再看代碼，這段代碼的意思就是除了 name 是 字符串類型以外，后邊其他的我不管，隨便

其實和前邊提到的字面量差不多，都是給一個限制

還有一種寫法是設(shè)置函數(shù)結(jié)構(gòu)的類型聲明：

數(shù)組

和對象一樣，我們不是要什么對象，而是要存放什么類型的數(shù)組

還有一種語法，在后邊加Array<string>

以上就是我們 JS 里面的數(shù)據(jù)類型，下邊我們來講倆不一樣的TS 中新增的類型

tuple（元組）

什么意思呢，就是固定長度的數(shù)組

當數(shù)組里面的值是固定的時候，用元組是最好的選擇，性能上會強一點

enum 枚舉

在我們存儲數(shù)據(jù)的時候，我們盡可能的希望數(shù)據(jù)小，像性別這種，除了男或者就是女這種值我們可以用 0 或 1 代替，但數(shù)據(jù)確實笑了，方便了，麻煩來了

這個值是我們定義的，我們知道，但別人不知道啊，這時就要用到enum(枚舉)定義一個枚舉類

我們enum了一個Gender里面Male 表示男，F(xiàn)emale 表示女，寫不寫 0 或者 1 沒區(qū)別，因為判斷的時候，就用 j 里面的 gender 是否等于 Gender 里面的值

就是把我們的一些固定選項都給列出來，單獨放一個類里面，然后使用

擴展

類型別名：

假如我們需要倆個變量 ，他們倆的類型是一樣的，特別長

以上就是我們常見的類型，所以一定要反復的去看，去練熟

好了，想了解更多有趣知識那就關(guān)注六扇老師抖音號吧

抖音搜索六扇有伊人或者 直接點擊

個人博客鏈接：http://blog.qianbaiyv.cn/get/my/blog/details/%40qq.com/148

轉(zhuǎn)載請標明

分享名稱：自學 TypeScript 第一天 環(huán)境開發(fā)配置 及 TS 基本類型聲明
文章鏈接：http://chinadenli.net/article20/dsdecjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、自適應(yīng)網(wǎng)站、小程序開發(fā)、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)