深刻浅出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