TypeScript入门：三分钟学会可索引类型

哈喽，大家好！我是前端理想哥

今天是咱们 TS 学习第三课 ，前两节没听懂的同学别急，今天咱继续冲，这节课我们要聊的内容非常重要：可索引的类型 、接口继承 、混合类型 ，还有接口继承类。

听着有点复杂对吧？没关系！理想哥保证，这节课看完，脑袋里就只剩一个感觉： "原来这么简单！"

一、可索引的类型

先来讲可索引的类型。

什么叫可索引？其实很简单，就是可以用"索引"来访问属性的类型。你肯定用过数组 arr[10]，或者对象 person["age"]，这些操作在 TS 里直接靠 可索引的类型搞定。

来看个简单的例子：

ini 复制代码

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

const myArray: StringArray = ["Bob", "Fred"];
console.log(myArray[0]); // 输出: Bob

这段代码中，我们定义了一个 StringArray 接口，它允许用 数字类型的索引 来取值，比如 myArray[0]，就返回 "Bob"。简单吧！

不止数字，还可以用字符串当索引：

typescript 复制代码

interface StringIndexedObject {
  [key: string]: string; // 键是字符串，值也必须是字符串
}

const example: StringIndexedObject = {
  name: "Andy",
  role: "Front-end Developer",
  location: "Shanghai",
};

console.log(example.name); // 输出: Andy
example["company"] = "Alibaba"; // 添加一个新属性
console.log(example.company); // 输出: Alibaba

不过，这里要注意，如果你试图写个 example.age = 25，TypeScript 会立刻跟你说 "No！" ，因为 25 不是字符串。TS还是很严谨的

二、接口继承

接下来聊聊接口继承，这玩意儿专治代码看着"乱糟糟"的毛病。

你可以通过接口继承，把多个接口的属性和方法组合起来，既清晰又复用。来看个例子：

typescript 复制代码

interface Parent {
  property1: string;
}

interface Child extends Parent {
  property2: number;
}

这里 Child 继承了 Parent，所以 Child 既有 property1，又有 property2，两全其美！

更骚的是，接口还可以继承多个接口，比如：

kotlin 复制代码

interface Fly {
  fly(): void;
}

interface Swim {
  swim(): void;
}

interface SuperHero extends Fly, Swim {
  name: string;
}

这个意思就是：SuperHero 同时拥有Fly和Swim两个接口，妥妥的多功能选手！大家可以自己脑补下超级英雄"超人"或者"海王"的形象。

三、混合类型

讲完接口继承，我们来看看混合类型。

这东西用起来就一个字：妙！

你有没有想过，一个对象，既有属性，又能像函数一样调用？没错，这就是混合类型的绝活！

混合类型是 TypeScript 中的一种特殊类型，它允许我们创建一个对象，既有属性，也有方法，甚至可以像函数一样被调用。换句话说，混合类型可以同时表现为"对象"和"函数"的结合体。

typescript 复制代码

interface Counter {
  count: number; // 属性
  increment(): void; // 方法
  reset(): void; // 方法
}

const counter: Counter = {
  count: 0,
  increment() {
    this.count++;
  },
  reset() {
    this.count = 0;
  },
};

counter.increment();
console.log(counter.count); // 输出: 1
counter.reset();
console.log(counter.count); // 输出: 0

在这个例子中，我们定义了一个Counter接口，该接口中有三个属性，number类型的count，void类型的increment函数，void类型的reset函数。

然后counter这个函数，就会有拥有多种类型了。

这个例子就是一个计数器，属性 count 存当前值，方法 increment 是增加计数，reset 是清零。简单直接，还特别实用！

四、接口继承类

最后一个知识点，接口继承类。有点高阶，但其实也不难。

简单来说，接口不仅可以继承接口，还可以继承类。什么意思呢？来看代码：

typescript 复制代码

class Base {
  baseProperty: string = "Base Property";
}

interface Derived extends Base {
  derivedProperty: string;
}

const obj: Derived = {
  baseProperty: "From Base",
  derivedProperty: "From Derived",
};

console.log(obj);

这里 Derived 继承了类 Base 的属性，继承完还能再加自己的新属性，是不是有点儿像接口的"外挂功能"？

好了，这就是我们今天讲的所有内容！

这节课聊了四个 TypeScript 的重点概念：可索引的类型、接口继承、混合类型和接口继承类。

最后提醒一下：点赞、关注、收藏，走一波！ 下节课我们讲 TypeScript 的"王炸"功能------类，记得来听！我们下期见，拜拜～