这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

什么是TypeScript？

TypeScript 是一种给 JavaScript 添加特性的语言扩展，它扩展了 JavaScript 的语法。和 JavaScript 一样，TypeScript 是一种弱类型语言，不同于 Js 是一个动态类型的语言，在执行阶段才去确定类型的匹配，Ts 是作为静态类型在执行之前就会对类型进行检查。作为一个静态类型的语言，TypeScript 基于语法解析 TSDoc,能够增强代码的可读性，并且其可以在编译阶段暴露大部分的错误，增强代码的可维护性，因此 TypeScript 可以在多人合作的大型项目中，获得更好的稳定性与开发效率。此外 TypeScript 还包含兼容所有 Js 特性，支持与 Js 的共存，并且支持渐进性的引入与升级。

TypeScript基础语法

基础数据类型

我们在学习 JavaScript 时，会接触到许多基础数据类型，不同于 JaveScript ,TypeScript 在声明变量时还会在变量名的后面接上数据类型的名称。 ts基础数据类型.png

对象类型

不同于基础数据类型具有固定的类型名称，对于对象数据类型，我们一般都采用自定义的类型。下图中我们使用关键字 interface 定义了一个名为 IBytedancer 的对象类型，类似于一个对象的定义，但是其内部的 key 没有具体的值，而是用数据类型来定义。我们还能够使用关键字readonly对类型内部的 key 添加只读属性,此时在外部无法修改只读属性的内容。我们还可以定义可选属性，在创建对象时，可选属性可以不存在。通过定义任意属性，我们可以在任意属性的标注下添加任意属性。 ts对象类型.png

函数类型

为函数类型的声明有两种方式，第一种是直接在函数上进行类型的补充，第二种是给函数变量赋值一个类型的声明，类型声明一般是对于函数的入参和出参进行补充。 ts函数类型.png

函数重载

函数重载用于实现不同参数输入并且对应不同参数输出的函数，在前面定义多个重载签名，一个实现签名，一个函数体构造，重载签名主要是精确显示函数的输入输出，实现签名对所有的输入输出类型进行全量定义，函数体就是整个整个函数实现的全部逻辑。每一个重载的方法都必须有一个参数类型列表。 ts函数重载.png

数组类型

数组其实是一个特殊的对象，我们可以通过多种方式进行数组类型的定义。 ts数组类型.png

补充类型

TypeScript 还对 JavaScript 的类型进行了一些补充，比如无返回值的void类型，可以是任意类型的 any,支持枚举值到枚举名的正、反向映射的枚举类型。 ts补充类型.png

泛型

泛型是不预先指定，在使用时根据传入的值的属性才确定类型的一种类型，一般在我们不确定要接收的类型时使用。 ts泛型.png

TypeScript高级数据类型

联合/交叉类型

当我们为列表编写类型时，如果列表中的数据比较多，那么我们编写类型的过程会非常繁琐，而且具有大量的重复性工作，使得效率降低。我们可以使用联合/交叉类型来改变这一问题。联合类型，即 IA | IB ，表示一个值可以是几种类型之一；交叉类型，即IA & IB,表示多种类型叠加在一起形成一种类型。

联合类型.png

类型保护与类型守卫

在 TypeScript 中，当我们访问一个联合类型时，出于对程序安全的保护，我们只能够访问联合类型中的交集部分，即对于联合类型 IA | IB ，若IA中不存在属性a 则联合类型 IA | IB 中也不存在属性 a。为了解决这个问题，我们可以通过类型守卫的方式进行改造。

interface IA { a: 1, a1: 2}

interface IB { b: 1, b1: 2}

// 类型守卫：定义一个函数，它的返回值是一个类型谓词，作用范围为子作用域
function getIsIA(arg: IA | IB): arg is IA {
  return !!(arg as IA).a;
}

function log2(arg: IA | IB){
  if(getIsIA(arg)){
    console.log(arg.a1)
  }else{
    console.log(arg.b1)
  }
}

高级类型

我们在对一些函数类型进行实现时，我们采用一些基础类型有时会导致类型的实现变得非常的繁琐，此时我们可以使用高级类型来实现，比如使用泛型来进行限制，或者使用一些关键字来匹配和推导取值的类型。

高级类型.png

函数返回值类型

对于任意一个函数，都有返回值，但是返回值的类型在一开始是不确定的，只有当我们得到放回值时我们才能得到它的类型。在 TypeScript 中，我们可以使用泛型和关键字来表达函数的返回值。函数返回值类型.png

TypeScript工程应用

TypeScript 的工程应用一般分为两部分，即 WEB 和 node.js，在 WEB 应用中我们一般结合 webpack 来应用，在 node 的应用中则依赖 TSC 进行编译，使其转化为 js 文件。

WEB应用.png

node应用.png

TypeScript入门 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天