TypeScript 类、泛型实践记录 | 青训营笔记

会会会
711 阅读13分钟

class 类

根据TS中的类型推论，可以知道Person类的实例对象p的类型是Person。

TS中的class，不仅提供了class的语法功能，也作为一种类型存在。

class Person {}
const p = new Person()

image.png

实例属性初始化

两种方法：

  1. 声明成员age，类型为number（没有初始值)。
  2. 声明成员gender，并设置初始值，此时，可省略类型注解（TS类型推论为string类型)。
class Person {
    age: number
    gender = '男'
    //gender: string ='男'
}

构造函数

  1. 成员初始化（比如，age: number)后，才可以通过this.age来访问实例成员。
  2. 需要为构造函数指定类型注解，否则会被隐式推断为any;构造函数不需要返回值类型。
class Person {
    age: number
    gender: string
    constructor( age: number, gender: string) {
        this.age = age
        this.gender = gender
    }
}

实例方法

方法的类型注解（参数和返回值）与函数用法相同。

class Point {
    × = 10
    y = 10
    scalen(n: number): void {
        this.x *= n
        this.y *= n
    }
}

类继承

类继承的两种方式:

  1. extends（继承父类）
  2. implements（实现接口）。

说明: JS中只有extends，而implements是TS提供的。

extends（继承父类）

class Animal {
    move() { console.log('Moving along !') }
    class Dog extends Animal {
        bark() { console.log('汪!') }
    }
    const dog = new Dogo()
}

implements（实现接口）

interface Singable {
    sing(): void
}
class Person implements Singable {
    sing() {
        console.log( '唱歌')
    }
}

类成员可见性

类成员可见性: 可以使用TS来控制class的方法或属性对于class外的代码是否可见。

可见性修饰符包括:

  1. public (公有的）
  2. protected(受保护的)
  3. private(私有的)。

public (公有的）

表示公有的、公开的，公有成员可以被任何地方访问，默认可见性。

class Animal {
    public move() {
        console. log('Moving along!')
    }
}

protected(受保护的)

表示受保护的，仅对其声明所在类和子类中（非实例对象）可见。

class Animal {
    protected move() { console.log('Moving along!') }
}

class Dog extends Animal {
    bark() {
        console.log('汪!')
        this.move()
    }
}

在类属性或方法前面添加protected关键字，来修饰该属性或方法是受保护的。

在子类的方法内部可以通过this来访问父类中受保护的成员，但是，对实例不可见!

private(私有的)

表示私有的，只在当前类中可见，对实例对象以及子类也是不可见的。

class Animal {
    private move() { console.log('Moving along!') }
    walk() {
        this.move()
    }
}

在类属性或方法前面添加private关键字，来修饰该属性或方法是私有的。

私有的属性或方法只在当前类中可见，对子类和实例对象也都是不可见的!

readonly (只读修饰符)

表示只读，用来防止在构造函数之外对属性进行赋值。

class Person {
    readonly age: number = 18
    constructor(age: number) {
        this.age = age
    }
}

使用readonly关键字修饰该属性是只读的，注意只能修饰属性不能修饰方法。

注意: 属性age后面的类型注解（比如，此处的number）。如果不加，则age 的类型为18（字面量类型)。

cLass Person {
    //只读属性
    readonly age = 18 //当前age类型为字面量类型 18
    constructor(age: number) //当你将一个为number类型的变量age复制给字面量类型的变量的时，就会报错
        this.age = age
    }
}

image.png

接口或者表示的对象类型，也可以使用readonly。

interface IPerson {
    readonly name: string
}

let obj: IPerson = {
    name : 'jack'
}

//报错
obj.name = 'rose'

image.png

let obj: { readonly name: string } = {
    name: 'jack'
}

//报错
obj.name = "rose'

image.png

类型兼容性

两种类型系统: StructuralType System(结构化类型系统）Nominal Type System(标明类型系统)。

TS采用的是结构化类型系统，也叫做duck typing (鸭子类型），类型检查关注的是值所具有的形状。

class

也就是说，在结构类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型。

class Point { x: number; y: number }
class Point2D { x: number; y: number }
const p: Point = new Point2D()

Point和 Point2D是两个名称不同的类。

变量p的类型被显示标注为Point类型，但是，它的值却是Point2D的实例，并且没有类型错误。

因为TS是结构化类型系统，只检查Point和Point2D的结构是否相同（相同，都具有x和y两个属性，属性类型也相同)。

但是，如果在Nominal Type System中(比如，C#、Java等)，它们是不同的类，类型无法兼容。

注意:在结构化类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型，这种说法并不准确。

更准确的说法: 对于对象类型来说， y的成员至少与x相同，则×兼容y(成员多的可以赋值给少的)。

class Point { x: number; y: number }
class Point3D { x: number; y: number; z: number }
const p: Point = new Point3D()

Point3D的成员至少与Point相同，则 Point兼容Point3D。所以，成员多的Point3D可以赋值给成员少的Point。

除了class 之外，TS中的其他类型也存在相互兼容的情况，包括: 接口兼容性 函数兼容性等。

接口兼容性

接口之间的兼容性，类似于class。并且，class和 interface之间也可以兼容。

interface Point { x: number; y: number }
interface Point2D { x: number; y: number }
let p1: Point
let p2: Point2D = p1
interface Point3D { x: number; y: number; z: number }
let p3: Point3D
p2 = p3

interface Point2D { x: number; y: number }
class Point3D { x: number; y: number; z: number }
let p3: Point2D = new Point3D()

函数兼容性

函数之间兼容性比较复杂，需要考虑:

  1. 参数个数
  2. 参数类型
  3. 返回值类型。

参数个数

参数多的兼容参数少的（或者说，参数少的可以赋值给多的)。

type F1 = (a: number) => void
type F2 = (a: number，b: number) => void
let f1: F1
let f2: F2 =f1

参数少的可以赋值给参数多的，所以，f1可以赋值给f2。

数组forEach方法的第一个参数是回调函数，该示例中类型为: (value:string, index: number, array: string[]) => void。

在JS中省略用不到的函数参数实际上是很常见的，这样的使用方式，促成了TS中函数类型之间的兼容性。

并且因为回调函数是有类型的，所以，TS会自动推导出参数item、index、array的类型。

参数类型

相同位置的参数类型要相同（原始类型）或兼容（对象类型)。

type F1 = (a: number) => string
type F2 = (a: number) => string
let f1: F1
let f2: F2 =f1

interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }

type F2 = (p: Point2D) => void
type F3 = (p: Point3D) => void

let f2: F2
let f3: F3 =f2

//报错，看注意
f2 = f3

注意，此处与前面讲到的接口兼容性冲突。

技巧∶将对象拆开，把每个属性看做一个个参数，则，参数少的（f2）可以赋值给参数多的(f3)

返回值类型

只关注返回值类型本身即可:

如果返回值类型是原始类型，此时两个类型要相同，比如，类型F5和F6。

type F5 = () => string
type F6 = () => string

let f5: F5
let f6: F6 = f5

如果返回值类型是对象类型，此时成员多的可以赋值给成员少的，比如，类型F7和F8。

type F7 =() => { name: string }
type F8 =() => { name: string; age: number }

let f7: F7
let f8: F8
f7 = f8

交叉类型

功能类似于接口继承（extends)，用于组合多个类型为一个类型（常用于对象类型)。

interface Person { name: string }
interface Contact { phone: string }
type PersonDetail = Person & Contactlet 
obj: PersonDetail = {
    name: 'jack' ,
    phone: '133...'
}

使用交叉类型后，新的类型PersonDetail就同时具备了Person和Contact的所有属性类型。

相当于

type PersonDetail = { name: string; phone: string }

交叉类型（&）和接口继承（ extends ）的对比

  • 相同点:都可以实现对象类型的组合。

  • 不同点:两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同。

interface A {
    fn: (value: number) => string
}
//会报错，方法冲突了
interface B extends A {
    fn: (value: string) => string
}

image.png

接口继承会报错（类型不兼容）

interface A {
    fn: (value: number) => string
}
interface B {
    fn: (value: string) => string
}
type C = A & B

交叉类型可以理解成这样

fn: (value: string | number) =>string

泛型和 keyof

基础使用

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于:函数、接口、class中。

需求: 创建一个id函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）

function id(value: number) : number { return value }

比如，id(10)调用以上函数就会直接返回10本身。但是，该函数只接收数值类型，无法用于其他类型。

为了能让函数能够接受任意类型，可以将参数类型修改为any。但是，这样就失去了TS的类型保护，类型不安全。

function id(value: any): any { return value }

泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。

实际上，在C#和Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一。

创建泛型函数

function id<Type>(value: Type): Type { return value }

语法:

  • 在函数名称的后面添加<>（尖括号)，尖括号中添加类型变量，比如此处的Type。

  • 类型变量Type，是一种特殊类型的变量，它处理类型而不是值。

  • 该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定)

  • 因为Type是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。

  • 类型变量Type，可以是任意合法的变量名称。

调用泛型函数

const num = id<number>(10)
const str = id<string>('a')

语法:在函数名称的后面添加<>(尖括号)，尖括号中指定具体的类型，比如，此处的number。

当传入类型number后，这个类型就会被函数声明时指定的类型变量Type捕获到。

此时，Type的类型就是number，所以，函数id参数和返回值的类型也都是number。

简化调用泛型函数

在调用泛型函数时，可以省略<类型>来简化泛型函数的调用。

let num = id(10)

此时，TS内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量Type的类型。

比如，传入实参10，TS 会自动推断出变量num的类型number，并作为Type的类型。

当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数。

泛型约束

默认情况下，泛型函数的类型变量Type可以代表多个类型，这导致无法访问任何属性。

比如，id('a')调用函数时获取参数的长度:

function id<Type>(value: Type): Type {
    console.log(value.length)
    return value
}

image.png

解释: Type可以代表任意类型，无法保证一定存在length属性，比如number类型就没有length。

此时，就需要为泛型添加约束来收缩类型（缩窄类型取值范围)。

主要有以下两种方式:

  1. 指定更加具体的类型

将类型修改为Type[](Type类型的数组)，因为只要是数组就一定存在length属性，因此就可以访问了。

function id<Type>(value: Type[]): Type[] {
    console.log(value.length)
    return value
}
  1. 添加约束。
interface ILength { length: number }
function id<Type extends ILength>(value: Type): Type {
    console.log(value.length)
    return value
}

创建描述约束的接口ILength，该接口要求提供length属性。

通过extends关键字使用该接口，为泛型（类型变量)添加约束。

该约束表示:传入的类型必须具有length属性。

多个泛型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束（比如，第二个类型变量受第一个类型变量约束)。

比如，创建一个函数来获取对象中属性的值:

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    return obj[key]
}
let person = { name: 'jack' , age: 18 }
getProp(person，'name')

添加了第二个类型变量Key，两个类型变量之间使用(,)逗号分隔。

keyof 关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型。

本示例中 keyof Type 实际上获取的是person对象所有键的联合类型，也就是: 'name'l 'age'。

类型变量Key受Type约束，可以理解为: Key只能是Type 所有键中的任意一个，或者说只能访问对象中存在的属性。

泛型接口

接口也可以配合泛型来使用，以增加其灵活性，增强其复用性。

interface IdFunc<Type> {
    id: (value: Type）) =>Type
    ids: () => Type[]
}

let obj: IdFunc<number> = {
    id(value) { return value },
    ids( { return [1，3，5] }
}

在接口名称的后面添加<类型变量>，那么，这个接口就变成了泛型接口。

接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。

使用泛型接口时，需要显式指定具体的类型（比如，此处的IdFunc<number>)。

此时，id方法的参数和返回值类型都是number; ids方法的返回值类型是number[]。

泛型类

类似于泛型接口，在class名称后面添加<类型变量>，这个类就变成了泛型类。

在创建class实例时，在类名后面通过<类型>来指定明确的类型。

class minClass2<T>{
    public list:T[] = [];

    add(value:T): void{
        this.list.push(value);
    }

    minNumber(): T{
        var minNum = this.list[0];

        for (var i = 0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }

        return minNum;
    }
}

//调用泛型类
//实例化类  并且制定了类的T代表的类型是number
var m1 = new minClass2<number>();
m1.add(1)
m1.add(2)
m1.add(3)
console.log(m1.minNumber()); //1


//实例化类  并且制定了类的T代表的类型是string
var m2 = new minClass2<string>();
m2.add('a')
m2.add('b')
m2.add('c')
console.log(m2.minNumber());  //a

泛型工具类型

Partial

Partial<Type>用来构造（创建）一个类型，将Type的所有属性设置为可选。

interface Props {
    id: string
    children: number[]
}
type PartialProps = Partial<Props>

构造出来的新类型Partialprops结构和Props相同，但所有属性都变为可选的。

但是并没有改变原来的类型，而是创造了一个新的类型。

Readonly

Readonly<Type>用来构造一个类型，将Type的所有属性都设置为readonly(只读)。

interface Props {
    id: string
    children: number[]
}
type ReadonlyProps = Readonly<Props>

构造出来的新类型ReadonlyProps结构和Props相同，但所有属性都变为只读的。

let props: ReadonlyProps = { id: '1', children: [] }

//报错
props.id = '2'

image.png

当我们想重新给id属性赋值时，就会报错，无法分配到"id"，因为它是只读属性。

Pick

Pick<Type,Keys>从 Type中选择一组属性来构造新类型。

interface Props {
    id: string
    title: string
    children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

Omit

Omit 与 Pick 作用相似，只不过 Omit 是：以一个类型为基础支持剔除某些属性，然后返回一个新类型。

type Person = {
    name: string;
    age: string;
    location: string;
};

type PersonWithoutLocation = Omit<Person, 'location'>;

Record

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

type RecordObj = Record<'a' | 'b' | 'c', string[]>
let obj: RecordObj = {
    a: ['1']，
    b: ['2']，
    c: ['3']
}

索引签名类型

绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型。

使用场景：当无法确定对象中有哪些属性（或者说对象中可以出现任意多个属性)，此时，就用到索引签名类型了。

interface AnyObject {
    [key: string]: number
}

let obj: AnyObject = {
    a: 1,
    b: 2,
}

使用[key: string]来约束该接口中允许出现的属性名称。表示只要是string类型的属性名称，都可以出现在对象中。

这样，对象obj中就可以出现任意多个属性（比如，a、b等）。

key只是一个占位符，可以换成任意合法的变量名称。

隐藏的前置知识∶JS中对象({})的键是string类型的。

在JS中数组是一类特殊的对象，特殊在数组的键（索引）是数值类型。

并且，数组也可以出现任意多个元素。所以，在数组对应的泛型接口中，也用到了索引签名类型

interface MyArray<T> {
    [n: number]: T
}
let arr: MyArray<number> = [1，3，5]

MyArray接口模拟原生的数组接口，并使用[n: number]来作为索引签名类型。

该索引签名类型表示:只要是number类型的键（索引）都可以出现在数组中，或者说数组中可以有任意多个元素。

同时也符合数组索引是number类型这一前提。

Z7QR[GM5_X75}X859H`XW]M.png

avatar
文章
阅读
粉丝