基础

简介

1.以javascript 为基础构建的语言 2.一个js的超集 3.可以在任何支持js的平台中执行 4.Ts扩展了Js 并添加了类型

环境搭建

1.cmd 全局下载 npm i -g typescript 2.创建一个ts文件 3.使用tsc对ts文件进行编译进入命令行进入ts文件所在目录执行命令：tsc xxx.ts

为何需要TS

在这里插入图片描述

编译TS

浏览器不能直接运行TS代码，需要编译成JS再交由浏览器解析器执行

1.命令行编译

在这里插入图片描述

2.自动化编译

在这里插入图片描述

类型声明

使用：对变量或函数形参，进行类型声明在这里插入图片描述在：后也可以写字面量类型不过实际开发中用的不多

在这里插入图片描述

类型判断

TS会根据我们的代码，进行类型的推到，例如下面代码中的变量d，只能存储数字

let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number”

但要注意类型推断不是万能的，面对复杂类型时推断容易出问题，所以尽量还是明确的编写类型声明！

类型总览

js中的数据类型在这里插入图片描述 TS的数据类型注意点！

在 JavaScript 中的这些内置构造函数： Number 、 String 、 Boolean ，⽤于创建对应的包装对象，在⽇常开发时很少使⽤，在 TypeScript 中也是同理，所以在 TypeScript 中进行类型声明时，通常都是用小写的 number 、 string 、 boolean

例如下面代码

let str1: string
str1 = 'hello'
str1 = new String('hello') //报错
let str2: String
str2 = 'hello'
str2 = new String('hello')
console.log(typeof str1) //string
console.log(typeof str2) //Object

原始类型VS包装对象

原始类型：如 number 、 string 、 boolean ，在 JavaScript 中是简单数据类型，它们在内存中占⽤空间少，处理速度快。包装对象：如 Number 对象、 String 对象、 Boolean 对象，是复杂类型，在内存中占⽤更多空间，在⽇常开发时很少由开发⼈员⾃⼰创建包装对象 2. ⾃动装箱：JavaScript 在必要时会⾃动将原始类型包装成对象，以便调⽤⽅法或访问属性例如字符串身上没有.length属性但是 str.length的时候可以读取到值

常用类型

any

any的含义是：任意类型一旦将变量类型限制为any，则意味着放弃了对该变量的类型检查在这里插入图片描述注意：any类型的变量，可以复制给任意类型的变量且该变量的类型会随着any类型的变量改变 console.log(typeof x); //number

unknown

unknown 的含义是：未知类型，适⽤于：起初不确定数据的具体类型，要后期才能确定 unknown 可以理解为⼀个类型安全的 any 。在这里插入图片描述 unknown 会强制开发者在使⽤之前进⾏类型检查，从⽽提供更强的类型安全性。读取 any 类型数据的任何属性都不会报错，而 unknown 正好与之相反

在这里插入图片描述

never （几乎不用）

never的含义是：任何值都不是，即：不能有值，例如 undefined 、 null 、”、 0 都不行！ 1.几乎不用never去直接限制变量，因为没有意义例如：在这里插入图片描述 2.never一般是TypeScript主动推断出来的，例如： 3.never也可用于限制函数的返回值

void

void含义是空即：函数不返回任何值调用者也不应依赖其返回值进行任何操作 1.void通常用于函数返回值声明在这里插入图片描述 2.以下写法均符合规范 3.限制函数返回值时是不是undefined 和void 就没区别呢？ ----有区别因为还有这句话【返回值类型为void 的函数调用者不应依赖其返回值进行任何操作】理解声明void 后在TS层面是不希望通过返回值来进行一系列操作所以报错在这里插入图片描述

理解：void & undefined void 是一个广泛的概念用来表达“空” 而undefined则是这种“空”的具体实现因此可以说undefined 是void能接受的一种 “空” 的状态也可以理解为 void 包含 undefined 但void所表达的语义超越了undefined void是一种意图上的约定而不仅仅是特定值的限制总结：如果一个函数的返回类型是void 那么：从语法上讲：函数可以返回undefined 至于显式返回还是隐式返回这无所谓
从语义上讲函数调用者不应关心函数返回的值也不应依赖返回值进行任何操作! 即使我们知道了它返回了undefined

Object（少用）

关于 Object 和 object 实际开发中用的相对较少因为范围太大了

object（小写） object （⼩写）的含义是：所有⾮原始类型，可存储：对象、函数、数组等，由于限制的范围⽐较宽泛，在实际开发中使⽤的相对较少。

在这里插入图片描述 Object（⼤写）官⽅描述：所有可以调用 Object 方法的类型（如toString）。简单记忆：除了 undefined 和 null 的任何值。由于限制的范围实在太大了！所以实际开发中使⽤频率极低。

声明对象类型

1.实际开发中：限制一般对象通常用以下形式在这里插入图片描述 2.索引签名：允许定义对象可以具有任意数量的属性，这些属性的键和类型是可变的，常用于：描述类型不确定的属性（具有动态属性的对象）

含义:除了这两个以外可以有任何一个key，只要key是字符串就可以且key所对应的值可以是任何的值在这里插入图片描述声明函数类型

声明数组类型

在这里插入图片描述

tuple

元组是一种特殊的数组类型可以存储固定数量的元素并且每个元素的类型是已知的且可以不同元组用于精确描述一组值的类型？表示可选元素在这里插入图片描述

enum（重要）

枚举（enum）可以定义一组命名常量它能增强代码的可读性也让代码更好维护

如下代码的功能是：根据调⽤ walk 时传⼊的不同参数，执行不同的逻辑，存在的问题是调用 w alk 时传参时没有任何提示，编码者很容易写错字符串内容；并且用于判断逻辑的 up 、 dow n 、 left 、 right 是连续且相关的⼀组值，那此时就特别适合使用枚举（ enum ）

（1）数字枚举

数字枚举⼀种最常⻅的枚举类型，其成员的值会⾃动递增，且数字枚举还具备反向映射的特点，在下⾯代码的打印中，不难发现：可以通过值来获取对应的枚举成员名称。在这里插入图片描述也可以指定枚举成员的初始值其后的成员值会自动递增使⽤数字枚举完成刚才 walk 函数中的逻辑，此时我们发现：代码更加直观易读，⽽且类型安全，同时也更易于维护

（2）字符串枚举

注意:字符串枚举没有反向映射枚举成员的值是字符串在这里插入图片描述

（3）常量枚举

官方描述：常量枚举是一种特殊的枚举类型它使用const关键字定义在编译时会内联避免产生一些额外的代码

何为编译时内联？（了解）所谓“内联”其实就是 TypeScript 在编译时，会将枚举成员引⽤替换为它们的实际值，⽽不是⽣成额外的枚举对象。这可以减少⽣成的 JavaScript 代码量，并提⾼运⾏时性能

type

type 可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更方便地进行类型复用和扩展

基本用法

类型别名使用 type 关键字定义， type 后跟类型名称，例如下面代码中 num 是类型别名。

联合类型（或）

联合类型是⼀种⾼级类型，它表示⼀个值可以是⼏种不同类型之⼀。

交叉类型（且）

在这里插入图片描述

一个特殊的情况

如下两段代码：代码1（正常）：在函数定义时，限制函数返回值为void 那么函数的返回值必须是空在这里插入图片描述代码2（特殊）使用类型声明限制函数返回值为 void 时， TypeScript 并不会严格要求函数返回空。为什么？是为了确保如下代码成立，我们知道 Array.prototype.push 的返回值是一个数字，⽽ Array.prototype.forEach 方法法期望其回调的返回类型是 void （即不用return）。