# 对象类型

几种常用的使用方式

# 类型定义

在 JavaScript 中,我们分组和传递数据的基本方式是通过对象。在 TypeScript 中,我们通过对象类型来表示它们。

# 匿名类型

它们可以是匿名的:

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

# 接口

可以声明为接口

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

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

# 类型别名

也可以声明为别名

type Person = {
  name: string, // 倔强的格式化工具,这里是分号;
  age: number,
};

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

# 属性修饰符

对象类型中的每个属性都可以指定一些东西:类型、属性是否可选以及属性是否可以写入。

# 可选属性

很多时候,我们会发现自己处理的对象可能有一个属性集。在这些情况下,我们可以通过在属性名称的末尾添加问号(?)来将这些属性标记为可选的。

interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

# 只读属性

对于 TypeScript,属性也可以被标记为只读。虽然它不会在运行时改变任何行为,但标记为只读的属性在类型检查期间不能写入

interface  sometype {
    readonly label: string;
}

label 只能读,不能写

# 索引签名

有时,您不知道类型属性的所有名称,但您知道值的类型

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

看这个例子:

interface IUser {
  name: string;
  age: number;
  [propName: string]: any;
}

const a: IUser = { name: "FSFS", age: 12, level: 26 };

对于接口的可扩展性非常的重要。

# 类型继承

interface a {
  length: number;
}
interface b extends a {
  size: number;
}

# 交叉类型

在高级类型中有所提及

interface a {
  length: number;
}
type b = a & {
  size: number,
};

# 泛型

定义方式与函数中的定义差不多

interface Box<Type> {
  contents: Type;
}

使用

const a: Box<string> = {
  contents: "fsfsdfsf",
};

当然了。使用类型别名也可以实现

type Box<Type> = {
  contents: Type;
};

还有一些其他的使用方式

type OrNull<Type> = Type | null;

type OneOrMany<Type> = Type | Type[];

在这里提一下 Promise,也是支持泛型的, Promise<T>

# 数组类型 Array

Array 也是使用了泛型来定义数组类型,推荐 T[] 定义数组

function doSomething(value: Array<string>) {
  // ...
}

let myArray: string[] = ["hello", "world"];

# 只读数组 ReadonlyArray

ReadonlyArray 是一种特殊类型,用于描述不应该更改的数组

function doStuff(values: ReadonlyArray<string>) {
  const copy = values.slice();
  // 这里会报错,因为这里是只读的
  values.push("hello!");
}

这样也是可以的

let x: readonly string[] = [];

# 元组

type lnglat = [number, number];

有意思的用法

type StringNumberBooleans = [string, number, ...boolean[]];
type StringBooleansNumber = [string, ...boolean[], number];
type BooleansStringNumber = [...boolean[], string, number];

对于 function 的参数

function readButtonInput(...args: [string, number, ...boolean[]]) {
  const [name, version, ...input] = args;
  // ...
}

# 只读元组

function doSomething(pair: readonly [string, number]) {
  // ...
}