当前位置: 首页 > news >正文

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值。

相关文章:

  • 开发和渗透偷懒利器utools
  • 鲁教版七年级数学下册-笔记
  • OCR图片转Excel表格:没结构化的弊端
  • JS(DOM、事件)
  • 【MyBatis】MyBatis操作数据库(二):动态SQL、#{}与${}的区别
  • Amazon云计算AWS(二)
  • 发布 jar 包到 maven 中央仓库
  • 2024-06-03 问AI: 什么是TPU Pod?
  • 最小二乘法算法(个人总结版)
  • 列表推导式妙用(i for i in lst):python使用列表推导式,把二维列表数据放入一维列表中(高维数据放入低维列表)
  • Nginx的Location匹配与Rewrite重写
  • Python知识点10---函数
  • 【linux-imx6ull-设备树点灯】
  • 【第9章】SpringBoot中Bean的扫描和注册
  • 【UE5:CesiumForUnreal】——加载无高度地形数据
  • 5、React组件事件详解
  • IOS评论框不贴底(ios12新bug)
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • opencv python Meanshift 和 Camshift
  • Redash本地开发环境搭建
  • Redis中的lru算法实现
  • Vue UI框架库开发介绍
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 产品三维模型在线预览
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 分布式任务队列Celery
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 给Prometheus造假数据的方法
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 推荐一个React的管理后台框架
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • 关于Android全面屏虚拟导航栏的适配总结
  • 数据库巡检项
  • ​​​【收录 Hello 算法】10.4 哈希优化策略
  • ​2021半年盘点,不想你错过的重磅新书
  • # 利刃出鞘_Tomcat 核心原理解析(二)
  • #define 用法
  • (14)Hive调优——合并小文件
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第2节(共同的基类)
  • (SpringBoot)第七章:SpringBoot日志文件
  • (附源码)计算机毕业设计SSM基于健身房管理系统
  • (附源码)计算机毕业设计SSM疫情社区管理系统
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (三)elasticsearch 源码之启动流程分析
  • (转)jQuery 基础
  • (转)创业家杂志:UCWEB天使第一步
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • ***利用Ms05002溢出找“肉鸡
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .net SqlSugarHelper
  • .NET 反射 Reflect
  • .net 验证控件和javaScript的冲突问题