TypeScript对象类型

废话不多说，还是挑点有营养的讲。

对象类型

1、匿名对象

匿名对象类型是在定义变量时直接使用花括号{}，来定义一个对象类型。

const person: { name: string, age: number } = { name: 'John', age: 25 };

2、接口类型

使用接口来定义对象类型，可以使代码更加可读、易于维护

interface Person {
  name: string;
  age: number;
}
 
const person: Person = { name: 'John', age: 25 };

3、类别类型

使用类型别名可以为对象类型定义简短、易读的名称。

type Person = {
  name: string;
  age: number;
}
 
const person: Person = { name: 'John', age: 25 };

4.快速模仿

对象解构

还是跟JS一样

let person:{ownName:string,gender:string} = {
    ownName: "Semlinker",
    gender: "Male",
};
let { ownName, gender } = person;
console.log(ownName)
console.log(gender)

对象属性

1. 可选属性

顾名思义，不是必须存在的属性。用?标识出来。

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

或者

let player:{name:string,level?:number} = {name:'a'}

2、只读属性

TypeScript中，我们可以声明一个对象类型中的属性为只读属性，即该属性的值一旦被赋值就不能再被修改。

type Student = {
  readonly name: string;
  age: number;
}

3. 索引签名

对象类型可以包含索引签名，以支持在动态属性上访问属性值。索引签名允许您在对象类型中定义一个模式，该模式指定应该具有哪些属性和属性类型

interface ExampleObject {
  [key: string]: string;
}
 
const exampleObject: ExampleObject = {
  name: "小星星",
  class: "小班",
  // ...
};

注意这里是[key:xxx]。这里代表exampleObject里的键名是字符串，值也是字符串。

利用这个特性，我们可以创造出类数组对象：

interface ExampleObject {
  [key: number]: string;
}
 
const exampleObject: ExampleObject = {
  0: "value1",
  1: "value2",
  // ...
};
1

规定只读属性

interface ExampleObject {
  readonly [key: string]: string;
}

键值是联合类型：

interface ExampleObject {
  [key: string]: string | number;
}

4.扩展类型

TypeScript中的对象类型是通过接口来定义的，接口可以扩展其他接口，从而实现对象类型的扩展。

interface Person {
  name: string;
  age: number;
}
 
interface Student extends Person {
  school: string;
  grade: string;
}

5.交叉类型（&）

看前面推文。

交叉类型和interface的extends扩展类型的区别

与交叉类型相比，使用interface的extends扩展类型可以实现类似的效果，但是它们的设计思想不同。extends用于在一个类型基础上扩展属性和方法，而交叉类型则是将多个类型合并起来以创建一个新的类型。

6.泛型对象类型

泛型具体的内容可以看我的其他推文。

泛型对象类型可以用于对象属性中的类型声明。例如，以下代码定义了一个对象类型，该对象具有不同类型的属性：

interface List {
  data: T[]
  add: (item: T) => void
}
 
const list1: List<string> = {
  data: ['hello', 'world'],
  add(item) {
    this.data.push(item)
  }
}
 
const list2: List<number> = {
  data: [1, 2],
  add(item) {
    this.data.push(item)
  }
}

在上面的代码中，表示泛型对象类型，我们在List中使用了该类型，以声明data属性和add方法的参数和返回类型。