typescript --object对象类型

ts中的object

const obj = new Object()

Object

这里的Object是Object类型,而不是JavaScript内置的Object构造函数。
这里的Object是一种类型,而Object()构造函数表示一个值。
Object()构造函数的ts代码

interface ObjectConstructor{readonly prototype: Object// 忽略了其他成员
}
declare var Object: ObjectConstructor

Object类型是特殊对象Object.prototype的类型,该类型主要是描述JavaScript中几乎所有对象都共享(通过原型链继承)的属性和方法。

类型兼容性

除了undefined和null外,其他任何值都可以赋值给Object类型

let obj: Object;
obj = {x: 0}
obj = true
obj = "hi"
obj = 1
obj = undefined
obj = null

常见错误

const point: Object = {x: 0, y: 0}  //不应该使用Object类型,而是应该使用object类型来代替

object

object表示非原始类型。

const ponit: object = {x: 0, y: 0}

强调的是一个非原始的类型,即对象类型,不关注对象类型中的属性

const obj: object = {foo: 0}
obj.foo// 编译错误,foo不存在于类型object上
obj.foo// 编译错误,foo不存在于类型object上

类型兼容性

javascript中的数据类型中可以划分为原始数据类型和对象数据类型两大类。
object类型仅能赋值给下面三种类型

  1. 顶端类型any和unknown
  2. Object类型
  3. 空对象类型字面量"{}"
const nonPrimitive:object = {}
const a: any = nonPrimitive
const b: unknown = nonPrimitive

Object类型描述了所有对象都能共享的属性和方法,很自然的表示对象类型的object能够赋值给Object。

const nonPrimitive: object = {}
const obj: Object = nonPrimitive

object类型能够赋值给空对象{}

const nonPrimitive: object = {}
const obj: {} = nonPrimitive

实例应用

Object.create()该方法必须传入对象或者null值作为新创建对象的原型。

const a = Object.create(Object.prototype)
const b = Object.create(null)
// 类型错误
const c = Object.create(1)

对象类型字面量

对象类型字面量是定义对象类型的方法之一。

const point: {x: number, y: number} = {x: 0, y: 0}

基础语法

{TypeMember;TypeMember;...
}
{TypeMember,TypeMember,...
}
属性签名
{PropertyName: Type;
}
let point : {x: number, y: number} = {x: 0, y: 0}

属性签名中的属性名可以为可计算属性名,但是条件如下

  1. 可计算属性名的类型为string字面量类型或者number字面量类型
  2. 可计算属性名的类型为"unique symbol"类型。
  3. 可计算属性名"Symbol.xxx"的形式
  4. 允许只列出属性名而不定义任何类型。在这种情况下,该属性的类型默认为any类型(启用–noImplicitAny 编译类型)
const a: 'a' = 'a'
const b: 0 = 0;
let obj: {[a]: boolean;[b]: boolean;['c']: boolean;[1]: boolean
}
const s: unqiue symbol = Symbol()
let obj: {[s]: boolean
}
let obj: {[Symbol.toStringTag]: string;
}
{x;y;
}
{x:any;y:any;
}
可选属性
{PropertyName?: Type
}
{let point: {x: number; y: number; z?: number}
}
point = {x: 0, y: 0}
point = {x: 0, y: 0, z: 0}

只读属性

只读属性的值在初始化后不允许再被修改

let point: {readonly x: number;readonly y: number
}
point = {x: 0, y: 0}

空对象类型字面量

const point: {} = {x: 0, y: 0}
point.x // 编译错误,x不存在于类型{}
point.y // 编译错误,y不存在于类型{}
point.valueOf()
let a: Object = 'hi'
let b: {} = 'hi'
a = b
b = a

全局的Object类型用于描述对象公共的属性和方法,它相当于一种专用类型,因此程序中不应该将自定义变量、参数等类型直接声明为Object类型。空对象类型字面量“{}”强调的是不包含属性的对象类型,同时也可以作为0bject类型的代理来使用

弱类型

  1. 对象类型中至少包含一个属性
  2. 对象类型中所有属性都可以是可选属性
  3. 对象类型中不包含字符串索引签名,数值索引签名,调用索引签名和构造签名
let config: {url?: string;async?: boolean;timeout?: number
}

多余属性

多余属性会对类型间的判定产生影响。 只有在比较两个对象类型的关系的时候,讨论多余属性,才会有意义。
讨论源对象类型和目标对象类型,两个对象类型,当满足下面的条件,源对象类型相对于目标对象类型存在多余属性。

  1. 源对象类型是一个全新的对象字面量类型
  2. 源对象类型中存在一个或者多个在目标对象类型中不存在的属性。
const point: {x?: number; y?: number} = {x: 0,y: 0,z: 0, // z是多余属性
}
const point: {x: number; y: number} = {x: 0,y: 0,z: 0, // z是多余属性
}
多余属性检查

编译器会出现多余属性错误。多余属性在绝大多数的场景是合理的。
使用类型断言。类型断言能够绕过多余属性检查的真正原因,处于类型断言表达式中的对象字面量不再是全新的对象字面量。

const p0: {x: number} = {x: 0, y: 0} as {x: number}
const p1: {x: number} = {x: 0, y: 0} as {x: 0, y: 0}

函数类型

常规参数类型
function add(x: number, y: number) {return x + y
}
const f = function(x: number, y: number) {return x + y
}
const f = function(x, y) {return x + y
}
// 等价于
const f = function(x: any, y: any) {return x + y
}
可选参数类型
function add(x: number, y?: number) {return x + (y ?? 0)
}
function add(x: number, y?: number, z?: number) {return x + (y ?? 0) + (z ?? 0 )
}
// 必选参数不可以出现在可选参数的后面
function add(x?: number, y: number) {  // error // code 
}
默认参数类型
function add(x: number = 0, y = 0) {return x + y
}
function add(x: number, y: number = 0) {return x + y
}
剩余参数类型
function f(...args: number[]) {}
元组类型的剩余参数

剩余参数的类型可以定义为元组类型,下列剩余参数的类型,分为两个元素怒的元组类型

function f(...args: [boolean, number] ){}
  1. 常规元组类型
     function f0(...args: [boolean, number]) {}function f1(args_0: boolean, args_1: number){}
    
  2. 常规可选元素的元组类型
     function f0(...args: [boolean, string?]){}function f1(args_0: boolean, args1?: string) {}
    
  3. 带有剩余元素的元组类型
    function f0(...args: [boolean, ...string[]]) {}
    function f1(args_0:boolean, ...args1:string[]) {}
    
结构参数类型
function f0([x, y]) {}
function f1({x, y}) {}
function f0([x,y]: [number, number]){}
function f1({x, y}: {x:number, y: number})
返回值类型
函数类型字面量

语法: (ParameterList) => Type

let f: () => void 
f = function() {}
let add: (x: number, y: number) => number;
let k : (x: number) => number;
k = function(y: number) : number {return y
}
调用签名

ParameterList表示函数形式参数列表类型,type表示函数返回值类型{(ParameterList): Type}

const abs0: (x: number ) => number = Math.abs;
const abs1: {(x:number):number} = Math.abs;
构造函数类型字面量

语法: new (ParameterList) => Type

let ErrorConstructor: new (message?: string) => Error
构造签名

语法: {new (ParameterList): Type} 或者简写: new (ParameterList) => Type

let Dog: {new (name: string): object}
Dog = class {private name: string;constructor(name: string) {this.name = name }
}
调用签名和构造函数

示例

{new (x: number) : Number // 构造签名(x: number) :number // 调用签名
}
declare const F:{new (x: number) : Number;(x: number): number
}
const a: number = F(2)
const b: Number = new F(1)
重载函数
function add(x:number, y:number):number
function add(x:any[], y:any[]):any[]
if (typeof x=== 'number' && typeof y === 'number') {return x + y
}
if (Array.isArray(x) && Array.isArray(y)) {return [...x, ...y]
}    
函数重载

不带有函数体的函数声明叫做函数重载

function add(x: number, y: number) :number

函数重载只提供了函数的类型信息,函数重载只存在于代码编译阶段,在编译生成JavaScript代码时候会被完全删除。
函数重载允许存在一个或者多个,但是只有多余一个的函数重载才有意义。如果只有一个函数重载,可以直接用定义函数来实现。多个函数重载语句之间以及函数重载语句与函数实现语句之间,不允许出钱其他的语句。

function add(x:number, y: number) : number ;
function add(x:any[], y:any[]):any[]
function add(x:number | any[], y:number |any[]):any{}
函数实现

函数实现中的函数签名不属于重载函数的调用签名之一,只有函数重载中的函数签名能够作为重载函数的调用签名。例如,下例中的add函数只有两个调用签名,分别为第1行与第2行定义的两个重载签名,而第3行函数实现中的函数签名不是add函数的调用签名

 function add(x: number, y: number): number;function add(x: any[], y: any[]): any[];function add(x: number | any[], y: number | any[]):{// 省略了实现代码}
函数重载解析顺序

当程序中调用了一个重载函数的时候,编译器将构造出一个候选函数重载列表,一个函数重载需要满足如下条件才能称为本次的函数调用候选重载

  1. 函数实际参数的数量不少于函数重载中定义的必选参数的数量
  2. 函数实际参数的数量不多于函数重载中定义的参数的数量
  3. 每个实际参数的类型都能够赋值给函数重载定义中对应形式参数的类型。
    在开发中,编写函数重载代码的时候需要将精确的函数定义到最前面,定义的顺序会影响函数调用签名的选择
    在这里插入图片描述

在这里插入图片描述

函数中this的值

默认情况下,编译器会将函数中的this值设置为any类型,允许程序在this的值上进行任意的操作。
typescript还允许在函数形式参数列表中定义一个特殊的this参数用来描述函数中this的值。this参数不用于常规的函数形式参数,只存在于编译阶段,在编译生成的JavaScript代码中被完全删除。

function foo(this: {bar: string}, baz:number) {// ...
}
foo(0);//错误
foo.call({bar:'hello'}, 0)// 正确

调用foo函数的瘦指定了this的值,其类型符合this参数的类型定义,不会缠身错误。Function.prototype.call()方法是JavaScript的内置方法,能够指定调用函数使用的this值。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UMG绝对坐标与局部空间

在 Unreal Engine 的 UMG(Unreal Motion Graphics)中,“绝对坐标”和“局部空间”是两个常见的概念,主要用于描述 UI 元素的位置和大小。 概念与区别 绝对坐标(Absolute Coordinates):这是指相…

[数据集][目标检测]RSNA肺炎检测数据集VOC+YOLO格式6012张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):6012 标注数量(xml文件个数):6012 标注数量(txt文件个数):6012 标注…

彩光大放异彩!《智慧园区以太全光网络建设技术规程》应用案例征集活动结果公布

近日,中国建筑业协会绿色建造与智能建筑分会正式公布了《智慧园区以太全光网络建设技术规程》应用案例征集活动的结果。本次活动旨在推广和应用该规程,进一步推动智慧园区的数字化、智慧化、绿色化建设。众多优秀项目在征集活动中脱颖而出,展示了规程在实际应用中的显著成效。评…

如果任务过多,队列积压怎么处理?

如果任务过多,队列积压怎么处理? 1、内存队列满了应该怎么办2、问题要治本——发短信导致吞吐量降低的问题不能忽略!!3、多路复用IO模型的核心组件简介1、内存队列满了应该怎么办 如图: 大家可以看到,虽然现在发短信和广告投递,彼此之间的执行效率不受彼此影响,但是请…

vue3+typescript 使用Codemirror

安装 // npm npm install codemirror-editor-vue3 codemirror^5.65.12// ts版 还需安装: npm install types/codemirror全局注册 修改main.ts: import { createApp } from vueimport App from ./App.vueimport { InstallCodemirro } from "code…

M-G364PD惯性测量单元:相机及微小层面的革命性应用

在现代科技飞速发展的今天,精准控制和精确测量是众多高端设备实现卓越性能的关键。爱普生推出的M-G364PD惯性测量单元(IMU),因其卓越的性能和微小尺寸,成为相机以及其他微小层面应用的理想选择,为科技创新提…

JVMの堆、栈内存存储

1、JVM栈的数据存储 通过前面的学习,我们知道,将源代码编译成字节码文件后,JVM会对其中的字节码指令解释执行,在解释执行的过程中,又利用到了栈区的操作数栈和局部变量表两部分。 而局部变量表又分为一个个的槽位&…

JavaScript 基础 - 对象

对象 对象是一种无序的数据集合&#xff0c;可以详细的描述描述某个事物。 注意数组是有序的数据集合。它由属性和方法两部分构成。 语法 声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。 <script>let 对象名 {属性名&#xff1a;属性值…

DynamiCrafter ComfyUI 教程 | 对图片转视频的效果进行精细化控制

近日&#xff0c;由北大、腾讯AI Lab联合推出的 AI 视频生成工具 DynamiCrafter 一经上线便引起了巨大反响。只需要输入一张普普通通的静态图&#xff0c;加上几句简单的文字引导&#xff0c;瞬间就能生成超逼真的动态视频&#xff0c;简直不要太厉害&#xff01; 静态图 fire…

renren-fast-vue启动报错

问题描述 拉取人人开源vue项目启动失败 报错信息 版本信息 序号名称版本号1node14.21.3 启动方案 1.拉取项目 git clone https://gitee.com/renrenio/renren-fast-vue.git 2.执行安装依赖命令 npm install 3.此时报错 chromedriver2.27.2 install: node install.js 4.手动…

kafka集群内外网分流方案——筑梦之路

前言 在现代分布式系统架构中&#xff0c;Kafka作为一款高性能的消息队列系统&#xff0c;广泛应用于大数据处理、实时流处理以及微服务间的异步通信场景。特别是往往企业级应用中&#xff0c;业务网段和内网通信网段不是同一个网段&#xff0c;内网的机器想要访问业务数据只能…

Java内存模型(JMM)

Volatile关键字 如何保证变量的可见性 在Java中&#xff0c;Volatile关键字可以保证变量的可见性&#xff0c;如果我们将变量声明为volatile&#xff0c;这就指示JVM&#xff0c;这个变量是共享且不稳定的&#xff0c;**每次使用它都到主存中进行读取&#xff08;禁止读取本地…

二分查找算法介绍(边界值、循环条件、值的变化、二分查找的原理、异常处理)

一、二分查找法原理介绍 二分查找是经典的查找算法之一&#xff0c;其原理也非常简单。 对于已排序的数组&#xff08;假设是整型&#xff0c;如果非整型&#xff0c;如果有排序和大小比较的定义&#xff0c;也可以使用二分查找&#xff09;&#xff0c;我们每次判断中间值与目…

基于JSP的母婴用品网站系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有需求可以文末加我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员功能界面 用户功能界面 前台首页功能界面 …

JUC从实战到源码:悲观锁和乐观锁真正了解了吗

【JUC】- 多线程与锁的知识 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xff0c;欢迎指…

游戏找不到d3dcompiler43.dll怎么办,分享5种有效的解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是找不到某个文件。其中&#xff0c;找不到d3dcompiler43.dll是一个常见的问题。这个问题通常出现在运行某些游戏或应用程序时&#xff0c;由于缺少了d3dcompiler43.dll文件&#xff0c;导致程…

mysql的锁(全局锁)

文章目录 mysql按照锁的粒度分类全局锁概念&#xff1a;全局锁使用场景&#xff1a;全局锁备份案例&#xff1a; mysql按照锁的粒度分类 全局锁 概念&#xff1a; 全局锁就是对整个数据库实例加锁。MySQL 提供了一个加全局读锁的方法&#xff0c;命令是: Flush tables with…

#招聘数据分析#2024年5月前程无忧招聘北上广深成渝对比情况

#招聘数据分析#2024年5月前程无忧招聘北上广深成渝对比情况 0、根据前程无忧不完全样本统计&#xff0c;北上广深成都重庆平均月工资从高到低依次为 北京15037元、上海14230元、深圳13230元、广州11125元、成都10614元、重庆10388。 1、成都招聘样本数全量36301个&#xff0c…

搭建gateway网关

1.创建springBoot项目 可以将Server URL换成start.aliyun.com 2.配置路由与跨域处理 路由&#xff1a; server:port: 10010 # 网关端口 spring:application:name: gateway # 服务名称cloud:nacos:server-addr: localhost:8848 # nacos地址gateway:routes: # 网关路由配置- i…

JavaScript解构赋值

一、数组解构 以上要么不好记忆&#xff0c;要么书写麻烦&#xff0c;此时可以使用解构赋值的方法让代码更简洁。 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。 基本语法&#xff1a; 1、赋值运算符左侧的[]用于批量声明变量&#xff0c;右侧数组的单元值将…