typescript

TypeScript 的 Object Types

2021-08-08  本文已影响0人  _扫地僧_

有三种方式定义 TypeScript 的 object Types.

1. 匿名类型 - anonymous type

function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

2. 使用 interface

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


function greet(person: Person) {
  return "Hello " + person.name;
}

3. 使用 type alias

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


function greet(person: Person) {
  return "Hello " + person.name;
}

对象类型中的每个属性都可以指定几项内容:类型、属性是否可选以及是否可以写入该属性。

read only 属性

使用 readonly 修饰符并不一定意味着一个值是完全不可变的——或者换句话说,被 readonly 修饰的属性,并不意味着它的内部内容不能改变。 这只是意味着属性本身不能被重写。

interface Home {
  readonly resident: { name: string; age: number };
}


function visitForBirthday(home: Home) {
  // We can read and update properties from 'home.resident'.
  console.log(`Happy birthday ${home.resident.name}!`);
  home.resident.age++;
}


function evict(home: Home) {
  // But we can't write to the 'resident' property itself on a 'Home'.
  home.resident = {
Cannot assign to 'resident' because it is a read-only property.Cannot assign to 'resident' because it is a read-only property.
    name: "Victor the Evictor",
    age: 42,
  };
}

Index Signatures - 索引签名

有时您事先并不知道类型属性的所有名称,但您确实知道值的形状。

在这些情况下,您可以使用索引签名来描述可能值的类型,例如:

interface StringArray {
  [index: number]: string;
}


const myArray: StringArray = getStringArray();
const secondItem = myArray[1];

StringArray 的含义是,我们有一个 StringArray 接口,它有一个索引签名。 此索引签名指出,当 StringArray 用数字索引时,它将返回一个字符串。

Whenever we write out types like number[] or string[], that’s really just a shorthand for Array<number> and Array<string>.

number[] 和 string[] 是 Array<number> 和 Array<string> 的简写。

Turple - 元组

元组类型是另一种数组类型,它确切地知道它包含多少个元素,以及它在特定位置包含哪些类型。

这里,StringNumberPair 是字符串和数字的元组类型。 与 ReadonlyArray 一样,它在运行时没有表示,但对 TypeScript 很重要。 对于类型系统,StringNumberPair 描述了数组,其 0 索引包含一个字符串,其 1 索引包含一个数字。

元祖的析构

元组类型在大量基于约定的 API 中很有用,其中每个元素的含义都是“显而易见的”。 这使我们在解构变量时可以灵活地命名变量。 在上面的示例中,我们可以将元素 0 和 1 命名为我们想要的任何名称。

但是,由于并非每个用户都对显而易见的事情持有相同的看法,因此可能值得重新考虑使用具有描述性属性名称的对象是否对您的 API 更好。

上一篇下一篇

猜你喜欢

热点阅读