TypeScript(三) —— 基礎類型語法

目錄

• 基礎類型語法

  • 原始類型

    • 字符串
    • 數字
    • 布爾值
    • Null
    • Undefined
    • Symbol
  • Void
  • Never
  • any類型
  • Object類型
  • 數組類型

  • 元組類型

    • 元組的使用場景

  • 枚舉類型

    • 特色
    • DEMO
    • 枚舉類型會入侵代碼
    • 常量枚舉
• TypeScript學習地圖

基礎類型語法

原始類型

字符串

const a: string = 'foobar'

數字

const b: number = 100 // NaN 、 Infinity

布爾值

const c: boolean = true // false

Null

const e: null = null

非嚴格模式下string、number、boolean、void容許爲空null，嚴格模式下不行

// 嚴格模式下會報錯
const d: string = null

如何關閉嚴格模式? 置文件中找strict

{
  "compilerOptions": {
    // true是開啓嚴格模式，false是關閉嚴格模式
    "strict": false,
  }
}

Undefined

const f: undefined = undefined

Symbol

雖然是原始類型，可是這個類型是ES6提出的，默認的配置是ES3，因此會報錯。

若是target改爲es5，Symbol也會報錯，怎麼辦呢? TypeScript(一) —— 類型標準庫中有詳細說明

const h: symbol = Symbol()

Void

它表示沒有任何類型。

const d: void = undefined

最長當一個函數沒有返回值時，你一般會見到其返回值類型是 void。

function Fuc(): void {
    console.log('hello world')
}

Never

目前沒有見到用的，看文檔說函數拋出異常會用，因此這裏先不作解釋。

any類型

any是任意類型，其仍然是動態類型，和普通的JavaScript變量是同樣的，能夠存儲任意類型的值，在運行中也能夠改變成任意類型的值，語法上都不會報錯，由於是任意類型的值因此TypeScript不會對其作類型檢查。

let foo: any = 'string'

foo = 100

foo.bar()

// 當前value能夠是任意類型的值
function stringify(value: any) {
    return JSON.stringify(value)
}

stringify('string')
stringify(100)
stringify(true)

而正是由於any不會進行類型檢查，因此仍是存在類型安全的問題，因此不要輕易使用，其存在仍是主要 爲了老代碼的兼容存在 。

Object類型

Object類型即非原始類型，不僅僅指對象類型，還包括對象、數組、函數類型。

// 使用原始類型會報錯
// 這裏object不是隻接收對象，而是包括函數、數組和對象
const foo: object = function () {} // 對象 {} // 數組 []

單純要對象類型須要定義字面量形式，限制是賦值的對象結構必須和定義的徹底一致，不能多也不能少。

const obj: {foo: number, bar: string} = {foo: 123, bar: 'string'}

若是在TypeScript中限制對象類型，更專業的方式是使用接口，接口的東西下次再說。

數組類型

// 普通聲明
const arr1: Array<number> = [1, 2, 3]
// 簡短聲明
const arr2: number[] = [1, 2, 3]

舉個例子：傳入數字的參數，最後返回數字的總和

// 因此這裏要肯定咱們這裏是否是數字類型，添加數組類型註解
function sum (...args: number[]) {
  // reduce的第一個參數是上一次回調的結果 第二個參數是當前值(初始值爲0)，最後返回二者之和
  return  args.reduce((prev, current) => prev + current, 0)
}

console.log(sum(1, 2, 3, 4, 5)) // 15
console.log(sum(1, 2, '3', 4, 5)) // error!

元組類型

元組是明確元素數量，以及每一個元素類型的數組。能夠數組字面量來聲明元組類型。

// 下面的若是類型和數量不一致都會報錯
const tuple: [number, string] = [1, 'string']

// 若是要訪問元組的元素，依舊使用下標的方式訪問便可
const age = tuple[0]
const name = tuple[1]

// 也能夠使用數組解構的方式訪問
const [age, name] = tuple

元組的使用場景

1. 在函數中返回多個返回值
2. React useState() Hook返回的是元組類型
3. Object.entries()獲取對象中全部的鍵值數組，每一個鍵值就是一個元組

枚舉類型

開發過程當中，常常涉及到須要用某幾個數值去表明某幾種狀態。其餘語言中很常見這種數據結構，可是在JS中並無這種數據結構，通常會用對象去模擬。

const PostStatus = {
    Draft: 0,
    Unpublished: 1,
    Published: 2
}

const page = {
    title: 'typeScript指南',
    content: 'content',
    status: PostStatus.Draft
}

特色

如今TypeScript中有了枚舉類型，其特色是：

1. 給一組數值取一個語義性更好的名字
2. 一組數據中只存在幾個固定的值，不存在超出範圍的可能性

DEMO

舉個例子：下面是出版書籍的三個狀態：

• Draft是草稿狀態：0
• Unpublished是未出版：1
• Published是已出版：2

// enum是枚舉類型，後面是枚舉名稱，裏面使用的是等號並非冒號
enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2
}
// 使用的時候仍是用對象.的方式去使用
const post = {
  title: 'typeScript指南',
  content: 'content',
  status: PostStatus.Published // 1 // 0
}

若是不加=，那麼值就默認從0開始累加

enum PostStatus1 {
  Draft, // 0
  Unpublished, // 1
  Published // 2
}

若是給了第一個值，那麼以後的成員都會在此基礎上進行累加

enum PostStatus2 {
  Draft = 6, // 6
  Unpublished, // 7
  Published // 8
}

枚舉的值還能夠是字符串，字符串沒法自增加，須要每一個都進行賦值

enum PostStatusStr {
  Draft = 'string1',
  Unpublished = 'string2',
  Published = 'string3'
}

枚舉類型會入侵代碼

枚舉類型會入侵到運行時的代碼，簡單說就是會影響編譯的結果，TypeScript的大多數類型最終都會被編譯移除掉，只是爲了開發的時候能進行類型檢查，而枚舉會編譯成 雙向的鍵值對對象 ，能夠經過值找鍵 ，能夠根據鍵找值。

下面這種代碼就會保留到項目中

var PostStatus;
(function (PostStatus) {
    // 能夠看到下面的代碼，內層使用枚舉的鍵存儲枚舉的值，外層再用枚舉的值去作鍵，存一下枚舉的鍵
    PostStatus[PostStatus["Draft"] = 0] = "Draft";
    PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";
    PostStatus[PostStatus["Published"] = 2] = "Published";
})(PostStatus || (PostStatus = {}));

這樣作的目的是：能夠動態的根據枚舉值去獲取枚舉的名稱

PostStatus[0] // Draft

若是咱們不用上面這個語句去訪問鍵， 那麼建議使用常量枚舉

常量枚舉

常量枚舉就是在enum前面添加const，這樣就不會對代碼進行入侵，上面的雙向鍵值對的代碼會被移除，只是在最後添加一些註釋。

• 不加const的編譯後代碼

var PostStatus;
(function (PostStatus) {
    PostStatus[PostStatus["Draft"] = 0] = "Draft";
    PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";
    PostStatus[PostStatus["Published"] = 2] = "Published";
})(PostStatus || (PostStatus = {}));

var post = {
    title: 'Hello TypeScript',
    content: 'content',
    status: PostStatus.Published // 1 // 0
};

• 加const的編譯後代碼

// 上面的PostStatus會去掉，換成下面直接取的值
var post = {
    title: 'Hello TypeScript',
    content: 'content',
    status: 2 /* Published */ // 1 // 0
};

TypeScript學習地圖