【TS】快速上手(二)型別宣告
theme: fancy highlight: tomorrow-night-blue
嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號:
yk2012yk2012
,微信公眾號:ykyk2012
]
「這是我參與11月更文挑戰的第25天,活動詳情檢視:2021最後一次更文挑戰」
今天來介紹typescript的型別系統,主要是學習一些語法
參考連結:
- 官網:http://www.typescriptlang.org/
- 中文網:http://www.tslang.cn/ (貌似很久沒維護了)
- 掘金小冊: http://juejin.cn/book/6844733813021491207
- 書籍:《深入理解TypeScript》 http://jkchao.github.io/typescript-book-chinese/
- B站尚矽谷影片:http://www.bilibili.com/video/BV1Xy4y1v7S2
1. 起步
- 型別宣告是TS非常重要的一個特點
- 通過型別宣告可以指定TS中變數(引數、形參)的型別
- 指定型別後,當為變數賦值時,TS編譯器會自動檢查值是否符合型別宣告,符合則賦值,否則報錯
- 簡而言之,型別宣告給變數設定了型別,使得變數只能儲存某種型別的值
我們先來看看,TypeScript給變數指定型別的語法(型別註解)是什麼
```ts // 宣告一個變數 let 變數: 型別
// 宣告一個變數並給其賦值 let 變數: 型別 = 值
// 宣告一個函式 function yk(引數: 引數型別): 函式返回值型別{ //... } ``` 這裡我們可以看到,就是在變數後面就一個冒號,然後標識其型別就可以了
2. 型別
下面我們就來介紹介紹,TypeScript中到底有哪些型別
學過js你認識的型別:boolean
、number
、string
、undefined
、null
、symbol
、bigint
、object
你可能不認識的型別:void
、any
、unknown
、never
我們後面會詳細的介紹這些你可能不認識的型別
## 2.1 變數
如果我們在宣告變數指定型別後,之後如果給變數賦值為其他型別的值,編輯器會報錯,如圖所示
ts
let n: number = 1
n = 3
n = '1' // 編輯器報錯,不能將字串賦值給number型別的變數
2.2 自動型別判斷
- TS擁有自動的型別判斷機制
- 當對變數的宣告和賦值是同時進行的,TS編譯器會自動判斷變數的型別
- 所以如果你的變數的宣告和賦值時同時進行的,可以省略掉型別宣告
那都可以省略了,還要自己寫型別幹嘛呢? 事實上,顯式的寫型別更有優勢的地方是在函式定義的時候
2.3 函式
我們先回顧下用js宣告一個函式的特點:js中的函式是不考慮引數的型別和個數的
```js function sum(a, b){ return a + b }
console.log(sum(1, 2)) // 3
console.log(sum(1, '2')) // '12' ```
而用ts定義
```ts function sum(a: number, b: number): number{ return a + b }
console.log(sum(1, 2)) // 3 ```
引數數量也有限制
2.4 型別詳解
基本型別我們就不詳細談了,我們來說說TS中一些特殊的型別
void
相信熟悉Java或者C的同學應該對void
也不會陌生,當函式沒有返回值的時候,定義函式的返回值型別就是void
其實我們知道,在JavaScript中,如果定義一個函式不寫返回值,那麼它預設是返回 undefined
的~
什麼都不返回
js
function fn(): void {
}
只寫一個return
js
function fn(): void {
return
}
返回一個undefined
js
function fn(): void {
return undefined
}
我們返回一個null
也是可以的
js
function fn(): void {
return null
}
除了以上的幾種情況,其他情況都是不行的
也就是說只有null
和undefined
可以賦給void
any
any
表示的是任意型別,一個變數設定型別為 any
後,相當於對該變數關閉了TS的型別檢測。
隱式any
:如果只宣告變數不指定型別也不給變數賦值,變數就是any
型別的
當把any
型別的變數可以賦值給其他型別的變數,不會報錯
```ts let a let b: any a = 1 a = '1' b = '1' b = 1
let c:string = '123' c = b ```
any
型別是多人協作專案的大忌,很可能把Typescript變成AnyScript,通常在不得已的情況下,不應該首先考慮使用此型別。
unknown
開發的時候有些變數就是事先不知道的型別怎麼辦呢?可以使用unknown
unknown
與any
的區別就是,將unknown
型別變數賦值給其他任意型別的變數時,會報錯
可以這樣理解:unknown
型別的變數就是型別安全的any
,不能直接賦值給其他型別的變數
需要在賦值之前做好型別判斷 (這叫縮小類型範圍)
ts
if (typeof b === 'string') {
c = b
}
或者這樣寫 【型別斷言】(相當於告訴解析器b就是一個string型別的變數)
ts
c = b as string
或
ts
c = <string>b
never
never
表示永遠不會返回結果
js
function fn(): never{
throw new Error('報錯了!')
}
物件
一般來說,我們對於物件的型別檢查一般是檢查物件中有哪些屬性,屬性是什麼型別。
可以用{}
來指定物件中可以包含哪些屬性 語法:{屬性名: 屬性型別, ...}
屬性多了少了都不行
可選屬性,在屬性名後面加一個 ?
ts
let obj: {name: string, age?: number}
obj = {name: 'yk', age: 18}
obj = {name: 'yk'}
如果後續屬性不確定叫什麼名字,也不確定是什麼型別,那麼可以這樣寫[propName: string]: unknown
```ts // 定義物件結構 let obj: { name: string, [propName: string]: unknown }
obj = {name: 'yk', age: 18, gender: 'male'} ```
函式
因為function
是關鍵字,所有這裡用Function
來宣告函式
js
let fn: Function
和物件一樣,我們一般會限制函式有幾個引數,引數的型別,返回值的型別,所以就可以以一種類似箭頭函式的方式來宣告一個函式型別的變數
ts
// 定義函式結構
let fn: (a: number, b: number) => number
陣列
比較常用的就是這種方式: 在元素型別後面接上 []
:
ts
let arr: number[] = [1, 2, 3]
let arr2: string[] = ['y', 'k']
還有一種是使用泛型:
ts
let list: Array<number> = [1, 2, 3]
let list2: Array<string> = ['y', 'k']
元組 Tuple
元組是TS新出的型別,表示固定長度的array
元組中包含的元素,必須與宣告的型別一致,而且不能多、不能少,甚至順序都不能不一樣
字面量
也可以使用字面量去指定變數的型別,這相當於給他設定成了一個常量
js
let a: 10
a = 10
2.5 聯合型別
可以給一個變數定義一個聯合型別,型別名之間用 |
隔開
這個時候,字面量型別就有用了
ts
let gender : "male" | "female"
此時gender
只能被賦值成兩個值
2.6 類型別名
這個時候,如果一個型別的字面量型別選擇過多,重複編寫就比較麻煩,這就可以使用類型別名
```ts type myType = 1 | 2 | 3 | 4 | 5 let i: myType let j: myType let k: myType
k = 2 ```
2.7 總結
3. 型別斷言
有些情況下,變數的型別對於我們來說是很明確,但是TS編譯器卻並不清楚,此時,可以通過型別斷言來告訴編譯器變數的型別,斷言有兩種形式:
第一種
ts
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
第二種
ts
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
最後,歡迎關注我的專欄,和YK菌做好朋友
- 從校園到職場 | YK菌的2022年中總結
- 【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
- 【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
- 2022屆秋招,從被拒到上岸 | 談談YK菌在2021年的經歷與收穫
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符