TypeScript入门笔记（三）

一、TypeScript函数

1、TypeScript函数类型

• 在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递）。
• 那么在使用函数的过程中，函数是否也可以有自己的类型呢？
• 我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；
  
  

2、TypeScript函数类型解析

• 在上面的语法中 (num1: number, num2: number) => number，代表的就是一个函数类型：
• 接收两个参数的函数：num1和num2，并且都是number类型；
• 并且这个函数是有返回值的，所以是number；
• 在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的：

3、参数的可选类型

• 我们可以指定某个参数是可选的：
  
• 可选类型需要在必传参数的后面：
  
• 这个时候这个参数y依然是有类型的，它是什么类型呢？
  number | undefined

4、默认参数

• 从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：
  
• 这个时候x的类型其实是 undefined 和 number 类型的联合

5、剩余参数

• 从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中
  

6、可推导的this类型

• TypeScript是如何处理this呢？我们先来看一个例子：
  
• 上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：
• TypeScript认为函数 eating有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。

7、不确定的this类型

• 某些情况，我们并不知道this到底是什么？
  

• 这段代码如果在js中运行是没问题的，但是在typescript中运行会报错的：
  

• 这里我们再次强调一下，TypeScript进行类型检测的目的是让我们的代码更加的安全；

• 所以这里对于 eating的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；

• 但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来调用函数；

那么如何修改才能在typescript中运行

8、函数的重载

• 在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，应该如何编写呢？
• 我们可能会这样来编写，但是其实是错误的：
  
• 那么这个代码应该如何去编写呢？
• 先来看一种不太好的写法
  
• 在TypeScript中，我们可以去编写不同的重载签名（overload signatures）来表示函数可以以不同的方式进行调用；
• 一般是编写两个或者以上的重载签名，再去编写一个通用的函数以及实现；
  
  一个案例
• 我们现在有一个需求：定义一个函数，可以传入字符串或者数组，获取它们的长度。
• 方案一：使用联合类型来实现；
• 方案二：实现函数重载来实现
  

二、类

1、认识类的使用

• 在早期的JavaScript开发中（ES5）我们需要通过函数和原型链来实现类和继承，从ES6开始，引入了class关键字，可以更加方便的定义和使用类。
• TypeScript作为JavaScript的超集，也是支持使用class关键字的，并且还可以对类的属性和方法等进行静态类型检测。
• 实际上在JavaScript的开发过程中，我们更加习惯于函数式编程：
• 比如React开发中，目前更多使用的函数组件以及结合Hook的开发模式；
• 比如在Vue3开发中，目前也更加推崇使用 Composition API；
• 但是在封装某些业务的时候，类具有更强大封装性，所以我们也需要掌握它们。
• 类的定义我们通常会使用class关键字：
• 在面向对象的世界里，任何事物都可以使用类的结构来描述；
• 类中包含特有的属性和方法；

2、类的定义

• 我们来定义一个Person类：
• 使用class关键字来定义一个类；
• 我们可以声明一些类的属性：在类的内部声明类的属性以及对应的类型
• 如果类型没有声明，那么它们默认是any的；
• 我们也可以给属性设置初始化值；
• 在默认的strictPropertyInitialization模式下面我们的属性是必须初始化的，如果没有初始化，那么编译时就会报错；
• 如果我们在strictPropertyInitialization模式下确实不希望给属性初始化，可以使用 name!: string语法；
• 类可以有自己的构造函数constructor，当我们通过new关键字创建一个实例时，构造函数会被调用；
• 构造函数不需要返回任何值，默认返回当前创建出来的实例；
• 类中可以有自己的函数，定义的函数称之为方法；
  

3、类的继承

• 面向对象的其中一大特性就是继承，继承不仅仅可以减少我们的代码量，也是多态的使用前提。
• 我们使用extends关键字来实现继承，子类中使用super来访问父类。
• 我们来看一下Student类继承自Person：
• Student类可以有自己的属性和方法，并且会继承Person的属性和方法；
• 在构造函数中，我们可以通过super来调用父类的构造方法，对父类中的属性进行初始化；
  
  

4、类的多态

5、类的成员修饰符

• 在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected
• public 修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的；
• private 修饰的是仅在同一类中可见、私有的属性或方法；
• protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法；
• public是默认的修饰符，也是可以直接访问的，我们这里来演示一下protected和private
  
  

6、只读属性readonly

• 如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用，那么可以使用readonly：
  

7、getters/setters

• 在前面一些私有属性我们是不能直接访问的，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们可以使用存取器。
  

8、静态成员

• 前面我们在类中定义的成员和方法都属于对象级别的, 在开发中, 我们有时候也需要定义类级别的成员和方法。
• 在TypeScript中通过关键字static来定义：
  

9、抽象类abstract

• 我们知道，继承是多态使用的前提。
• 所以在定义很多通用的调用接口时, 我们通常会让调用者传入父类，通过多态来实现更加灵活的调用方式。
• 但是，父类本身可能并不需要对某些方法进行具体的实现，所以父类中定义的方法,，我们可以定义为抽象方法。
• 什么是 抽象方法? 在TypeScript中没有具体实现的方法(没有方法体)，就是抽象方法。
• 抽象方法，必须存在于抽象类中；
• 抽象类是使用abstract声明的类；
• 抽象类有如下的特点：
• 抽象类是不能被实例化的（也就是不能通过new创建）
• 抽象方法必须被子类实现，否则该类必须是一个抽象类；
  

10、类的类型

• 类本身也是可以作为一种数据类型的