Typescript类，泛型，各种类型工具

一、TypeScript 类

一个类可以包含以下几个模块：

• 1.属性
  • 1.1 类属性
  • 1.2 实例属性
• 2.构造函数（在python中叫初始化函数)
  该函数在类实例化时会被立即调用
• 3.方法（也是函数，不过不用写 关键字function的函数）

1.1 类的属性与方法

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

在 TypeScript 中，我们可以通过 Class 关键字来定义一个类：

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

那么成员属性与静态属性，成员方法与静态方法有什么区别呢？这里无需过多解释，我们直接看一下编译生成的 ES5 代码：

"use strict";
var Greeter =  (function () {
    function Greeter(message) {
      this.greeting = message;
    }
    
    Greeter.getClassName = function () {
      return "Class name is Greeter";
    };
    
    Greeter.prototype.greet = function () {
      return "Hello, " + this.greeting;
    };
    
    Greeter.cname = "Greeter";
    return Greeter;
}());
var greeter = new Greeter("world");

1.2 私有字段

在 TypeScript 3.8 版本就开始支持 ECMAScript 私有字段，使用方式如下：

class Person {
  #name: string;

  constructor(name: string) {
    this.#name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.#name}!`);
  }
}

let semlinker = new Person("Semlinker");

semlinker.#name;

与常规属性（甚至使用 private 修饰符声明的属性）不同，私有字段要牢记以下规则：

• 私有字段以 # 字符开头，有时我们称之为私有名称；
• 每个私有字段名称都唯一地限定于其包含的类；
• 不能在私有字段上使用 TypeScript 可访问性修饰符（如 public 或 private）；
• 私有字段不能在包含的类之外访问，甚至不能被检测到。

1.3 get 和 set 关键字

面向对象的封装性要求中，常需要我们对类的一些属性进行封装，避免外部直接操作属性，经常使用两个方法进行处理，Getter 方法用于获取属性的值，Setter 方法用户设置属性的值。在 Ts 中可以使用 get 和 set 关键字来定义这两个方法

class Student{
	private _name;
	constructor(name: string){
		this._name = name;
	}
	get name(){
		return this._name;
	}
	set name(name: string){
		this._name = name;
	}
}

// 此时实例对象我们可以这样对name属性进行处理
let obj = new Student("chen")
obj.name = "zhang"

1.4 类的继承

继承（Inheritance）是一种联结类与类的层次模型。指的是一个类（称为子类、子接口）继承另外的一个类（称为父类、父接口）的功能，并可以增加它自己的新功能的能力，继承是类与类或者接口与接口之间最常见的关系。

在 TypeScript 中，我们可以通过 extends 关键字来实现继承：

class Animal {
  name: string;
  
  constructor(theName: string) {
    this.name = theName;
  }
  
  move(Meters: number = 0) {
    console.log(`${this.name} moved ${Meters}m.`);
  }
}
class dog extends Animal {
  constructor(name: string) {
    super(name); 
  }
  
  move(Meters = 5) { 
    super.move(Meters);
  }
}

let sam = new dog("dog");
sam.move();

1.5 抽象类

使用 abstract 关键字声明的类，我们称之为抽象类。抽象类不能被实例化，因为它里面包含一个或多个抽象方法。所谓的抽象方法，是指不包含具体实现的方法：

abstract class Person {
  constructor(public name: string){}

  abstract say(words: string) :void;
}


const lolo = new Person(); //无法创建抽象类的实例

抽象类不能被直接实例化，我们只能实例化实现了所有抽象方法的子类。简单理解可以将它理解为一个模板类，其中可以定义一些未实现的方法，然后通过继承让其子类来实现这个 方法。具体如下所示：

abstract class Person {
  constructor(public name: string) {}

  abstract say(words: string): void;
}

class Developer extends Person {
  constructor(name: string) {
    super(name);
  }

  say(words: string): void {
    console.log(`${this.name} says ${words}`);
  }
}

1.6 类方法重载

在前面的章节，我们已经介绍了函数重载。对于类的方法来说，它也支持重载。比如，在以下示例中我们重载了 ProductService 类的 getProducts 成员方法：

class ProductService {
    getProducts(): void;
    getProducts(id: number): void;
    getProducts(id?: number) {
      if(typeof id === 'number') {
          console.log(`获取id为 ${id} 的产品信息`);
      } else {
          console.log(`获取所有的产品信息`);
      }  
    }
}

const productService = new ProductService();
productService.getProducts(666); 
productService.getProducts();

1.7 static

当类 中 的 方法 被 声明 为 static 时，其实例化 对象 不可 调用 该方法，只有 类 本身 ，以及 其子类 可以 调用。

class A {
	name:string;
	age:number;
	constructor(name:string,age:number){
		this.name = name;
		this.age = age;
	}
	eat(){
		console.log('测试');
	}
	static eat2(){
		console.log('测试2');
	}
}
let a = new A('zhangsan',8);
a.eat();//   '测试'
a.eat2();// error 

class B extends A {
	constructor(name:string,age:number){
		super(name,age);
	}
}
let  b = new B('lisi',9);
b.eat();// '测试'
b.eat2();// error
B.eat2();// '测试2' 

二、TypeScript 泛型

软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。

2.1 泛型语法

对于刚接触 TypeScript 泛型的读者来说，首次看到 <T> 语法会感到陌生。其实它没有什么特别，就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

参考上面的图片，当我们调用 identity<Number>(1) ，Number 类型就像参数 1 一样，它将在出现 T 的任何位置填充该类型。图中 <T> 内部的 T 被称为类型变量，它是我们希望传递给 identity 函数的类型占位符，同时它被分配给 value 参数用来代替它的类型：此时 T 充当的是类型，而不是特定的 Number 类型。

其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

• K（Key）：表示对象中的键类型；
• V（Value）：表示对象中的值类型；
• E（Element）：表示元素类型。

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量 U，用于扩展我们定义的 identity 函数：

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
}

console.log(identity<Number, string>(68, "Semlinker"));

除了为类型变量显式设定值之外，一种更常见的做法是使编译器自动选择这些类型，从而使代码更简洁。我们可以完全省略尖括号，比如：

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
}

console.log(identity(68, "Semlinker"));

在使用泛型的时候 类型推论显得尤为重要

2.2 泛型接口

interface GenericIdentityFn<T> {
  (arg: T): T;
}

2.3 泛型类

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

2.4 泛型工具类型(很重要)

1.typeof

在 TypeScript 中，typeof 操作符可以用来获取一个变量声明或对象的类型。

interface Person {
  name: string;
  age: number;
}

const sem: Person = { name: 'semlinker', age: 33 };
type Sem= typeof sem; 

function toArray(x: number): Array<number> {
  return [x];
}

type Func = typeof toArray;

2.keyof

keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。

type Point = { x: number; y: number };
type P = keyof Point;
// type P = "x" | "y"

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;
// type A = number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;
// type M = string | number 
//注意 JavaScript 对象的属性名会被强制转为一个字符串

3.in

in 用来遍历枚举类型： 注意不能用于interface

type Keys = "a" | "b" | "c"

type Obj =  {
  [p in Keys]: any
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nik1Y1lD-1668506733098)(2022-11-02-18-00-39.png)]

4.infer

在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。

type ListType<V> = V extends { list?: infer K } ? K : V

以上代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型，简单说就是用它取到函数返回值的类型方便之后使用。 上述简单来说K 接收 list的返回类型 如果V中有可选list 那么V的类型就是K 也就是list 否则V的类型是它本身

5.extends

有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

loggingIdentity(3);

这时我们需要传入符合约束类型的值，必须包含必须的属性：

loggingIdentity({length: 10, value: 3});

6 Partial

Partial<T> 的作用就是将某个类型里的属性全部变为可选项 ?。

定义：

type Partial<T> = {
  [P in keyof T]?: T[P];
};

在以上代码中，首先通过 keyof T 拿到 T 的所有属性名，然后使用 in 进行遍历，将值赋给 P，最后通过 T[P] 取得相应的属性值。中间的 ? 号，用于将所有属性变为可选。

示例：

interface Todo {
  key: string;
  value: string;
}
//使用Partial的情况就变成了
Partial<Todo> 
//相当于 
interface Todo {
  key?: string;
  value?: string;
}
 

7 Readonly

用来构造一个类型，将Type的所有属性都设置为readonly（只读） 无法修改

interface Props {
    id: string 
} 
type Type= Readonly<Props>
let a={
  id:1
}
a.id=3  //ERROR 

8 Pick<Type, Keys>

从Type中选择一组属性来构造新类型

interface Props {
   id: string
   title: string
   children: number[]
}

type PickProps = Pick<Props, 'id'|'title'>

1 Pick工具类型有两个类型变量：1、表示选择谁的属性 2、表示选择哪几个属性。
2 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
3 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
4 构造出来的新类型PickProps，只有id和title两个属性类型。

9 Record<Keys,Type>

构造一个对象类型，属性键为Keys，属性类型为Type。

export default interface CurrentUser {
  /** 权限对象 */
  roles: Record<string, boolean>
}
// .roles 对象可以字符串为keys  但是值必须是boolean类型

ring
children: number[]
}

type PickProps = Pick<Props, ‘id’|‘title’>

> 1 Pick工具类型有两个类型变量：1、表示选择谁的属性 2、表示选择哪几个属性。
> 2 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
> 3 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
> 4 构造出来的新类型PickProps，只有id和title两个属性类型。

##### 9  Record<Keys,Type>
构造一个对象类型，属性键为Keys，属性类型为Type。
```typescript
export default interface CurrentUser {
 /** 权限对象 */
 roles: Record<string, boolean>
}
// .roles 对象可以字符串为keys  但是值必须是boolean类型