TypeScript中怎么定義變量及使用數(shù)據(jù)類型

本篇內(nèi)容介紹了“TypeScript中怎么定義變量及使用數(shù)據(jù)類型”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

TypeScript定義變量

變量聲明格式

我在前面強(qiáng)調(diào)過(guò)，在TypeScript中定義變量需要指定 標(biāo)識(shí)符 的類型。

所以完整的聲明格式如下：

聲明了類型后TypeScript就會(huì)進(jìn)行類型檢測(cè)，聲明的類型可以稱之為類型注解；

var/let/const 標(biāo)識(shí)符: 數(shù)據(jù)類型 = 賦值;

比如我們聲明一個(gè)message，完整的寫法如下：

注意：這里的string的首字母是小寫的，和String是有區(qū)別的

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

let message: string = "Hello World";

如果我們給message賦值其他類型的值，那么就會(huì)報(bào)錯(cuò)：

在TypeScript定義變量（標(biāo)識(shí)符）和ES6之后一致，可以使用var、 let、 const來(lái)定義。

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

當(dāng)然，在tslint中并不推薦使用var來(lái)聲明變量：

可見(jiàn)，在TypeScript中并不建議再使用var關(guān)鍵字了，主要原因和ES6升級(jí)后let和var的區(qū)別是一樣的， var是沒(méi) 有塊級(jí)作用域的，會(huì)引起很多的問(wèn)題，這里不再展開(kāi)探討。

變量類型推導(dǎo)

在開(kāi)發(fā)中，有時(shí)候?yàn)榱朔奖闫鹨?jiàn)我們并不會(huì)在聲明每一個(gè)變量時(shí)都寫上對(duì)應(yīng)的數(shù)據(jù)類型，我們更希望可以通過(guò)TypeScript本身的特性幫助我們推斷出對(duì)應(yīng)的變量類型：

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

這是因?yàn)樵谝粋€(gè)變量第一次賦值時(shí)，會(huì)將后面的賦值內(nèi)容的類型，來(lái)作為前面標(biāo)識(shí)符的類型, 這個(gè)過(guò)程稱之為類型推導(dǎo), 或者說(shuō)類型推斷：

上面的age就是因?yàn)楹竺尜x值的是一個(gè)number類型，所以age雖然沒(méi)有明確的說(shuō)明是number類型，但是依然是一個(gè)number類型；

JS和TS的數(shù)據(jù)類型

我們經(jīng)常說(shuō)TypeScript是JavaScript的一個(gè)超集：

下面這幅圖很好的表示出JavaScript、ECMAScript、TypeScript的關(guān)系

可以看出TypeScript是包含JavaScript的數(shù)據(jù)類型的

TS中使用JS的數(shù)據(jù)類型

number類型

數(shù)字類型是我們開(kāi)發(fā)中經(jīng)常使用的類型， TypeScript和JavaScript一樣，不區(qū)分整數(shù)類型（ int）和浮點(diǎn)型 （ double），統(tǒng)一為number類型。

let num: number = 100

num = 50
num = 0.5

如果你學(xué)習(xí)過(guò)ES6應(yīng)該知道， ES6新增了二進(jìn)制和八進(jìn)制的表示方法，而TypeScript也是支持二進(jìn)制、八進(jìn)制、十 六進(jìn)制的表示：

let num: number = 100

num = 50 // 十進(jìn)制
num = 0b110 // 二進(jìn)制
num = 0o555 // 八進(jìn)制
num = 0xf23 // 十六進(jìn)制

boolean類型

boolean類型只有兩個(gè)取值： true和false，非常簡(jiǎn)單

let flag: boolean = true

flag = false
flag = 30 > 10

string類型

string類型是字符串類型，在TS中和JS一樣可以使用單引號(hào)或者雙引號(hào)表示：

let message: string = "Hello TS"

message = '你好 TS'

同時(shí)也支持ES6的模板字符串來(lái)拼接變量和字符串：

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

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

Array類型

數(shù)組類型的定義也非常簡(jiǎn)單，有兩種方式(推薦第一種寫法)：

因?yàn)榈诙N寫法在jsx中會(huì)有沖突, 所以更推薦第一種寫法

// 表示定義一個(gè)字符串類型的數(shù)組(推薦寫法)
const names: string[] = ["aaa", "bbb", "ccc"]
// 表示定義一個(gè)數(shù)字類型的數(shù)組
const nums: Array<number> = [123, 456, 789]

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

如果確定了類型, 再添加其他類型到數(shù)組中，那么會(huì)報(bào)錯(cuò)：

Object類型

在TypeScript中定義一個(gè)對(duì)象其實(shí)會(huì)默認(rèn)推導(dǎo)出屬性的類型的

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

object對(duì)象類型可以用于描述一個(gè)對(duì)象, 但是這樣我們就無(wú)法從myinfo獲取數(shù)據(jù)，設(shè)置數(shù)據(jù)

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

對(duì)象類型后面會(huì)詳細(xì)講解, 目前先了解到此即可

Symbol類型

在ES5中，如果我們是不可以在對(duì)象中添加相同的屬性名稱的，比如下面的做法：

const person = {
  identity: "程序員",
  identity: "醫(yī)生"
}

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

const person = {
  identity1: "程序員",
  identity2: "醫(yī)生"
}

我們還可以通過(guò)symbol來(lái)定義相同的名稱，因?yàn)镾ymbol函數(shù)返回的是不同的值：

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

const person = {
  [s1]: "程序員",
  [s2]: "醫(yī)生"
}

null和undefined類型

在JavaScript中， undefined 和 null 是兩個(gè)基本數(shù)據(jù)類型。

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

// null類型只有一個(gè)值就是null
let nl: null = null
// undefined類型也只有一個(gè)值就是undefined
let ud: undefined = undefined

TS自身特有的數(shù)據(jù)類型

any類型

在某些情況下，我們確實(shí)無(wú)法確定一個(gè)變量的類型，并且可能它會(huì)發(fā)生一些變化，這個(gè)時(shí)候我們可以使用any類型（類似 于Dart語(yǔ)言中的dynamic類型）。

any類型有點(diǎn)像一種討巧的TypeScript手段：

我們可以對(duì)any類型的變量進(jìn)行任何的操作，包括獲取不存在的屬性、方法；

我們給一個(gè)any類型的變量賦值任何的值，比如數(shù)字、字符串的值；

let a: any = "chenyq"

a = 18
a = true
a = {}

// any類型的數(shù)組可以存放不同的數(shù)據(jù)類型
const arr: any = ["aaa", 123, true]

如果對(duì)于某些情況的處理過(guò)于繁瑣不希望添加規(guī)定的類型注解，或者在引入一些第三方庫(kù)時(shí)，缺失了類型注解，這個(gè)時(shí)候 我們可以使用any：

包括在Vue源碼中，也會(huì)使用到any來(lái)進(jìn)行某些類型的適配；

unknown類型

unknown是TypeScript中比較特殊的一種類型，它用于描述類型不確定的變量。

這句話表達(dá)什么意思呢？我們來(lái)看下面這樣的一個(gè)場(chǎng)景：

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

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

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

此時(shí)result是沒(méi)有類型注解的, result是什么類型是不確定的, 需要根據(jù)flag的值進(jìn)行判斷

此時(shí)可以將result的類型注解設(shè)置為any類型, 但是開(kāi)發(fā)中是不推薦使用any類型的

在開(kāi)發(fā)中推薦使用unknown類型

let result: unknown

那么any和unknown類型的區(qū)別是什么呢?

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

賦值給其他類型的時(shí)候, 編譯就會(huì)報(bào)錯(cuò), 這是為了防止在其他地方亂用的情況

void類型

void通常用來(lái)指定一個(gè)函數(shù)是沒(méi)有返回值的，那么它的返回值就是void類型：

我們可以將null和undefined賦值給void類型，也就是函數(shù)可以返回null或者undefined

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

如果一個(gè)函數(shù)我們沒(méi)有寫任何類型，那么它默認(rèn)返回值的類型就是void的, 所以一般不寫：

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

never類型

never 表示永遠(yuǎn)不會(huì)發(fā)生值的類型，比如一個(gè)函數(shù)：

如果一個(gè)函數(shù)中是一個(gè)死循環(huán)或者拋出一個(gè)異常，那么這個(gè)函數(shù)是永遠(yuǎn)不會(huì)返回東西的

那么寫void類型或者其他類型作為返回值類型都不合適，這個(gè)時(shí)候我們就可以使用never類型；

function foo(): never {
  while (true) {
    console.log("死循環(huán)")
  }
}

tuple類型

tuple是元組類型，很多語(yǔ)言中也有這種數(shù)據(jù)類型，比如Python、 Swift等。

元組的出現(xiàn)也是為了保證數(shù)組存放相同元素

// 例如使用元組存放個(gè)人信息
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和數(shù)組有什么區(qū)別呢？

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

其次，元組中每個(gè)元素都有自己特定的類型，根據(jù)索引值獲取到的值可以確定對(duì)應(yīng)的類型；而數(shù)組如果存放不同類型, 數(shù)組中每一個(gè)元素都是any類型

“TypeScript中怎么定義變量及使用數(shù)據(jù)類型”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！