还不会TS？ 带你 TypeScript 快速入门

前言

TS 现在使用地越来越多，学计算机的就得不断的学习，才能更好的追逐这个时代，这是小浪以前学习TS时候的总结，能快速的帮助大家入门 TS，这里列举不是很全列举一些常用的，但是能满足平时的需求，具体的可以看官方的文档哈，这里只是简单的入门，希望能够帮助到大家

往期精彩：

快速上手Vuex 到 手写简易 Vuex

从了解到深入虚拟DOM和实现diff算法

手写一个简易vue响应式带你了解响应式原理

从使用到自己实现简单Vue Router看这个就行了

前端面试必不可少的基础知识，虽然少但是你不能不知道

1.安装

TS 的优点和缺点就不一一赘述了，下面直接进入正题

进行全局安装

npm install -g typescript

2.原始数据类型

我们在变量后面添加 : 类型 就可以规定数据的类型，设置其他类型就会报错

我们这里先来了解下基础的类型

1.字符串 string

双引号（"）或单引号（'）表示字符串

2.数字 number

支持 十/十六/二/八 进制

3.布尔 boolean

只能是 true/false

4.undefined

用处不是很大

5.null

用处不是很大

6.空 void

没有任何类型，函数的没用返回值的使用 void ,返回值为空（ undefined ）

7.任意类型 any

这里当类型不确定的时候，就可以使用 any 任意类型，不到万不得已不使用

Unknow 类型和 any 一样可以容纳任意类型比 any 安全

平时用的不多，就不介绍了

7.字面量

定义什么就只能赋值什么

3.复杂类型

1.数组 array

设置数组的类型 比如这个例子 true 这个就会报错，不属于number，数组的元素必须是规定好的类型 其他类型同理

2.元组 tuple

学习过 Python 的同学应该不太陌生，其实可以把它看做一个数组，可以声明多个类型的数组，这样就能插入多个数据类型的数据，就是长度固定的数组

3.接口 interface

它能很方便的帮我们定义 Ojbect 类型，它是非常的灵活可以描述对象的各种类型

与 java 的 interface 有些区别，下面简单了看下，具体的下面有介绍

在 interface 属性中添加 ？可以省略

下面我们给 height 添加 ?

readonly 不可改变的，定义完后就不能修改，是不是和 const 有点像，不过 const 是针对变量， readonly 是针对属性

下面我们把 id 添加上 readonly

4.函数 funtion

我们要规定函数的 输入类型 和 返回类型

在形参后面接冒号声明 形参的类型，在 ()后面冒号声明 返回值类型

传入多余的参数会报错

我们也可以为函数添加可选参数 这里用 ? 即可，这样我们就可以调用两个参数或者三个参数不报错

可选参数之后不能再加规定类型的形参

我们可以把它添加个 ？变为可选参数

除了上面这种声明式写法还有一种表达式写法

有了上面的了解后我们来说下 定义函数类型 的变量

这里这个函数还是上面那个

我们定义mysum 指定它 的类型 来接收 我们上面定义的函数

() 里面是输入的形参的 类型

=> 代表是 返回值 的类型

: 后面的都是声明类型，和代码逻辑没有什么关系

我们刚才说了 interface 可以描述各种类型，那么我们用 interface 来描述下函数类型

注意一点 之前用的 => 来表示返回值类型

这里是在 ()后 : 返回值类型

5.联合类型 union types

但对于一个变量的类型可能是几种类型的时候我们可以使用 any ，但是 any 的范围是不是有点大了，不到万不得已不使用，

我们如果知道是其中的哪几种类型的话，我们就可以使用 联合类型 用 | 分隔

比如下面的例子，haha 可能是 number 或者 string

注意：在没有赋值之前，只能访问共同的方法、属性，比如下面的例子,number 没有length 属性

6.对象 object

我们 直接 let a: object; 是不是没有什么意义，因为 js 中对象太多了。。

我们可以这样来用

属性必须在类型 { name: string; age: number; } 中

4.断言 type inference

当在上面联合类型的变量传入的时候，我们声明了这个类型为 number | string 它不能不能调用 length 方法

机器没法判断这个类型，但是我们比机器更了解这个类型，我们人为可以指定类型 string 这里我们就可以用到 类型断言

1.我们就用 as 来进行断言

2.还有一种写法 <类型> 两者的功能都是一样的

5.类型守卫 type guard

遇到联合类型的时候，使用 类型守卫可以 缩小范围

实现以下和上面一样的方法

类型守卫 除了 typeof 之外 ，还有 instanceof、 in

6.类 class

在 ES6 中就有 类的概念了，在 TS 中对类添加一些功能，这里只说下几个常用的

先写个基础的 类

我们先来说下 3个访问修饰符

Public:修饰的属性或方法是共有的 在 任何地方 都能访问

Private:修饰的属性或方法是私有的 只有 本类 中访问

Protected:修饰的属性或方法是受保护的 在 本类 和 子类中 能够访问

比如指定父类中 money 访问权限为 private ,只能在 Parent 访问，子类访问会出错

我们可以设置访问权限为 protected ，这样子类就能访问

静态属性 static

上面的 name money 这两个属性都是通过 实例 去访问的

使用 static 修饰的属性是通过 类 去访问，是每个实例共有的

同样 static 可以修饰 方法，用 static 修饰的方法称为 类方法，可以使用类直接调用

只读 readonly

我们给属性添加上 readonly 就能保证该属性只读，不能修改，如果存在 static 修饰符，写在其后

抽象类 abstract

TS 新增的抽象类，还是简单说下概念吧，我们写一个类的时候，不希望直接使用该类创建实例**（不能被new）**那么我们把它设置为抽象类，让它不能被实例化

只能被继承

在 class 前面 添加 abstract 修饰符，

在抽象类中 可以写 抽象方法 ，抽象类没有方法体

举个例子：一个动物的抽象类，有个叫的方法，不可能 每个动物的叫声一样吧，我们可以把它设置为抽象方法，具体功能子类进行实现（该怎么叫就由子类来写）

属性的封装和 java 一样，这里就不说了...

7.接口 interface

为什么会出现接口

为了解决 继承 的困境(一个类只能继承另一个类不能实现多继承)

还有一种情况，人能够洗衣服，洗衣机也能洗衣服，洗衣机和人找不到一个共同的父类，我们可以把洗衣服这个功能抽离出来写成接口，人 和 洗衣机 去实现这个接口就行

我们可以用 implements 来实现接口

接口可以多实现

接口之前可以继承

下面这个例子接口继承了另一个接口，这样人类只需实现一个接口就行

8.枚举 enum

常量是在项目中经常使用，虽然 const 可以声明常量，但是有的常量取值是在一个范围里的，这里我们就需要使用 enum 来进行处理

1.数字枚举

可以修改枚举中的初始值

2.字符串枚举

3.常量枚举

在 enum 前面添加一个 const 即可，它提高了性能

为什么这么说呢，我就把上面字符串枚举编译成 js 例子，和 常量枚举编译 贴出来对比一下

常量枚举直接找出 Week.Tuesday 上面一截都没了

9.泛型

泛型就像一个占位符一个变量，在使用的时候我们可以将定义好的类型像参数一样传入，原封不动的输出

比如这个例子我们就想返回一个值，在这里我写死是 number

在实际中，未必就是 number，我们就可以通过泛型来解决，定义好的类型传入进去，返回什么类型出来

泛型简单介绍

这里 T 是相当于一个占位符,在方法(变量，接口....等等)后面添加 <T>

是不是看起来这么简单，其实还真是

然后我在使用 getValue这个方法的时候 只需要在 实参 规定好类型，编译器它也不笨，能够知道我们的参数类型，并将它们赋值给 T

多个参数

在使用的时候，聪明的就判断出 传入的类型，并修改了 T,U，真的很方便

我们可以使用 interface 来约束 泛型

在 T 后面 extends Ilen ，定义 Ilen 里面代码表示，T 必须要有 length 属性

这样在 方法里面调用 params.length 就不会报错

在 类使用泛型

在 接口 使用泛型

在 数组 使用泛型

其实泛型还有很多很多使用方法，这里就简单地入门下

10.类型别名

使用 type 给类型取别名

11.交叉类型

用 & 进行连接

把类型都组合起来，变量赋值必须满足 交叉类型

结语：

这篇文章是小浪3月多学TS时做的总结，写的不全面写的都是一些经常用到的，全面的话还得写很多很多。。。官方的文档 yyds ，不过大家可以通过这篇文章进行快速入门，，其实小浪用了TS一段时间了，感觉就是有些泛型写的很复杂，规范性很强，很多第三方库隐藏的类型搞不清楚，刚写的完全看不懂，每次写一个东西都要想着去定义类型，恨不得把电脑砸了...开玩笑的，还是得耐心

参考资料： TS官方文档