TypeScript 中的对象类型:深入理解接口和类型别名

news/2025/2/9 6:59:03 标签: typescript, 状态模式, javascript

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。

在 TypeScript 中,对象是键值对的集合,每个键都是一个字符串(或符号),每个值可以是任何类型。TypeScript 提供了强大的类型系统,允许开发者定义对象的结构,从而提高代码的可读性和可维护性。

对象类型注解

在 TypeScript 中,你可以使用冒号 : 后跟类型来为对象添加类型注解。

typescript">let person: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

在这个例子中,person 对象被注解为具有 name 属性(类型为 string)和 age 属性(类型为 number)。

接口

接口(interface)是 TypeScript 中定义对象类型的一种方式。接口允许你定义一个对象的形状,即它应该具有哪些属性以及这些属性的类型。

typescript">interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 30
};

在这个例子中,Person 接口定义了一个对象的形状,然后我们创建了一个符合这个形状的对象。

类型别名

类型别名(type)是另一种定义对象类型的方式。类型别名允许你为类型定义一个新的名字。

typescript">type Person = {
  name: string;
  age: number;
};

let person: Person = {
  name: "Alice",
  age: 30
};

在这个例子中,Person 类型别名定义了一个对象的形状,然后我们创建了一个符合这个形状的对象。

可选属性

在接口和类型别名中,你可以使用 ? 来标记一个属性是可选的。

typescript">interface Person {
  name: string;
  age?: number;
}

let person: Person = {
  name: "Alice"
};

在这个例子中,age 属性是可选的,因此我们可以创建一个没有 age 属性的对象。

只读属性

在接口和类型别名中,你可以使用 readonly 关键字来标记一个属性是只读的。

typescript">interface Person {
  readonly name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 30
};

person.name = "Bob"; // 错误,因为 name 属性是只读的

在这个例子中,name 属性是只读的,因此我们不能修改它的值。

索引签名

在接口和类型别名中,你可以使用索引签名来定义对象的索引类型。

typescript">interface StringArray {
  [index: number]: string;
}

let colors: StringArray = ["red", "green", "blue"];

在这个例子中,StringArray 接口定义了一个索引签名,表示这个对象是一个字符串数组。

结论

在 TypeScript 中,对象是键值对的集合,每个键都是一个字符串(或符号),每个值可以是任何类型。TypeScript 提供了接口和类型别名等工具,允许开发者定义对象的结构,从而提高代码的可读性和可维护性。通过使用 TypeScript,开发者可以创建更强大和灵活的代码,从而提高生产力和代码质量。


http://www.niftyadmin.cn/n/5845750.html

相关文章

如何在Swift中实现基本的UI设计?

在iOS开发中,用户界面(UI)设计是构建应用的核心部分之一。通过Swift,你可以利用各种工具和框架轻松地创建富有互动性的界面。本文将向你介绍如何在Swift中实现基本的UI设计,从最基础的界面元素到布局技巧,帮…

Java 大视界 -- Java 大数据在智能金融监管中的应用与实践(77)

💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…

第一财经对话东土科技 | 探索工业科技新边界

当前以ChatGPT、Sora等为代表的生成式人工智能快速发展,越来越多面向垂直场景的行业大模型涌现出来,并成为推动制造业智能化改造与数字化转型、加快推进新型工业化,进而培育发展新质生产力的新引擎。 在垂类场景的应用落地,是AI发…

Chrome谷歌多开教程:实用方法与工具

不管是电子商务、技术测试、空投等不同专业领域,还是个人的工作和生活账号管理,使用不同的独立账户往往需要借助Chrome谷歌浏览器多开来提高效率。Chrome谷歌多开有哪些方法和工具?可以来参考以下实用内容。 一、Chrome谷歌多开方法与工具 1…

TensorFlow域对抗训练DANN神经网络分析MNIST与Blobs数据集梯度反转层提升目标域适应能力可视化...

全文链接:https://tecdat.cn/?p39656 本文围绕基于TensorFlow实现的神经网络对抗训练域适应方法展开研究。详细介绍了梯度反转层的原理与实现,通过MNIST和Blobs等数据集进行实验,对比了不同训练方式(仅源域训练、域对抗训练等&am…

软件工程-分析建模

结构化(传统/面向对象)分析模型 核心是数据字典DD 面向对象分析模型 核心是使用实例(用例) 分析模型描述工具 结构化分析工具 数据流图DFD、数据字典DD和加工说明PSPEC【功能模型】 DFD、DD具体介绍见往期文章 加工说明PS…

matlab simulink 汽车二分之一模型LQR控制和GUI界面

1、内容简介 略 matlab simulink 可以交流、咨询、答疑 125- 2、内容说明 略 3、仿真分析 略 4、参考论文 略