TypeScript定義變量

變量聲明格式

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

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

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

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

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

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

string是TypeScript中定義的字符串類(lèi)型， String是JavaScript的字符串包裝類(lèi)的類(lèi)型

let message: string = "Hello World";

如果我們給message賦值其他類(lèi)型的值，那么就會(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)探討。

變量類(lèi)型推導(dǎo)

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

如果我們給age賦值其他的類(lèi)型：

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

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

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

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

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

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

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

number類(lèi)型

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

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類(lèi)型

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

let flag: boolean = true

flag = false
flag = 30 > 10

string類(lèi)型

string類(lèi)型是字符串類(lèi)型，在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類(lèi)型

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

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

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

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

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

Object類(lèi)型

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

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

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

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

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

Symbol類(lèi)型

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

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

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

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

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

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

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

null和undefined類(lèi)型

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

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

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

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

any類(lèi)型

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

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

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

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

let a: any = "chenyq"

a = 18
a = true
a = {}

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

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

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

unknown類(lèi)型

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

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

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

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

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

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

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

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

let result: unknown

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

any類(lèi)型可以賦值給任意類(lèi)型

let result: any = "aaa"

// any類(lèi)型的值可以賦值給任何類(lèi)型
let name: string = result
let age: number = result
let isSHow: true = result

unknown類(lèi)型只能賦值給any類(lèi)型和unknown類(lèi)型

let result: unknown = "aaa"

// unknown類(lèi)型的值只能賦值給any或unknown類(lèi)型
let name: any = result
let age: unknown = result
let isSHow: any = result

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

void類(lèi)型

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

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

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

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

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

never類(lèi)型

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

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

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

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

tuple類(lèi)型

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

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

// 例如使用元組存放個(gè)人信息
const info: [string, number, number] = ["chenyq", 18, 1.88]

const name = info[0] // 并且知道類(lèi)型是string
const age = info[1] // 并且知道類(lèi)型是number
const height = info[2] // 并且知道類(lèi)型是number

那么tuple和數(shù)組有什么區(qū)別呢？

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

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

總結(jié) 

到此這篇關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類(lèi)型詳解的文章就介紹到這了,更多相關(guān)TypeScript定義變量方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論