深刻淺出TypeScript（1）- 概述

前言

在學習TypeScript過程當中，我也是遇到了不少的阻力，由於並未有太多深刻挖掘的場景，以前作IONIC的時候，也只是用TS，現現在，這一個系列也是記錄本身學習和收穫，同時但願本身的這系列教程對想要學習TypeScript的同窗有必定的幫助，我儘可能以簡潔的語言以及代碼來將個人東西闡述清楚。

若是，在文章中有錯誤和疏漏，但願你們多多指出和包涵，你們能夠經過郵箱來聯繫我：869345843@qq.com

什麼是TypeScript

關於TypeScript有一種頗有趣的說法，說TypeScript = Typed + JavaScript，仔細想來，確切的說TypeScript應該是對JavaScript的擴展 + 類型系統，因此這個公式應該是Typed + JavaScript + Extends

而官方文檔也說明了一件事情，那就是TypeScript是JavaScript的超集，爲了讓咱們能夠無縫從JavaScript切換到TypeScript，微軟的TypeScript只是提供了TypeScript到JavaScript的編譯，並不包含運行時，它的運行時也就是JavaScript的運行時，因此TypeScript能夠說是一種JavaScript的新的編碼實現。

TypeScript和JavaScript的類型

先讓咱們來看一下JavaScript的基本類型系統：Boolean、Null、Undefined、String、Number，以及ES6以後，新增的Symbol類型。

TypeScript有哪些類型呢？下面讓咱們來看一下TypeScript的基本類型：Boolean、Null、Undefined、String、Number、Symbol + TypeScript擴展的類型。

上方TypeScript的基本類型正是JavaScript的基礎類型 + 自行擴展的類型系統。

TypeScript對於JavaScript的擴展類型借鑑了強類型語言的類型系統，有Void、Never、泛型等以及高階類型。

TypeScript的表達形式

明確了TypeScript和JavaScript類型方面的差別化，咱們來看看如何將JavaScript改寫成爲TypeScript呢？

先上一段JavaScript代碼：

let str = 'Hello JavaScript'
let num = 10
let arr = [1, 2, 3]
const htmlStr = `${str}_${num}_${arr.join()}`

document.querySelectorAll('.app')[0].innerHTML = str

對於上述一段代碼，若是運行在TypeScript環境下，也是能夠正常運行，由於TypeScript是JavaScript的超集，兼容這種寫法。

那麼，上面的代碼，對應TypeScript又是如何的呢？下面咱們用代碼描述：

let str: string = 'Hello JavaScript'
let num: number = 10
let arr[] = [1, 2, 3]  //Array<number>
const htmlStr = `${str}_${num}_${arr.join()}`

document.querySelectorAll('.app')[0].innerHTML = str

因而可知，TypeScript是更規範化的將變量類型聲明化，他的格式以下：

let variable: Type = value

TypeScript中的數據類型

說道TypeScript的數據類型，咱們就能夠用一段代碼來展現：

// 原始類型
let bool: boolean = true
let num: number = 13
let str: string = 'abc'

// 數組
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]
let arr3: Array<number | string> = [1, '2']

// 元組
let tuple: [number, string] = [0, '2'] // 特殊數組，限定數組元組類型和個數
tuple.push(2)  // [0 , '2', 2]
// tuple[2] //不容許越界訪問

// 函數
let add = (x: number, y: number): number => x + y
let func: (x: number, y: number) => number
func = (a, b) => a + b

//對象
let obj: object = { x: 1, y: 2 }
// obj.x = 100 // wrong
let obj2: { x:number, y:number } = { x: 1, y: 2 }
obj2.x = 100

//void
let noReturn = () => {}
void 0 === undefined

// any
let x  // 能夠任意賦值

// never  永遠不會有返回值
let error = () => {
    throw new Error()
}

// 枚舉
enum Role { // 數字 或者聲明字符串
    Teacher, // 默認0開始如下依次+1
    Student,  // 1
}

TypeScript的類型推斷

固然，咱們在書寫代碼的過程當中，若是忘記加類型，寫出純JavaScript代碼，那麼TypeScript也會經過類型推斷，幫助咱們推斷出大部分類型。

好比咱們最初的JavaScript代碼，類型推斷依照代碼作出以下說明：

let str = 'Hello JavaScript'
str = 100  // error由於賦值操做，已經將str推斷爲string類型，這樣賦值在TypeScript會報錯

let num = 10
num = 'some string'  // error，此時num已經推斷爲number類型，不能夠將string類型賦值給它

let arr = [1, 2, 3]
arr = true   // error， 類型推斷爲數組類型Array<number>，不能賦值Boolen
arr = ['1', '2', '3'] // error，類型推斷爲Array<number>，不能賦值爲Array<string>類型

const htmlStr = `${str}_${num}_${arr.join()}`

document.querySelectorAll('.app')[0].innerHTML = str

爲何要有類型

由上面代碼能夠知道，TypeScript對代碼進行了比較嚴格的類型判斷，那麼咱們確定想問，爲何要這樣作？

其實，這樣作最大的好處，就可讓代碼簡單的文檔化，而且規範咱們的代碼操做，避免一些沒必要要的邊界值問題，這對於開發大型應用和寫測試用例都有極大的幫助。

而TypeScript卻也並未限制咱們編碼的自由，就像是騎馬，若是單純用JavaScript書寫代碼，就好像是沒有繮繩的騎馬，會讓咱們陷入到危險和抓狂之中，可是有了TypeScript，咱們就至關因而有了繮繩，可使得咱們的代碼更優雅，也更容易控制和理解。

總結

本篇文章探討了TypeScript和JavaScript中的類型系統，以及在TypeScript中如何處理類型聲明和賦值。同時也暴露了一些靈活性的問題，好比不能將一個字符串數組賦值給數字數組。因此咱們若是單一的想要定義一個多類型的數組就會遇到麻煩，但這些不是問題，TypeScript中也存在着解決方案。

在下一篇，咱們將會看看TypeScript是如何處理這些要求，以及如何給予相應的類型限制和定義的。

參考資料：

TypeScript手冊：TypeScript

極客時間TypeScript開發實戰專欄：TypeScript開發實戰

參考書：TypeScript實戰指南

參考書：Leaning TypeScript中文版（這本書講解的TypeScript的版本爲1.5+，不是最新版本，若是買書，不建議買，能夠購買上本參考書TypeScript實戰指南）

個人我的博客：http://www.gaoyunjiao.fun/?p=114

原文出處：https://www.cnblogs.com/qixingduanyan/p/11415856.html