object 类型 和 字符串索引签名类型的点属性

更新日期: 2019-11-19阅读: 1.9k标签: object

TypeScript 2.2 引入了一个新的 object 类型。它表示任何非基本类型。以下是 JS 的基本类型:

  • string
  • boolean
  • number
  • bigint
  • symbol
  • null
  • undefined

上述以外类型都被认为是非基本类型,可以用新的 object 类型表示:

// 所有基本类型
type Primitive =
  | string
  | boolean
  | number
  | bigint
  | symbol
  | null
  | undefined;

// 所有非基本类型
type NonPrimitive = object;


使用 object 类型的类型声明

随着 TypeScript 2.2 的发布,标准库的类型声明已经更新,以使用新的 object 类型。例如,object.create() 和 object.setprototypeof() 方法现的参数类型是 object | null

interface ObjectConstructor {

  create(o: object | null): any;

  setPrototypeOf(o: any, proto: object | null): any;

  // ...
}

将基本类型的值作为参数传递给 Object.setPrototypeOf() 或 Object.create() 会导致在运行时抛出类型错误。TypeScript 现在捕获这些错误并在编译时提示错误:

const proto = {};

Object.create(proto);     // OK
Object.create(null);      // OK
Object.create(undefined); // Error
Object.create(1337);      // Error
Object.create(true);      // Error
Object.create("oops");    // Error

object 类型的另一个用例是 ES6 引入的 WeakMap 数据结构。它的键必须是对象,不能是基本类型值:

interface WeakMap<K extends object, V> {
  delete(key: K): boolean;
  get(key: K): V | undefined;
  has(key: K): boolean;
  set(key: K, value: V): this;
}


object vs Object vs {}

可能令人困惑的是,TypeScript定义了几个具有相似名称但表示不同概念的类型:

  • object
  • Object
  • {}

上面已经讲过 object 类型,现在来看看 Object 和 {}。

Object 类型

TypeScript 定义了另一个与新 object 类型几乎同名的类型,那就是 Object 类型。object (小写)表示所有非基本类型,而 Object (大写)描述所有 JS 对象共有的功能。例如,它包括 toString() 和 hasOwnProperty() 方法。

在TypeScript附带的lib.es6.d.ts文件中,Object类型定义如下:

interface Object {
  // ...

  /** Returns a string representation of an object. */
  toString(): string;

  /** Returns a date converted to a string using the current locale. */
  toLocaleString(): string;

  /** Returns the primitive value of the specified object. */
  valueOf(): Object;

  /**
   * Determines whether an object has a property with the specified name.
   * @param v A property name.
   */
  hasOwnProperty(v: string): boolean;

  /**
   * Determines whether an object exists in another object's prototype chain.
   * @param v Another object whose prototype chain is to be checked.
   */
  isPrototypeOf(v: Object): boolean;

  /**
   * Determines whether a specified property is enumerable.
   * @param v A property name.
   */
  propertyIsEnumerable(v: string): boolean;
}

空类型 {}

还有另一种类型与之非常相似:{},即空类型。它描述了一个本身没有成员的对象。当咱们试图访问此类对象上的任意属性时,TypeScript 会提示编译时错误

// Type {}
const obj = {};

// Error: 类型“{}”上不存在属性“prop”
obj.prop = "value";

但是,仍然可以使用在 Object 类型上定义的所有属性和方法,这些属性和方法通过JS 的原型链调用:

// Type {}
const obj = {};

// "[object Object]"
obj.toString();


字符串索引签名类型的点属性

在 TypeScript 2.2 之前,如果想访问带有字符串索引签名的类型的任意属性,就必须使用[]符号,但不允许使用.符号访问

interface Dictionary<T> {
  [key: string]: T;
}

const portNumbers: Dictionary<number> = {};

// OK
portNumbers["http"] = 80;

// Error: Property 'http' does not exist on type 'Dictionary<number>'.
portNumbers.http = 80;

TypeScript 2.2 取消了这个限制。现在可以使用 [] 或 . 符号访问属性。在许多情况下,不再需要像这样令人不快的变通方法:

// 笨拙的方式
(portNumbers as any).http = 80;

请注意,类型必须定义显式字符串索引签名,以便用.符号访问对任意属性都是类型正确的。在类型使用上使用.符号访问未知属性仍然是一个错误,因此,对于以下代码,TypeScript 2.2 仍然会给出一个编译时错误:

const portNumbers = {};

// OK
portNumbers["http"] = 80;

// Error: Property 'http' does not exist on type '{}'.
portNumbers.http = 80;

如果仔细想想,就会发现这很有意义:如果 TypeScript 没有为这段代码提供一个错误,那么就没有对拼写错误的属性名的保护。在 JS 中访问属性时,大多数时候将使用点表示法,但也可以使用括号表示法作为转义。

有了这个较松的限制,对于常用JS 开发的人员来说更容易使用。如果咱们要将现有的 JS 代码基础迁移到 TypeScript,这尤其有用。给定适当的字符串索引签名,在这些情况下,就会获得更少的类型错误,并且不再需要使用类型注释注释点属性访问,这只是为了让编译器通过。

来源:https://mariusschulz.com/


链接: https://fly63.com/article/detial/6920

Js中Object对象的理解,Object常用的属性和方法有哪些?

在JavaScript中的所有对象都是继承Object对象而来的, 我们可以理解为Object是所有js对象通用的功能,讲解Object的prototype属性、Object.prototype属性和方法?Object.prototype.constructor属性等

Object.create()的使用总汇:创建对象,参数说明,兼容性的实现

JavaScript中Object.create()的含义和语法,使用它创建null原型的对象 ,创建一个普通的空对象,Object.create()第二个参数说明。

Javascript中的object相等

相等是JavaScript中起初最让人困惑的部分。==和===的比较、强制类型的顺序等等,都使得这个问题变得复杂。今天,我们会聚焦另一个方面:object相等是如何实现的。

js 中 Object.defineProperty 的用法

还能通过 Object.defineProperty() 方法,添加或修改对象的属性。更重要的是,除了目标对象 obj,属性名称 prop 外,方法能传入属性描述符 descriptor,以实现更复杂的性质。属性描述符是一个对象,有两种形式:一种是数据描述符,另一种是存取描述符。

理解js中Object的defineProperty()和defineProperties()

Object的defineProperty和defineProperties这两个方法在js中的重要性十分重要,主要功能就是用来定义或修改这些内部属性,与之相对应的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是获取这行内部属性的描述。

js中的Object.defineProperty()和defineProperties()

Object.defineProperty()该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,Object.defineProperties()该方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象

Object.keys方法

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

Js中Object.freeze()方法

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。

Js Object.freeze和Object.seal

本文实例讲述了JS Object.preventExtensions(),Object.seal()与Object.freeze()用法。分享给大家供大家参考,Object.preventExtensions 只能阻止一个对象不能再添加新的自身属性,仍然可以为该对象的原型添加属性。

Object.assign实现浅拷贝的原理

什么是浅拷贝?浅拷贝就是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。浅拷贝Object.assign()是什么?主要将所有可枚举属性的值从一个或者多个数据源对象复制到目标对象,同时返回目标对象。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!