”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 掌握 TypeScript 接口:带有实际示例的综合指南

掌握 TypeScript 接口:带有实际示例的综合指南

发布于2024-08-18
浏览:957

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

在 TypeScript 中,接口是用于定义对象形状的强大工具。它们强制执行类型检查,确保您创建的对象遵循特定的结构。下面看一下常用接口的各种情况,并附有示例:

1. 定义对象形状

接口通常用于定义对象的结构。这确保了任何附着于该接口的对象都将具有特定的属性。

interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: "John Doe",
  age: 30,
  email: "[email protected]"
};

2. 可选属性

接口允许您使用 ? 定义可选属性。象征。这意味着该对象可能具有也可能不具有这些属性。

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. 只读属性

您可以将属性定义为只读,这意味着它们在初始化后无法更改。

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

4. 函数类型

接口可用于定义函数的形状,指定参数类型和返回类型。

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

5. 扩展接口

接口可以扩展其他接口,允许通过组合现有的类型来创建复杂类型。

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

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

6. 在类中实现接口

类可以实现接口,确保它们遵守接口的结构。

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

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

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!

7. 可索引类型

接口可以描述具有特定类型动态键属性的对象。

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

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. 混合类型

接口可以定义既充当函数又充当具有属性的对象的对象。

interface Counter {
  (start: number): void;
  interval: number;
  reset(): void;
}

const counter: Counter = (function (start: number) {
  console.log("Counter started at", start);
} as Counter);

counter.interval = 1000;
counter.reset = () => {
  console.log("Counter reset");
};

counter(10);
console.log(counter.interval); // 1000
counter.reset();

9. 接口合并

TypeScript 允许您合并同一接口的多个声明,这在处理大型代码库或库时非常有用。

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

TypeScript 中的接口提供了一种灵活而强大的方式来定义和强制执行对象形状,从而实现强大的类型检查和清晰、可维护的代码。

版本声明 本文转载于:https://dev.to/shanu001x/mastering-typescript-interfaces-a-comprehensive-guide-with-practical-examples-m8h?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在Python中设置子进程的工作目录?
    如何在Python中设置子进程的工作目录?
    如何在Python中设置子进程的工作目录在Python中,subprocess.Popen()函数允许您在Py​​thon中执行命令子进程。一个常见的要求是指定子进程的工作目录。问题:如何使用 subprocess.Popen() 设置子进程的工作目录? 答案:要指定工作目录,请使用 subproc...
    编程 发布于2024-11-06
  • Pandas 什么时候创建视图而不是副本?
    Pandas 什么时候创建视图而不是副本?
    Pandas 视图与副本生成规则Pandas 在决定 DataFrame 上的切片操作是否产生视图或结果时采用特定规则复制。通过了解这些规则,您可以优化数据操作并避免意外行为。从始终生成副本的操作开始:所有操作,除了那些专门设计用于修改的操作就地 DataFrame,创建副本。只有某些操作支持 in...
    编程 发布于2024-11-06
  • 使用代理服务器解锁地理限制网站
    使用代理服务器解锁地理限制网站
    利用代理服务器绕过区域封锁是一种常用且有效的方法。代理服务器作为中介,可以隐藏用户的真实IP地址,使用户的请求看起来像是来自代理服务器的地理位置,从而绕过区域封锁。 使用代理服务器绕过区域封锁的关键步骤:‌‌ 选择合适的代理服务器‌:根据目标区域的网络环境和遮挡情况,选择覆盖该区域的...
    编程 发布于2024-11-06
  • 如何为三角形中的线性渐变锯齿线创建平滑边缘?
    如何为三角形中的线性渐变锯齿线创建平滑边缘?
    为线性渐变锯齿线创建平滑边缘为了设计具有由两个三角形形成的尖底的响应式图像,开发人员在三角形线上遇到了意外的锯齿状边缘。为了解决这个问题,我们探索了产生更平滑渐变过渡的策略。虽然硬停止线性渐变图像中的颜色通常会导致锯齿状边缘,但调整停止点和起始点可以缓解此问题。不要突然从一种颜色变为另一种颜色,而是...
    编程 发布于2024-11-06
  • Java 中“static”的魔力:一为所有,一切为一!
    Java 中“static”的魔力:一为所有,一切为一!
    老实说,当我们第一次遇到 static 关键字时,我们都会想:“这是什么魔法?” ?但别担心,我会用一种简单、深入、甚至有点有趣的方式来分解它! 想象一下你正在参加一个聚会?你和你所有的朋友都戴着帽子。但每个人都必须分享一顶帽子。这基本上就是 Java 中 static 关键字的作用!您不必为每个朋...
    编程 发布于2024-11-06
  • 如何在 Laravel Eloquent ORM 中对表进行别名以增强灵活性和可读性?
    如何在 Laravel Eloquent ORM 中对表进行别名以增强灵活性和可读性?
    Laravel 的 Eloquent 查询中的别名表:超越 DB::table在 Laravel 的 Eloquent ORM 中,您可以使用干净的、面向对象的方法与数据库进行交互。然而,有时您可能会遇到需要更大灵活性的查询,例如别名表。挑战考虑使用 Laravel 的查询生成器进行查询:$user...
    编程 发布于2024-11-06
  • 如何使用 document.write 功能动态包含脚本?
    如何使用 document.write 功能动态包含脚本?
    动态包含具有document.write功能的脚本问题:如何将带有变量src属性的脚本标签动态添加到网页中,特别是如果 src 包含 document.write 函数?背景:通常,在 HTML 头中添加具有特定 src 属性的脚本标记可以无缝工作。但是,当src属性中包含document.writ...
    编程 发布于2024-11-06
  • 为什么我在 Python 中收到“Bad magic number”导入错误?
    为什么我在 Python 中收到“Bad magic number”导入错误?
    Bad Magic Number:了解导入错误使用 Python 时,遇到“Bad magic number”ImportError 可能会令人沮丧。此错误表示 pyc 文件(Python 脚本的编译版本)已损坏,这会导致与 Python 解释器不兼容。理解幻数在 UNIX 中-type 系统中,文...
    编程 发布于2024-11-06
  • 如何测试 Go 中未导出的函数?
    如何测试 Go 中未导出的函数?
    从非测试 Go 文件中调用测试函数在 Go 中,不应从代码本身调用测试函数。相反,单元测试应该使用 go test 命令执行。黑白盒测试Go 支持两种类型的单元测试:黑盒和白盒.黑盒测试测试从包外部导出的函数,模拟外部包如何与其交互。白盒测试从包本身内部测试未导出的函数。Example考虑一个名为...
    编程 发布于2024-11-06
  • 如何优化 Matplotlib 绘图性能以提高速度和效率?
    如何优化 Matplotlib 绘图性能以提高速度和效率?
    提高 Matplotlib 绘图性能使用 Matplotlib 绘图有时会很慢,尤其是在处理复杂或动画图形时。了解这种缓慢背后的原因可以帮助您优化代码以获得更快的性能。瓶颈和 BlittingMatplotlib 绘图过程的主要瓶颈在于它对所有内容的重绘每次调用Fig.canvas.draw()。然...
    编程 发布于2024-11-06
  • 面试工具包:数组 - 滑动窗口。
    面试工具包:数组 - 滑动窗口。
    一切都与模式有关! 一旦你学会了这些模式,一切都开始变得更容易了!如果你像我一样,你可能不喜欢技术面试,我不怪你——面试可能很艰难。 数组问题是面试中最常见的问题。这些问题通常涉及使用自然数组: const arr = [1, 2, 3, 4, 5]; 还有字符串问题,本质上是字符...
    编程 发布于2024-11-06
  • 字符串常量池:为什么即使文字存在,“new”也会创建一个新的字符串对象?
    字符串常量池:为什么即使文字存在,“new”也会创建一个新的字符串对象?
    字符串常量池:深入检查Java 中的字符串常量池被池化以优化内存使用并提高性能。这意味着当遇到字符串文字时,编译器会检查字符串常量池中是否存在具有相同值的现有字符串对象。如果找到,引用将定向到现有对象,避免创建新对象。但是,当使用“new”运算符创建新的 String 对象时,会出现混乱,因为这似乎...
    编程 发布于2024-11-06
  • 如何在 PHP 中使用 array_push() 处理多维数组?
    如何在 PHP 中使用 array_push() 处理多维数组?
    使用 PHP 的 array_push 添加元素到多维数组使用多维数组可能会令人困惑,特别是在尝试添加新元素时。当任务是将存储在 $newdata 中的循环中的数据附加到给定 $md_array 内的子数组“recipe_type”和“cuisine”时,就会出现此问题。要实现此目的,您可以利用ar...
    编程 发布于2024-11-06
  • Python 第 00 天
    Python 第 00 天
    今天,我开始了我的个人挑战,#100DaysOfCode。为了这个挑战,我选择学习Python,因为我的目标是成为一名数据分析师。 第 2 章: 变量和字符串 我用来学习 Python 的材料是 Eric Matthes 写的一本名为《Python Crash Course》的书。它对学习非常有帮...
    编程 发布于2024-11-06
  • PDO、准备好的语句或 MySQLi:哪一个最适合您的 PHP 项目?
    PDO、准备好的语句或 MySQLi:哪一个最适合您的 PHP 项目?
    揭秘 PDO、Prepared statements 和 MySQLi在 PHP 数据库交互领域,初学者经常会遇到从遗留 mysql_ 过渡的建议* 函数适用于更现代的选项,如 PDO、准备好的语句或 MySQLi。虽然访问和操作数据库的基本目标仍然存在,但每种技术都提供了独特的优势和细微差别。PD...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3