TypeScript对象类型

news2025/1/20 3:54:18

废话不多说,还是挑点有营养的讲。

对象类型

1、匿名对象

匿名对象类型是在定义变量时直接使用花括号{},来定义一个对象类型。

const person: { name: string, age: number } = { name: 'John', age: 25 };

2、接口类型

使用接口来定义对象类型,可以使代码更加可读、易于维护

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

const person: Person = { name: 'John', age: 25 };

3、类别类型

使用类型别名可以为对象类型定义简短、易读的名称。

type Person = {
  name: string;
  age: number;
}

const person: Person = { name: 'John', age: 25 };

4.快速模仿

对象解构

还是跟JS一样

let person:{ownName:string,gender:string} = {
    ownName: "Semlinker",
    gender: "Male",
};
let { ownName, gender } = person;
console.log(ownName)
console.log(gender)

对象属性

1. 可选属性

顾名思义,不是必须存在的属性。用?标识出来。

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

或者

let player:{name:string,level?:number} = {name:'a'}

2、只读属性

TypeScript中,我们可以声明一个对象类型中的属性为只读属性,即该属性的值一旦被赋值就不能再被修改。

type Student = {
  readonly name: string;
  age: number;
}

3. 索引签名

对象类型可以包含索引签名,以支持在动态属性上访问属性值。索引签名允许您在对象类型中定义一个模式,该模式指定应该具有哪些属性和属性类型

interface ExampleObject {
  [key: string]: string;
}

const exampleObject: ExampleObject = {
  name: "小星星",
  class: "小班",
  // ...
};

注意这里是[key:xxx]。这里代表exampleObject里的键名是字符串,值也是字符串。

利用这个特性,我们可以创造出类数组对象:

interface ExampleObject {
  [key: number]: string;
}

const exampleObject: ExampleObject = {
  0: "value1",
  1: "value2",
  // ...
};
1

规定只读属性

interface ExampleObject {
  readonly [key: string]: string;
}

键值是联合类型:

interface ExampleObject {
  [key: string]: string | number;
}

4.扩展类型

TypeScript中的对象类型是通过接口来定义的,接口可以扩展其他接口,从而实现对象类型的扩展。

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

interface Student extends Person {
  school: string;
  grade: string;
}

5.交叉类型(&)

看前面推文。

交叉类型和interface的extends扩展类型的区别

与交叉类型相比,使用interface的extends扩展类型可以实现类似的效果,但是它们的设计思想不同。extends用于在一个类型基础上扩展属性和方法,而交叉类型则是将多个类型合并起来以创建一个新的类型。

6.泛型对象类型

泛型具体的内容可以看我的其他推文。

泛型对象类型可以用于对象属性中的类型声明。例如,以下代码定义了一个对象类型,该对象具有不同类型的属性:

interface List<T> {
  data: T[]
  add: (item: T) => void
}

const list1: List<string> = {
  data: ['hello', 'world'],
  add(item) {
    this.data.push(item)
  }
}

const list2: List<number> = {
  data: [1, 2],
  add(item) {
    this.data.push(item)
  }
}

在上面的代码中,<T>表示泛型对象类型,我们在List<T>中使用了该类型,以声明data属性和add方法的参数和返回类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/997168.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二叉树的顺序结构以及堆的实现——【数据结构】

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 上篇文章&#xff0c;我们认识了什么是树以及二叉树的基本内容、表示方法……接下来我们继续来深入二叉树&#xff0c;感受其中的魅力。 目录 二叉树的顺序结构 堆的概念及结构 堆的实现 堆的创建 堆的初始化与…

LeetCode(力扣)455. 分发饼干Python

LeetCode20. 有效的括号 题目链接代码 题目链接 https://leetcode.cn/problems/assign-cookies/ 代码 从大遍历 class Solution:def findContentChildren(self, g: List[int], s: List[int]) -> int:g.sort()s.sort()index len(s) - 1result 0for i in range(len(g) -…

老胡的周刊(第107期)

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 open-interpreter[2] 基于 LLM 为你提供一种…

车载软件架构——基础软件供应商开发工具链(一)

车载软件架构——基础软件供应商&开发工具链(一) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己…

创建 gstreamer 插件的几种方式

系列文章目录 创建 gstreamer 插件的几种方式 使用 gst-template 创建自己的gstreamer 插件 使用 gst-plugins-bad 里面的 gst-element-maker 工具创建gstreamer 插件 文章目录 系列文章目录前言一、gstreamer 官网提供创建插件的方法总结参考资料前言 本系列文章主要介绍如何…

EasyExcel实现指定行列的相同内容单元格合并

ExcelMergeUtil工具类 package com.sdy.resdir.biz.util;import com.alibaba.excel.metadata.CellData; import com.alibaba.excel.metadata.Head; import com.alibaba.excel.write.handler.CellWriteHandler; import com.alibaba.excel.write.metadata.holder.WriteSheetHold…

机器学习从0到1

机器学习&#xff0c;即machine learning 感谢easyai的精彩讲解&#xff1a; easyai网址 文章目录 机器学习的概念机器学习的原理监督学习&#xff0c;非监督学习&#xff0c;强化学习监督学习非监督学习强化学习 机器学习实操的7个步骤现在举一个具体的任务来说明这些步骤1.收…

Visual studio解决‘scanf: This function or variable may be unsafe. 问题

使用C语言的scanf函数在Visual Studio软件上运行会报如下错误&#xff1a; scanf: This function or variable may be unsafe. Consider using scanf s instead. To disable deprecation, use. CRT SECURE NO WARNINGS. See online help for details. 这个函数或变量可能是不安…

Red-Black Tree红黑树

红黑树特点&#xff1a; 1.根节点必须为黑色&#xff1b; 2.每个节点到子节点经过相同数目的黑色节点&#xff1b; 3.红色节点的子节点必须是黑色&#xff1b; 4.空指针也作为节点 红黑树如何插入新的节点&#xff1f; 1.如果是空树&#xff0c;插入新的黑色节点作为根节点&am…

Wine 8.14 开发版正式发布

Wine 8.14 最新开发版已正式发布。 Wine (Wine Is Not an Emulator) 是一个能够在多种兼容 POSIX 接口的操作系统&#xff08;诸如 Linux、macOS 与 BSD 等&#xff09;上运行 Windows 应用的兼容层。它不是像虚拟机或者模拟器一样模仿内部的 Windows 逻辑&#xff0c;而是将 …

2023-9-10 Nim游戏

题目链接&#xff1a;Nim游戏 #include <iostream> #include <algorithm>using namespace std;int main() {int n;cin >> n;int res 0;while(n--){int x;cin >> x;res ^ x;}if(res) cout << "Yes" << endl;else cout << …

SICTF-2023-Crypto

文章目录 古典大杂烩RadioMingTianPaoeasy_coppersmith签到题来咯&#xff01;small_eeasy_math 古典大杂烩 题目描述&#xff1a; &#x1f429;&#x1f443;&#x1f42a;&#x1f43c;&#x1f445;&#x1f42f;&#x1f429;&#x1f448;&#x1f447;&#x1f46d;&a…

基于SSM的电子竞技管理平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

自学移动端(APP)自动化测试

国庆已经过去了&#xff0c;新的一周已经开始了&#xff0c;各地疫情又开始出现复发了&#xff0c;我们能做的就是做好个人防护、去哪报备、到哪扫码亮码、主动做核酸、随时做好家里存储至少一周的食物&#xff0c;拒绝过度防疫&#xff0c;拒绝过度恐慌&#xff0c;拒绝过度焦…

linux Nginx+Tomcat负载均衡、动静分离

linux NginxTomcat负载均衡、动静分离 1、Tomcat的基本介绍1.1Tomcat是什么&#xff1f;1.2Tomcat的构成组件1.3Tomcat的核心功能1.4Tomcat请求过程 2、Tomcat部署2.1安装tomcat2.2优化tomcat启动速度2.4主要目录说明 3、Tomcat 虚拟主机配置3.1创建fsj和mws项目目录和文件3.2修…

【操作系统】聊聊内存中的cache和buffer

通过free命令&#xff0c;可以查看buff/cache使用了368MB内存。从字面上理解cache是缓存&#xff0c;buffer是缓冲区。那么具体有什么含义呢&#xff1f; free数据来源 通过man free 可以看到 free的 buffer/cache 来自/proc/meminfo buffers &#xff1a;内核缓冲区cache …

创建数据库

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法格式: create database 数据库名称 charset 字符集; 其中: create: 创建 database: 数据库 charset: 字符集 说明: 常见的字符集:utf8(最常用…

SLAM论文详解(5) — Bundle_Adjustment_LM(BALM)论文详解

目录 1 摘要 2 相关工作 3 BA公式和导数 A. 直接BA公式 B. 导数 C. 二阶近似 4 自适应体素化 5. 将BALM结合进LOAM 6. 实验 7. 算法应用场景解析 1 摘要 Bundle Adjustment是一种用于同时估计三维结构和传感器运动运动的优化算法。在视觉SLAM&#xff0c;三维重建等…

Spring AOP使用指南: 强大的面向切面编程技术

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

C++this指针

本文旨在讲解C中this关键字&#xff0c;以及其相关作用&#xff01; 定义 this 是 C 中的一个关键字&#xff0c;也是一个 const 指针&#xff0c;它指向当前对象&#xff0c;通过它可以访问当前对象的所有成员。 this的介绍 下面来看一下关于this这个关键字的实例&#xff0…