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

文章目录

枚举

联合类型

函数_基础

函数_参数说明?

类的概念

类的创建

---

枚举

枚举（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

联合类型

联合类型（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")

函数_基础

函数是 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
}

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

函数_参数说明?

函数的参数在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('');
?}
}

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

function reverse(x:number):number;
function reverse(x:string):string;
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('');
?}
}
const numReverse = reverse(123);
const stringReverse = reverse("Hello");

类的概念

虽然 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

类的创建

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

ES5类

基于原型的类创建

function People(name,age) { 
??// 属性
??this.name = name;
??this.age = age;
??// 方法;
??this.sayHello = function(){
????console.log("Hello");
?}
}
People.prototype.sayHi = function(){
??console.log("hi")
}
var p1 = new People("张三",20);

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");