TypeScript中定義變量方式以及數據類型詳解

Posted on by

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和數組有什麼區別呢？

首先，數組中通常建議存放相同類型的元素，不同類型的元素是不推薦放在數組中。（可以放在對象或者元組中）

其次，元組中每個元素都有自己特定的類型，根據索引值獲取到的值可以確定對應的類型；而數組如果存放不同類型, 數組中每一個元素都是any類型

總結 

到此這篇關於TypeScript中定義變量方式以及數據類型詳解的文章就介紹到這瞭,更多相關TypeScript定義變量方式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：