TypeScript基礎型別介紹
目錄
- 1.基礎型別
- 2.物件型別
- 2.1陣列
- 2.2元組
- 2.3物件
- 3.型別推斷
- 3.1型別聯合中的型別推斷
- 3.2上下文型別
- 4.型別斷言
TS 的靜態型別可以人為的分為兩類：
基礎型別：像布林值(boolean)、數字(number)、字串(string)、Any(任意型別)、Void(無型別)、Null、 Undefined、Never(無值型別)
物件型別：像陣列、函式、物件、列舉、元組。
1.基礎型別
TS的型別定義主要通過以下示例程式碼中演示的方式進行定義：
;(function () {
/*
* 在 TS 中可以通過 let 變數名: 資料型別 = 變數值值得方式定義資料型別(型別註解)
* 也可以在定義的時候不指定資料型別，TS 自身會推斷該資料型別
*/
// 布林型
let boo: boolean = false // 賦值非布林值將會丟擲異常
// 數字型別
let num: number = 100
// 字串
let str: string = '字串' // 使用單引號或者雙引號定位
str = `模板字串` // 使用模板字串定義
// Any 型別 -> 表示該型別可以為動態的型別，該型別在編譯的時候移除了型別檢查
let AnyType: any = 123
AnyType = true // 重複賦值不會丟擲異常
// Void 型別 -> 通常用於沒有返回值的函式型別
function demo(): void {
console.log('測試void型別')
}
demo()
// 還有兩個比較特殊的型別，就是 null 和 undefined
// 這兩個型別是所有型別的子型別，也就是說可以將這兩個兩個型別賦值給 number、www.cppcns.com
基礎型別比較簡單，特別類似於，簡單看來就是比Script多了一個型別定義
TS 中還有一個Never型別。該型別表示的是那些永遠不會存在的值得型別。
例如：never型別是那些總是會丟擲異常或根本就不會有返回值的函式表示式或箭頭函式表示式的返回值型別。
2.物件型別
2.1陣列
TS中的陣列不同於中的陣列，在TS中使用陣列不僅可以將一個變數定義為陣列，也可以定位陣列中的型別。
示例程式碼如下所示：
;(function () {
// 定義一個僅僅為數字的陣列型別
let arr1: number[] = [1,2,3]
console.log(arr1)
// 定義一個可以為 數字 字串 布林值的陣列
let arr2: (number | string | boolean)[] = ['1','2',true]
console.log(arr2)
// 定義一個任意型別的陣列
let arr3 = [1,['1',true],true]
console.log(arr3)
// 定義個物件型別的陣列，物件中必須有 name 和 age 兩個屬性
const objectArray: { name: string; age: number }[] = [
{ name: '一碗周',age: 18 },]
// 或者通過 type alias 類型別名的方式宣告
// 通過 type 定義一個類型別名
type User = { name: string; age: number }
const objectArr: User[] = [{ name: '一碗周',age: 18 }]
})()
2.2元組
元組型別允許表示一個已知元素數量和型別的陣列，各元素的型別不必相同。
示例程式碼如下所示：
;(function () {
// 定義一個值分別被 string 和 number 的元組
let tuple: [string,number] = ['123',123]
console.log(tuple) // [ '123',123 ]
// 通過索引賦值
tuple[0] = 'string'
console.log(tuple) // [ 'string',123 ]
// 賦值其他型別
// tuple[0] = true
// console.log(tuple) // 丟擲異常
})()
元組的主要作用就是約束陣列中的每一項，及其陣列的長度。
元組和陣列是可以可以巢狀的，語法結構如下所示：
// 元組和陣列的巢狀
let tuples: [string,number][] = [
['123',123],['456',456],]
上面的程式碼中，[string,number]表示一個元組，在後面增加[]，就表示這個一個存放元組的陣列。
2.3物件
一個物件中可以包含以上所有的型別，示例程式碼如下所示：
;(function () {
// 定義一個物件，裡面包含 MyName 和 age 兩個屬性，其中 MyName 為 string 型別 age 為number 型別
let obj: {
MyName: string
age: number
}
// 物件的賦值，如果不按上面指定的型別進行賦值會丟擲異常
obj = {
MyName: '一碗周',age: 18,}
console.log(obj) // { MyName: '一碗周',age: 18 }
})()
在TS中我們並不需要在每個地方標註型別，因為型別推斷 可以幫助我們在不編寫額外程式碼的，即可獲得其功能。但是你想讓你的程式碼可讀性更好一些，可以寫上每個的型別。
3.型別推斷
在TypeScript中有的時候並需要明確指定型別，編譯器會自動推斷出合適的型別，比如下面這段程式碼：
;(function () {
let myName = '一碗周'
myName = true // 錯誤：不能將型別“boolean”分配給型別“string”
})()
我們定義myName變數時，並沒有指定其資料型別，只是為他賦了一個字串的值，但是我們如果將這個值重新賦值為要給非string型別的值時，編譯器將會丟擲異常。
這就是TypeScript中最簡單的型別推斷，根據右側的值來推測變數的資料型別。
3.1型別聯合中的型別推斷
什麼是型別聯合請參考：聯合型別、交叉型別和型別保護
若一個變數可能具有多個型別的值時，TypeScript 會將多個型別合併起來，組成一個聯合型別，
示例程式碼如下：
let arr = [1,'2'] // 定義一個包含字串和數字的一個數組 // 為上面定義的陣列重新賦值 // arr = [true,false] // 錯誤 不能將型別“boolean”分配給型別“string | number” // 還有如下例子 let val = arr.length === 0 ? 0 : '陣列長度不是0' // val = false // 錯誤 不能將型別“boolean”分配給型別“string | number”
3.2上下文型別
在這之前介紹的例子可能都是按照=右邊的值來推斷=左邊的型別。現在要介紹的上下文型別就與之前的型別推斷不同，編譯器會根據當期變數所處的上下文環境來推斷出變數的型別。
示例程式碼如下：
;(function () {
// 定義一個介面
interface Person {
name: string
age: number
}
// 通過上面定義的介面定義一個數組
let arr: Person[] = [{ name: '一碗周',age: 18 }]
// 遍歷定義的陣列
arr.forEach(item => {
// 根據當前所處http://www.cppcns.com的環境，編譯器自動推斷出 item 為 hobby 型別且不具有 hobby 屬性
console.log(item.hobby) // 型別“Person”上不存在屬性“hobby”
})
})()
在上面的程式碼中，我們首先定義了一個Person的介面，然後用這個介面定義一個數組，遍歷該陣列時編譯器推斷item為Person型別，所以編譯器丟擲異常。
如果我們為函式表示式的引數新增型別註解，上下文型別將會被忽略到，也就不會在報錯了。
示例程式碼如下：
// 如果在上下文中明確型別資訊，上下文將會被忽略。
arr.forEach((item: any) => {
// 根據當前所處的環境，編譯器自動推斷出 item 為 hobby 型別且不具有 hobby 屬性
console.log(item.hobby) // 型別“Person”上不存在屬性“hobby”
})
4.型別斷言
所謂的型別斷言就是你來告訴TS這個值得資料型別就是某樣的，你不需要做檢查。
這樣做得話他在執行是不會影響，只有在編譯的時候回影響。
示例程式碼如下：
let SomeValue: any = 'this is a string' // 語法一 let StrLength1: number = (<string>SomeValue).length // 語法二 as 語法 let StrLength2: number = (SomeValue as string).length
值得注意的是：在TS中使用JSX時，只有第二種語法是被支援的。
到此這篇關於TypeScript基礎型別介紹的文章就介紹到這了,更多相關TypeScript基礎型別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！