跟鲁迅重学 TypeScript | (四)面向对象之接口、类、对象、泛型

面向对象编程犹如德先生与赛先生的合作：抽象为其灵魂，封装护其身，继承承载传统，多态展现新生，四者交融，方能构建理想之境。

1. 接口
   接口者，乃是一群方法的抽象宣言，犹如风中飘荡的旗帜，呼喊着特征的集合。这些方法，虽无实体，然却需由具体的类来承载，方可生动展现其存在。第三者，倘若欲与之交互，必需依循这一系列的抽象法则，以便具体类得以施展其技艺。然则，接口不可转为 JavaScript，唯独为 TypeScript 之部分。

接口通过 interface 关键词定义：

interface interface_name { 
}

如：

// 接口通过 interface 关键词定义
interface IPerson {
    firstName: string
    lastName: string
    sayHi: () => string
}

const customer: IPerson = {
    firstName: 'Qi',
    lastName: 'Hu',
    sayHi() {
        return "Hello, TS!"
    }
}
console.log("customer", customer)
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())

联合类型与接口：在接口之中，联合类型可随意行走，如同水波荡漾。

// 联合类型 （注意 commandline 的类型）
interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串，像一句简单的问候
let options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组，像一首诗的两行
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式，像一个小小的故事
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
const fn:any = options.commandline; 
console.log(fn());

接口与数组：接口中，索引与元素之类型各自独立，犹如百花齐放。

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

const list2: namelist = ["Huawei", "Mi", "Taobao"];
console.log(list2)

接口继承：接口之继承，仿佛世代相承，强大而深邃。TypeScript 允许多重继承，如同一棵树根深叶茂：

interface Person { 
   age: number; 
} 

interface Musician extends Person { 
   instrument: string; 
} 

const drummer = <Musician>{}; 
drummer.age = 27; 
drummer.instrument = "Drums"; 
console.log("年龄: " + drummer.age); 
console.log("喜欢的乐器: " + drummer.instrument);

更多接口相关代码点击体验https://www.typescriptlang.org/zh/play/

2. 类

TypeScript者，面向对象之 JavaScript，犹如人心所向，众生相聚：

class Car { 
    engine: string; 

    constructor(engine: string) { 
        this.engine = engine; 
    }  

    disp(): void { 
        console.log("发动机为 : " + this.engine); 
    } 
}

创建实例化对象：

const obj = new Car("Engine 1");
console.log("读取发动机型号 : " + obj.engine);  
obj.disp();

继承与重写：在这复杂的继承之中，子类如花绽放，父类之影犹存：

class PrinterClass { 
   doPrint(): void { 
      console.log("父类的 doPrint() 方法。"); 
   } 
} 

class StringPrinter extends PrinterClass { 
   doPrint(): void { 
      super.doPrint(); 
      console.log("子类的 doPrint() 方法。");
   } 
}

更多类相关代码点击体验https://www.typescriptlang.org/zh/play/

3. 对象
   对象者，集合的化身

   type SitesType {
    site1: string
    site2: string
    sayHello: () => void; // 方法，不接受参数，没有返回值
   }
   const sites = {
    site1: "Huawei",
    site2: "Google",
    sayHello: function () { } // 类型模板
   };
   sites.sayHello = function () {
    console.log("hello " + sites.site1);
   };
   sites.sayHello();
   

   更多对象相关代码点击体验https://www.typescriptlang.org/zh/play/

4. 泛型

泛型则为 TypeScript 的又一灵魂，通往无限的可能：

function identity<T>(arg: T): T {
    return arg;
}

使用泛型来定义函数的参数类型 ：

// 泛型函数：返回数组的第一个元素
function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

// 使用泛型函数
const numberArray = [1, 2, 3];
const stringArray = ["a", "b", "c"];

const firstNumber = firstElement(numberArray); // 类型为 number
const firstString = firstElement(stringArray); // 类型为 string

console.log(firstNumber); // 输出: 1
console.log(firstString); // 输出: a

更多泛型相关代码点击体验https://www.typescriptlang.org/zh/play/

此篇所述，非为枯燥之教条，乃为思考之钥，开启理解与应用的门扉。愿诸君借此，探索 TypeScript 之深邃世界。

参考资料

• Datawhale Typescript教程4.1-接口
• Datawhale Typescript教程4.2-类
• Datawhale Typescript教程4.3-对象
• Datawhale Typescript教程4.4-泛型

以上文字内容几乎全部由 ChatGPT 编写创作