TypeScript支持 JavaScript的所有語法和語義,同時通過作為ECMAScript的超集來提供一些額外的功能,如類型檢測和更豐富的語法,這篇文章主要給大家介紹了關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類型詳解的相關(guān)資料,需要的朋友可以參考下

TypeScript定義變量

變量聲明格式

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

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

聲明了類型后TypeScript就會進行類型檢測，聲明的類型可以稱之為類型注解；

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

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

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

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

let message: string = "Hello World";

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

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

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

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

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

變量類型推導(dǎo)

在開發(fā)中，有時候為了方便起見我們并不會在聲明每一個變量時都寫上對應(yīng)的數(shù)據(jù)類型，我們更希望可以通過TypeScript本身的特性幫助我們推斷出對應(yīng)的變量類型：

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

這是因為在一個變量第一次賦值時，會將后面的賦值內(nèi)容的類型，來作為前面標(biāo)識符的類型, 這個過程稱之為類型推導(dǎo), 或者說類型推斷：

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

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

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

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

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

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

number類型

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

let num: number = 100

num = 50
num = 0.5

如果你學(xué)習(xí)過ES6應(yīng)該知道， 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類型

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

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

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

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

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

Object類型

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

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

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

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

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

Symbol類型

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

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

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

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

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

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

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

null和undefined類型

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

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

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

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

any類型

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

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

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

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

let a: any = "chenyq"

a = 18
a = true
a = {}

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

如果對于某些情況的處理過于繁瑣不希望添加規(guī)定的類型注解，或者在引入一些第三方庫時，缺失了類型注解，這個時候我們可以使用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是什么類型是不確定的, 需要根據(jù)flag的值進行判斷

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

在開發(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

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

void類型

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

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

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

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

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

never類型

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

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

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

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

tuple類型

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

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

// 例如使用元組存放個人信息
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ù)組中。（可以放在對象或者元組中）

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