JS的对象创建和TS的对象创建

JavaScript 负责真正创建对象；TypeScript 不会发明新的运行时对象创建方式，它主要是在 JS 创建对象的基础上增加类型约束。

JS中创建对象的方法

一、对象字面量{}

对象字面量是最常见的对象创建方式，适合创建结构简单、一次性的对象。

const user = {
  name: "Tom",
  age: 20,
  sayHi() {
    console.log("Hi");
  }
};

二、new Object()

new Object() 也可以创建对象，但写法比较啰嗦，实际开发中通常使用对象字面量。

const user = new Object();

user.name = "Tom";
user.age = 20;

三、构造函数创建对象

构造函数配合 new 使用，可以批量创建同一类对象。new 会创建一个新对象，并让构造函数内部的 this 指向这个新对象。

function User(name, age) {
  this.name = name;
  this.age = age;
}

const user1 = new User("Tom", 20);
const user2 = new User("Jerry", 22);

四、原型模式

构造函数通常配合原型使用，把实例自己的属性放在构造函数里，把共享方法放在 prototype 上，避免重复创建方法，节省内存。

如果方法写在构造函数里，每创建一个对象都会复制一份方法：

function User(name) {
  this.name = name;
  this.sayHi = function () {
    console.log(this.name);
  };
}

更好的方式是把共享方法放到原型上：

function User(name) {
  this.name = name;
}
User.prototype.sayHi = function () {
  console.log(this.name);
};
const user = new User("Tom");
user.sayHi();
// 这样所有实例共享同一个 sayHi 方法。

五、class 创建对象

class 本质上还是基于原型机制的语法糖，它比构造函数更清晰，尤其适合面向对象写法。

ES6 以后更常用 class。

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log(this.name);
  }
}
const user = new User("Tom", 20);

六、Object.create()

Object.create() 可以创建一个指定原型的新对象，常用于理解和控制原型链。

Object.create() 可以指定新对象的原型。

const person = {
  sayHi() {
    console.log("Hi");
  }
};
const user = Object.create(person);
user.name = "Tom";
user.sayHi(); // Hi
// 这里 user 的原型是 person。

// 还有一个特殊写法：
const obj = Object.create(null);
//这个对象没有原型
console.log(obj.toString); // undefined

七、工厂函数创建对象

工厂函数通过函数封装对象创建逻辑，返回一个新对象，适合创建结构相似但不想使用 class 或构造函数的场景。

工厂函数就是普通函数返回一个对象。

function createUser(name, age) {
  return {
    name,
    age,
    sayHi() {
      console.log(this.name);
    }
  };
}
const user = createUser("Tom", 20);

八、使用展开运算符或 Object.assign() 创建新对象

展开运算符和 Object.assign() 常用于浅拷贝和对象合并，但它们只做浅拷贝，嵌套对象仍然共享引用。

这类方式常用于复制或合并对象。

const user = {
  name: "Tom",
  age: 20
};
const newUser = {
  ...user,
  age: 21
};

九、JSON.parse() 创建对象

常见于接口返回数据、本地存储数据解析。

const str = '{"name":"Tom","age":20}';

const user = JSON.parse(str);
// 这个对象来自 JSON 字符串解析。得到的是普通对象，不会自动带上类的方法。

TS中创建对象方法

一、对象字面量 + 类型注解

这种方式直接，但类型写在变量旁边，复杂时不够优雅。

const user: { name: string; age: number } = {
  name: "Tom",
  age: 20
};

二、使用 interface 约束对象

在 TS 中，interface 常用于描述对象结构，规定对象必须有哪些属性和方法。

interface User {
  name: string;
  age: number;
  sayHi(): void;
}

const user: User = {
  name: "Tom",
  age: 20,
  sayHi() {
    console.log(this.name);
  }
};

三、使用type约束对象

interface 更适合描述对象、类、可扩展结构；type 更灵活，可以描述联合类型、交叉类型、复杂类型组合

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

const user: User = {
  name: "Tom",
  age: 20
};

四、使用class创建对象

TypeScript 中的 class 不仅可以创建对象，还可以通过类型注解、访问修饰符、接口实现等方式增强面向对象开发的安全性。

TS 里的 class 比 JS 多了类型检查。

class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHi(): void {
    console.log(this.name);
  }
}
const user = new User("Tom", 20);

// 还可以加访问修饰符
class User {
  public name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

五、构造函数类型

不过在 TS 里，更推荐使用 class，而不是传统构造函数。

function User(this: any, name: string, age: number) {
  this.name = name;
  this.age = age;
}

六、工厂函数 + 返回类型

interface User {
  name: string;
  age: number;
}
function createUser(name: string, age: number): User {
  return {
    name,
    age
  };
}
const user = createUser("Tom", 20);

// 还可以用泛型
function createItem<T>(item: T): T {
  return item;
}

const user = createItem({
  name: "Tom",
  age: 20
});

七、Record 创建对象类型

如果对象的 key 和 value 有固定规则，可以用 Record。

type Scores = Record<string, number>;
const scores: Scores = {
  math: 90,
  english: 85
};
// key 是 string，value 是 number

八、类型断言创建对象

类型断言不会真的创建属性，只是告诉编译器把某个值当成某种类型，所以不能滥用。

interface User {
  name: string;
  age: number;
}
const user = {} as User;
user.name = "Tom";
user.age = 20;
// 这种方式可以用，但要谨慎。实际上对象一开始是空的，只是你告诉 TS：“你相信我，它是 User 类型。”如果后面没有正确赋值，运行时可能出错。

九、Partial<T> 创建部分对象

interface User {
  name: string;
  age: number;
  email: string;
}
const user: Partial<User> = {
  name: "Tom"
};
// Partial<User> 表示 User 里的属性都变成可选。