TS 从 0 到 1 - 接口

Cellinlab

发布于 2023-05-17 19:43:08

2120

发布于 2023-05-17 19:43:08

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

# 对象的描述

在面向对象的语言中，接口是对行为的抽象，具体如何行动需要由类去实现（implements）。

在 TypeScript 中，接口是一个非常灵活的概念，除了可以用于对类的一部分进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

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

let cell: Person = {
  name: 'Cell',
  age: 18
}

# 可选 | 只读属性

interface Person {
  readonly id: number;
  name: string;
  age?: number;
}

此外，TypeScript 还提供了 ReadonlyArray<T> 类型，它与 Array<T> 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

# 任意属性

有时需要接口中除了包含必选和可选属性之外，还允许有其他的任意属性，这时可以使用索引签名：

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}

const p1 = { name: "Cell" };
const p2 = { name: "Linlan", age: 18 };
const p3 = { name: "Lanbo", gender: 1 };

# 接口与类型别名

# Objects / Functions

接口和类型别名都可以用来描述对象的形状或函数签名：

接口

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

类型别名

type Point = {
  x: number;
  y: number;
}

type SetPoint = (x: number, y: number) => void;

# 其他类型

类型别名可以用于一些其他类型，如原始类型、联合类型、元组等：

// 原始类型
type Name = string;

// 对象
type PartialPointX = { x: number };
type PartialPointY = { y: number };

// 联合类型
type PartialPoint = PartialPointX | PartialPointY;

// 元组
type Data = [number, string];

# 扩展

接口和类型别名都能被扩展，但语法不一样。

接口和类型别名不是互斥的。接口可以扩展类型别名，但类型别名不能扩展接口。

接口扩展接口

interface PartialPointX { x: number; }

interface Point extends PartialPointX {
  y: number;
}

类型别名扩展类型别名

type PartialPointX = { x: number; }
type Point = PartialPointX & { y: number; }

接口扩展类型别名

type PartialPointX = { x: number; }
interface Point extends PartialPointX {
  y: number;
}

类型别名扩展接口

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; }

# 实现

类可以以相同的方式实现接口或类型别名，但类不能实现使用类型别名定义的联合类型。

interface Point {
  x: number;
  y: number;
}
class SomePoint implements Point {
  x = 1;
  y = 2;
}

type Point2 = {
  x: number;
  y: number;
};
class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPointX = { x: number; } | { y: number; };
class SomePoint3 implements PartialPointX { // error!
  x = 1;
  y = 2;
}

# 接口合并

接口可以合并，但类型别名不能。多次声明同一个接口，会自动合并为一个接口。

interface Point {
  x: number;
}
interface Point {
  y: number;
}

const point: Point = { x: 1, y: 2 };

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022/5/5，如有侵权请联系 cloudcommunity@tencent.com 删除

interface

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度