TypeScript中定義變數方式以及資料型別詳解

2022-08-31 14:01:19

TypeScript定義變數

變數宣告格式

我在前面強調過，在TypeScript中定義變數需要指定 識別符號 的型別。

所以完整的宣告格式如下：

宣告了型別後TypeScript就會進行型別檢測，宣告的型別可以稱之為型別註解；

var/let/const 識別符號: 資料型別 = 賦值;

比如我們宣告一個message，完整的寫法如下：

注意：這裡的string的首字母是小寫的，和String是有區別的

string是TypeScript中定義的字串型別， String是JavaScript的字串包裝類的型別

let message: string = "Hello World";

如果我們給message賦值其他型別的值，那麼就會報錯：

在TypeScript定義變數（識別符號）和ES6之後一致，可以使用var、 let、 const來定義。

var name: string = "chenyq"let age: number = 18const height: number = 1.88

當然，在tslint中並不推薦使用var來宣告變數：

可見，在TypeScript中並不建議再使用var關鍵字了，主要原因和ES6升級後let和var的區別是一樣的， var是沒有塊級作用域的，會引起很多的問題，這裡不再展開探討。

變數型別推導

在開發中，有時候為了方便起見我們並不會在宣告每一個變數時都寫上對應的資料型別，我們更希望可以通過TypeScript本身的特性幫助我們推斷出對應的變數型別：

如果我們給age賦值其他的型別：

這是因為在一個變數第一次賦值時，會將後面的賦值內容的型別，來作為前面識別符號的型別, 這個過程稱之為型別推導, 或者說型別推斷：

上面的age就是因為後面賦值的是一個number型別，所以age雖然沒有明確的說明是number型別，但是依然是一個number型別；

JS和TS的資料型別

我們經常說TypeScript是JavaScript的一個超集：

下面這幅圖很好的表示出JavaScript、ECMAScript、TypeScript的關係

可以看出TypeScript是包含JavaScript的資料型別的

TS中使用JS的資料型別

number型別

數位型別是我們開發中經常使用的型別， TypeScript和JavaScript一樣，不區分整數型別（ int）和浮點型（ double），統一為number型別。

let num: number = 100

num = 50
num = 0.5

如果你學習過ES6應該知道， ES6新增了二進位制和八進位制的表示方法，而TypeScript也是支援二進位制、八進位制、十六進位制的表示：

let num: number = 100

num = 50 // 十進位制
num = 0b110 // 二進位制
num = 0o555 // 八進位制
num = 0xf23 // 十六進位制

boolean型別

boolean型別只有兩個取值： true和false，非常簡單

let flag: boolean = true

flag = false
flag = 30 > 10

string型別

string型別是字串型別，在TS中和JS一樣可以使用單引號或者雙引號表示：

let message: string = "Hello TS"

message = '你好 TS'

同時也支援ES6的模板字串來拼接變數和字串：

const name: string = "chenyq"
const age: number = 18
const height: number = 1.88

console.log(`我叫${name}, 年齡${age}, 身高${height}`)

Array型別

陣列型別的定義也非常簡單，有兩種方式(推薦第一種寫法)：

因為第二種寫法在jsx中會有衝突, 所以更推薦第一種寫法

// 表示定義一個字串型別的陣列(推薦寫法)
const names: string[] = ["aaa", "bbb", "ccc"]
// 表示定義一個數位型別的陣列
const nums: Array<number> = [123, 456, 789]

names.push("ddd")
nums.push(111)

如果確定了型別, 再新增其他型別到陣列中，那麼會報錯：

Object型別

在TypeScript中定義一個物件其實會預設推匯出屬性的型別的

const obj = {
  name: "chenyq",
  age: 18
}

object物件型別可以用於描述一個物件, 但是這樣我們就無法從myinfo獲取資料，設定資料

const myinfo: object = {
  name: "chenyq",
  age: 18
}

物件型別後面會詳細講解, 目前先了解到此即可

Symbol型別

在ES5中，如果我們是不可以在物件中新增相同的屬性名稱的，比如下面的做法：

const person = {
  identity: "程式設計師",
  identity: "醫生"
}

通常我們的解決方案是定義兩個不同的屬性名字：比如identity1和identity2。

const person = {
  identity1: "程式設計師",
  identity2: "醫生"
}

我們還可以通過symbol來定義相同的名稱，因為Symbol函數返回的是不同的值：

const s1: symbol = Symbol("content")
const s2: symbol = Symbol("content")

const person = {
  [s1]: "程式設計師",
  [s2]: "醫生"
}

null和undefined型別

在JavaScript中， undefined 和 null 是兩個基本資料型別。

在TypeScript中，它們各自的型別也是undefined和null，也就意味著它們既是實際的值，也是自己的型別

// null型別只有一個值就是null
let nl: null = null
// undefined型別也只有一個值就是undefined
let ud: undefined = undefined

TS自身特有的資料型別

any型別

在某些情況下，我們確實無法確定一個變數的型別，並且可能它會發生一些變化，這個時候我們可以使用any型別（類似於Dart語言中的dynamic型別）。

any型別有點像一種討巧的TypeScript手段：

我們可以對any型別的變數進行任何的操作，包括獲取不存在的屬性、方法；

我們給一個any型別的變數賦值任何的值，比如數位、字串的值；

let a: any = "chenyq"

a = 18
a = true
a = {}

// any型別的陣列可以存放不同的資料型別
const arr: any = ["aaa", 123, true]

如果對於某些情況的處理過於繁瑣不希望新增規定的型別註解，或者在引入一些第三方庫時，缺失了型別註解，這個時候我們可以使用any：

包括在Vue原始碼中，也會使用到any來進行某些型別的適配；

unknown型別

unknown是TypeScript中比較特殊的一種型別，它用於描述型別不確定的變數。

這句話表達什麼意思呢？我們來看下面這樣的一個場景：

// foo返回string型別
function foo() {
  return "aaa"
}

// bar返回number型別
function bar() {
  return 123
}

let flag = true
let result
if (flag) {
  result = foo()
} else {
  result = bar()
}

此時result是沒有型別註解的, result是什麼型別是不確定的, 需要根據flag的值進行判斷

此時可以將result的型別註解設定為any型別, 但是開發中是不推薦使用any型別的

在開發中推薦使用unknown型別

let result: unknown

那麼any和unknown型別的區別是什麼呢?

any型別可以賦值給任意型別

let result: any = "aaa"

// any型別的值可以賦值給任何型別
let name: string = result
let age: number = result
let isSHow: true = result

unknown型別只能賦值給any型別和unknown型別

let result: unknown = "aaa"

// unknown型別的值只能賦值給any或unknown型別
let name: any = result
let age: unknown = result
let isSHow: any = result

賦值給其他型別的時候, 編譯就會報錯, 這是為了防止在其他地方亂用的情況

void型別

void通常用來指定一個函數是沒有返回值的，那麼它的返回值就是void型別：

我們可以將null和undefined賦值給void型別，也就是函數可以返回null或者undefined

function foo(): void {
  console.log("我是沒有返回值的函數")
}

如果一個函數我們沒有寫任何型別，那麼它預設返回值的型別就是void的, 所以一般不寫：

function foo() {
  console.log("我是沒有返回值的函數")
}

never型別

never 表示永遠不會發生值的型別，比如一個函數：

如果一個函數中是一個死迴圈或者丟擲一個異常，那麼這個函數是永遠不會返回東西的

那麼寫void型別或者其他型別作為返回值型別都不合適，這個時候我們就可以使用never型別；

function foo(): never {
  while (true) {
    console.log("死迴圈")
  }
}

tuple型別

tuple是元組型別，很多語言中也有這種資料型別，比如Python、 Swift等。

元組的出現也是為了保證陣列存放相同元素

// 例如使用元組存放個人資訊
const info: [string, number, number] = ["chenyq", 18, 1.88]

const name = info[0] // 並且知道型別是string
const age = info[1] // 並且知道型別是number
const height = info[2] // 並且知道型別是number

那麼tuple和陣列有什麼區別呢？