TypeScript【枚举、联合类型函数_基础、函数_参数说明、类的概念、类的创建】(二)-全面详解（学习总结---从入门到深化）

绝地灬酷狼 2024-02-05 14:39 5阅读 0赞

### ![98eafcc26fb44d98be105631a17a7a64.gif][] ###

**文章目录**

枚举

联合类型

函数\_基础

函数\_参数说明

类的概念

类的创建

--------------------

### 枚举 ###

![716b3ccc33db487daa69d21083234d4d.png][]

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等

**枚举例子**  
枚举使用 **enum** 关键字来定义

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

枚举成员会被赋值为从 **0** 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

enum Days {Sun, Mon, Tue, Wed, Thu, Fri,Sat};
    console.log(Days["Sun"] === 0); // true
    console.log(Days["Mon"] === 1); // true
    console.log(Days["Tue"] === 2); // true
    console.log(Days["Sat"] === 6); // true
    console.log(Days[0] === "Sun"); // true
    console.log(Days[1] === "Mon"); // true
    console.log(Days[2] === "Tue"); // true
    console.log(Days[6] === "Sat"); // true

**手动赋值**

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
    console.log(Days["Sun"]); // 7
    console.log(Days[1]); // Mon

枚举类型提供的一个便利是你可以由枚举的值得到它的名字

enum Color { Red = 1, Green, Blue }
    let colorName: string = Color[2];
    console.log(colorName); // Green

###  ###

### 联合类型 ###

![2c29db2a126c469dbefcf74687ef6a3a.png][]

联合类型（Union Types）表示取值可以为多种类型中的一种  
当我们需要定义的数据并不确定是那种类型的时候，可以使用联合类型

var age:number | string = 20;
    age = "20岁"
    console.log(age)

甚至可以是更多种类型的联合

var age:number | string | boolean | [] = 20;
    age = "20岁"
    console.log(age)

**函数中的联合类型**  
联合类型其实最常用的场景就是在函数中

function
    info(age:number|string):number|string{
      return age;
    }
    info(20)
    info("20")

###  ###

### 函数\_基础 ###

![5a104997e8b14de88629e63d93cb9361.png][]

函数是 JavaScript 应用程序的基础。在 TypeScript 里函数仍然是主要的定义行为的地方

**常见函数定义形式**

function add(x, y) {
      return x + y;
    }
    let add = function(x, y) {
      return x + y;
    };

**TypeScript定义函数**

让我们为上面那个函数添加类型

function add(x:number, y:number):number {
      return x + y;
    }

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript 能够根据返回语句自动推断出返回值类型，因此我们通常省略它  
注意，**输入多余的（或者少于要求的）参数，是不被允许的**

function add(x:number, y:number):number {
      return x + y;
    }
    add(10,20,30) // 编译报错

**箭头函数**

const add = (x:number, y:number) =>{
      return x + y
    }

> **温馨提示**  
> 返回值一般会自行推断

###  ###

### 函数\_参数说明 ###

### ![b6870592e7ac4b13b5f9ef5675d174be.png][] ###

函数的参数在ES6中就有很大的改动了，在TypeScript中也依然适用

**可选参数**

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？  
我们用 **?** 表示可选的参数

const add = (x:number, y:number,z?:number) =>
    {
      return x + y
    }
    add(10,20)
    add(10,20,30)

> **温馨提示**  
> 可选参数必须接在必需参数后面，**可选参数后面不允许再出现必需参数了**

**参数默认值**  
在 ES6 中，我们允许给函数的参数添加默认值，**TypeScript 会将添加了默认值的参数识别为可选参数**

function info(name: string, age: number = 20)
    {
      return name + age
    }
    info("iwen")
    info("iwen",30)

此时就不受「可选参数必须接在必需参数后面」的限制了

**剩余参数**  
ES6 中，可以使用 **...rest** 的方式获取函数中的剩余参数（rest 参数）

function push(array:any[], ...items:any[]) {
      items.forEach(function(item) {
        array.push(item);
     });
      return array
    }
    let a: any[] = [];
    const currentArray = push(a, 1, 2, 3);

注意，rest 参数只能是最后一个参数

**重载**

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理

function reverse(x: number | string): number | string | void {
      if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
     } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
     }
    }

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串

###  ###

### 类的概念 ###

![d365d6e3893a4fc792848079461945a3.png][]

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍

**类（Class）**：定义了一件事物的抽象特点，包含它的属性和方法  
**对象（Object）**：类的实例，通过 new 生成  
**面向对象（OOP）的三大特性**：封装、继承、多态  
**封装（Encapsulation）：**将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改  
对象内部的数据  
**继承（Inheritance）：**子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性  
**多态（Polymorphism）**：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比  
如 Cat 和 Dog 都继承自 Animal ，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog ，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat  
**存取器（getter & setter）**：用以改变属性的读取和赋值行为  
**修饰符（Modifiers）**：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法  
**抽象类（Abstract Class）**：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现  
**接口（Interfaces）**：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

class Animal { 
      public name;
      constructor(name) {
        this.name = name;
     }
      sayHi() {
        return `My name is ${this.name}`;
     }
      get _name() {
        return 'Jack';
     }
      set _name(value) {
        console.log('setter: ' + value);
     }
    }
    let a = new Animal('Jack');
    class Cat extends Animal {
     constructor(name) {
      super(name); // 调用父类的constructor(name)
      console.log(this.name);
    }
     sayHi() {
      return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
    }
    }
    let c = new Cat('Tom'); // Tom
    console.log(c.sayHi()); // Meow, My name is Tom

###  ###

### 类的创建 ###

![443cbac6c7c24708b3292d31c36f6f9f.png][]

传统的 JavaScript 程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从  
ECMAScript 2015，也就是 ECMAScript 6 开始，JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行

**ES5类**

基于原型的类创建

**ES6类**  
基于 **class** 传统创建方式

class Animal {
      public name;
      constructor(name) {
        this.name = name;
     }
      sayHi() {
        return `My name is ${this.name}`;
     }
    }
    let a = new Animal('Jack');
    console.log(a.sayHi());

**TypeScript类**

class Greeter {
      greeting: string;
      constructor(message: string) {
        this.greeting = message;
     }
      greet() {
        return "Hello, " + this.greeting;
     }
    }
    let greeter = new Greeter("world");

[98eafcc26fb44d98be105631a17a7a64.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/046ca491f76440b18df0380e36abd649.png
[716b3ccc33db487daa69d21083234d4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4d8290d755404ba8bf9daf6d6e3f1122.png
[2c29db2a126c469dbefcf74687ef6a3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b87f92bb35324d7cb44a0f7b4c67d22f.png
[5a104997e8b14de88629e63d93cb9361.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/600c425ba1da4281bf3e34dbb808413e.png
[b6870592e7ac4b13b5f9ef5675d174be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e2201e83902447a38dc385b08c2b0d2f.png
[d365d6e3893a4fc792848079461945a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e47a4e9b9fd6466294db75a1c2af8b3a.png
[443cbac6c7c24708b3292d31c36f6f9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/5f70213eac5c4425ad493b21f138b5f3.png