一.TS介紹
1.1 簡介
ts是2012年由微軟開發，在js的基礎上添加了型別支持
1.2 優劣勢
優勢 ：任何位置都有代碼提示，增加效率；型別系統重構更容易；使用最新的ECMAscript語法
劣勢：和有些庫的結合并不是很完美；學習需要成本需要理解介面、泛型、型別等知識
1.3 與js區別
首先要明確，ts的存在只是為了讓編程更便捷，并不是用來取代js的，是因為js是一個弱型別沒有介面泛型而已，
二.環境安裝
首先安裝ts，直接安裝包即可
注意是全域安裝
然后安裝完后記得初始化ts
初試化完之后有一個ts的組態檔，先修改兩個東西
rootdir表示我們的輸入也就是寫的代碼所在的位置
outdir表示代碼會在此檔案輸出
2.1 js的缺陷
有這樣一段js的代碼
當我們運行會發現執行完了第一句就報錯了
原因就不用多說了，這就是js的一個缺陷
這個時候上ts
直接將原代碼放到ts里面來會發現報錯
這里提示什么錯誤用到插件error lens
第一個報錯是我們要把引數規定資料型別
然后發現我們的引數有不符合型別的
所有錯誤清除
注意關鍵步驟來了：
剛才我們定義了一個代碼所在目錄，需要把ts檔案放進去
然后 tsc -watch開啟ts檢測，一旦發現這個ts檔案變化就會有輸出檔案
可以看到我們的ts檔案已經到輸出檔案的dist目錄下，并且已經轉換成js檔案了
這個時候我們直接運行轉換出來的檔案
三.資料型別
3.1 基礎資料型別
首先加一段話
意思表示，如果當我們在src下創建了一些ts檔案有命名沖突的時候不加的話就會報錯，加上就相當于添加了一個模塊作用域不會報命名沖突的錯誤
這是ts三種基礎資料型別，數值、布爾、字串
一定要宣告型別才能夠賦值，而且宣告了什么型別就給什么值
3.2 陣列
陣列有幾種定義的方式
首先單獨定義
單獨定義還有一種方式
第二種是混合定義就是可以定義多個型別
跟第一種有點類似，然后用括號括起來中間用|隔開
最后一種是任意型別
但是并不推薦這種，因為也就失去了ts矯錯的意義
3.3 元祖
用于保存定長長度的陣列和資料型別
tuple
首先它的定義
這個時候就定長了，長度固定少一個不行，多一個不行
而且對應位置的資料型別也固定了，不能顛倒
3.4 any與void
首先any表示任意型別，當我們不清楚值的資料型別時可以用any
場景一：
當變數的值會動態改變，比如用戶的輸入時
可以看到我們這里不論是什么型別都不會報錯
場景二：
改寫現有代碼時，想要去包含或者是移除型別檢查
可以看到我們并沒有定義這個函式，但是也不會報錯，這個時候用any來移除型別檢查，但是要注意這種方式不太安全
場景三：
定義或存盤各種型別資料的陣列
像這樣一個陣列會有限制
這樣就不會了
void
某種意義上來說，void與any是相反的，因為他表示沒有任何型別
常常用于當一個函式沒有回傳值時
比如這樣一個正常函式是沒有問題的
當我加上了void來宣告后
就會報錯return這一行
洗掉后我們才可以正常執行
還有一個點就是當給一個變數宣告為void型別，那么他的值就只能為undefined和null
為null報錯是以為我們開啟了嚴格模式，需要在ts組態檔中將這一行注釋
3.5 null和undefined
他們的作用就不用多說了
首先他們也是一種資料型別要賦值給變數也要進行定義
但是要注意：在非嚴格模式下，他可以賦值給其他資料型別
3.6 never和object
never型別就是一些總是會拋出例外或者根本就不會有回傳值的函式，像這些就可以定義為never型別
object就是定義為一個物件
3.7 列舉
列舉是js標準資料型別的一個補充，可以為一組 數值賦予友好的名字
通過enum來定義
這個時候我將一個變數定義為這個型別，
他就只能為這個型別里面的別名或者說是數值
然后第一個注意點，我給他賦值數值并不會出錯，因為列舉本身就是為數值取一個好聽的別名，它的本質就是數值
而且他默認就是從0開始的
第二個注意點，雖然默認從0開始，但是我們可以手動修改他的起始值，注意雖然這里｛｝包裹，但是里面是寫為等號賦值
這個時候再去列印
如果修改的是第二個值
如果修改的各自的值
3.8 bigInt和symbol
bigint是用來彌補我們number資料型別最大只能到2^53-1的整數的缺陷
他的定義方法可以直接在后面加n或者呼叫bigint這個方法
注意這是es2020新增的型別，所以要將我們的ts轉到2020來
json檔案里面改
symbol的值是唯一的，獨一無二的
并不相等，即使里面的值都一樣但是他們都為各自的值
3.9 變數宣告與解構
ts的變數宣告解構跟js是一樣的
首先宣告也是：var、let、const
陣列解構：
第一種解構
第二種解構，將剩余的以一個陣列存盤
第三種解構，可以取到我們想要的一個位置的資料
物件解構：
3.10 型別斷言
就是手動指定一個值的型別，不再讓js判斷，我說他是什么就是什么
兩種方式
第一種方式
<>里面定義型別外面接變數名
我如果斷言為number，它不具有length，所以就會報錯
第二種方式
通過一個as相當于取別名的方式來定義
應用：
比如現在有個函式，他的引數型別為number或者string，但是number沒有length所以會報錯
我如果給她強制定義為string就不會出現錯誤
3.11 型別別名
就是給一個型別起一個新名字，里面可有多個資料，都是同一個型別
第一種：
以type開頭宣告，中間用|隔開
定義好后變數用別名來修飾，而且變數只能取定義好的資料，包括資料型別也要相同
第二種：函式
用型別別名宣告了一個函式
我要用肯定也要用一個變數，然后用型別別名系結給他，再去定義我們這個函式
它的作用就是定義好了后，這個函式就只能回傳number型別，其他型別都不行
第三種：物件
定義好之后系結給變數，我們的當前這個屬性就只能用規定好的資料型別了
四.介面
4.1 介面基本使用
介面是一系列抽象方法的宣告，是一些方法特征的集合
interface來定義，跟type很像，但是有區別的，后面會說
定義一個介面
然后我這邊要用同樣是系結給他，宣告自己的資料
函式的使用
引數采用解構賦值直接拿，然后通過定義好的介面去約束他們，再把函式定義為void型別，也就是沒有回傳值
4.2 可選屬性與只讀屬性
在我們定義介面時，某些屬性可以省略我們約束的時候可以不賦值叫做可選屬性，用？修飾
沒有修飾可選屬性，不寫的話會報錯
寫為可選
只讀屬性就是只能讀取，不能修改，readonly來修飾
沒有只讀屬性時是可以修改的
給到只讀屬性后
我們的const和readonly的區別
因為他們兩個都是不可以修改只能夠讀取
雖然作用大致一樣，但是用處不一樣，一般一般要作為變數使用就是用const來修飾，如果要作為屬性使用就用readonly
4.3 索引簽名
用于描述那些通過索引得到的型別，解決引數問題
當我們定義好介面，如果少一個引數我們可以用可選屬性來將其可要可不要
但是如果多一個引數呢？
三種方法
第一種：不推薦
可以看到我如果直接加在后面會報錯
但是我給一個物件之后再加在后面就不會報錯了
這是因為ts的檢測是淺檢測，我們直接加在后面是一層，但是中間有個物件物件里面再來一個物件，就屬于深層次了，就檢測不到了，所以這種理論上是不允許的，只是我們投機取巧，不推薦
第二種：
通過型別斷言
我們說過型別斷言，就是我自己來宣告，加上了之后就相當于脫離了ts的校驗規則，你想定義什么就定義什么沒有人管得到你了，注意這里是給這個變數型別斷言，所以只能斷言為people或者any
第三種：
索引簽名
給我們介面添加一個中括號里面props是變數名隨便取，第一個string為我們屬性名的型別定義，要注意物件屬性名會自動給你變成字串，就算你沒添加引號也是字串，后面則是規定我們值為什么型別
這樣我們也可以隨便添加任意型別的引數了
4.4 函式介面
函式的介面需要定義一個呼叫的引數的簽名以及回傳值的型別
介面與陣列
注意一下我們的介面和陣列怎么來使用，長得很像索引簽名，但其實不是，前面定義的其實是我們陣列的下標，所以只能為number型別，后面是陣列里面每一項的值型別
4.5 介面繼承
介面可以繼承介面用到另一個介面上的屬性約束 extends
單繼承：
多繼承：
用逗號隔開
4.6 介面的混合型別
就是可以將介面里面多個型別混合在一起定義，包括屬性、函式等
因為我們之前都是單獨對物件或者函式進行介面約束，那么如果要進行一個混合型別介面，以函式為例，先系結給一個函式
函式里面先定義好我們的函式，并且提示需要回傳值
添加回傳值后提示缺少定義好的兩個屬性
直接將counter型別斷言為Counter并將屬性系結上去
可以看到此時這個counter即為函式又為物件
又可以使用自己函式，又可以呼叫物件屬性
4.7 介面和型別別名的異同點
主要是兩同兩異
相同一：
都可以描述屬性或者方法
這里分別用型別別名和介面定義了兩個屬性一個方法，都沒有報錯
應用上去也沒問題
相同二：
都允許擴展
注意型別別名擴展是用&連接
介面的擴展前面有說extends來連接
不同點一：
type可以宣告基本資料型別、聯合型別、陣列等等，而介面只能宣告物件，函式也是物件
注意：這是或者的意思，比如在陣列那里有且只有第一個值，有第二個值就會報錯
不同點二：
type不能進行合并，介面可以
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531509.html
標籤：JavaScript