TypeScript-面向对象(接口、类、对象、泛型)

TypeScript 的接口与类学习总结

1. 接口是什么?

接口(interface)定义了一组抽象方法,即只规定了方法的名称和参数,而不提供实现细节。类可以通过实现接口来定义这些方法的具体实现。

接口是为了定义一种契约,让其他类可以根据这个契约实现特定的功能。TypeScript 的接口不会被编译为 JavaScript,它仅在开发和编译阶段起作用,帮助进行类型检查。

2. 接口的使用
  • 接口定义

    interface IPerson {
        firstName: string;
        lastName: string;
        sayHi: () => string;
    }
    

    这个接口规定了对象 IPerson 必须有 firstNamelastName 属性,并实现一个 sayHi 方法。

  • 实现接口

    var customer: IPerson = {
        firstName: "Tom",
        lastName: "Hanks",
        sayHi: (): string => { return "Hi there" }
    };
    console.log(customer.sayHi()); // 输出: Hi there
    
3. 联合类型与接口

接口中的属性可以使用联合类型(多个类型的组合),使得接口更加灵活。例如:

interface RunOptions {
    program: string;
    commandline: string[] | string | (() => string);
}

这表示 commandline 属性可以是字符串、字符串数组或一个返回字符串的函数。

4. 接口与数组

接口可以定义数组的索引类型,例如:

interface NameList {
    [index: number]: string;
}

此接口规定数组的索引是数字,元素必须是字符串。

5. 接口继承

接口可以继承其他接口,甚至多个接口:

  • 单接口继承
    interface Person {
        age: number;
    }
    
    interface Musician extends Person {
        instrument: string;
    }
    
  • 多接口继承
    interface IParent1 {
        v1: number;
    }
    
    interface IParent2 {
        v2: number;
    }
    
    interface Child extends IParent1, IParent2 {}
    
6. TypeScript 类
  • 类定义与实例化

    class Car {
        engine: string;
        constructor(engine: string) {
            this.engine = engine;
        }
        disp(): void {
            console.log("发动机为: " + this.engine);
        }
    }
    
    let myCar = new Car("V8");
    myCar.disp(); // 输出: 发动机为: V8
    
  • 类的继承
    TypeScript 支持继承(extends):

    class Shape {
        area: number;
        constructor(a: number) {
            this.area = a;
        }
    }
    
    class Circle extends Shape {
        disp(): void {
            console.log("圆的面积: " + this.area);
        }
    }
    
    let myCircle = new Circle(223);
    myCircle.disp(); // 输出: 圆的面积: 223
    
  • 静态属性与方法
    静态成员可以通过类直接调用:

    class StaticMem {
        static num: number;
        static disp(): void {
            console.log("num 值为: " + StaticMem.num);
        }
    }
    StaticMem.num = 12;
    StaticMem.disp(); // 输出: num 值为: 12
    
7. 泛型

泛型是一种设计模式,允许我们编写可重用类型安全的代码。它允许函数、类、接口可以处理不同类型的数据。

  • 泛型函数

    function identity<T>(arg: T): T {
        return arg;
    }
    
    let result = identity<string>("Hello");
    console.log(result); // 输出: Hello
    
  • 泛型类

    class Box<T> {
        private value: T;
        constructor(value: T) {
            this.value = value;
        }
        getValue(): T {
            return this.value;
        }
    }
    
    let stringBox = new Box<string>("TypeScript");
    console.log(stringBox.getValue()); // 输出: TypeScript
    
  • 泛型约束
    可以通过约束限制泛型的类型:

    interface Lengthwise {
        length: number;
    }
    
    function logLength<T extends Lengthwise>(arg: T): void {
        console.log(arg.length);
    }
    
    logLength("hello"); // 输出: 5
    
8. 总结:接口与类的区别
  • 接口是定义对象的结构,而则是实现。
  • 接口可以被多个类实现,具有更大的灵活性;而只能继承自另一个类。
  • 接口不能直接实例化,它是一个规范;而可以创建对象。

TypeScript 通过接口、类和泛型等特性,使得代码更加灵活、安全,并且在开发阶段提供强大的类型检查功能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值