如何在 TypeScript 中初始化类型化的空对象

作者

在 TypeScript 中初始化一个类型化的空对象

Initialize a typed, empty Object using an Interface in TS

使用类型断言在 TypeScript 中初始化类型化的空对象。

然后，您可以使用点或括号表示法设置对象的属性。您在对象上设置的所有属性都需要符合该类型。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const emp1 = {} as Employee;

emp1.id = 1;
emp1.name = 'Bobby Hadz';
emp1.salary = 100;

我们使用
类型断言
为类型变量声明一个空对象。

有时我们拥有 TypeScript 无法知道的有关值类型的信息。

从远程源（如数据库）获取数据时通常会出现这种情况。在这种情况下，您可以使用类型断言将变量转换为特定类型。

如果您尝试向不符合接口属性的对象添加属性，则会引发错误。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const emp1 = {} as Employee;

// ⛔️ Error: Property 'example' does
// not exist on type 'Employee'.ts(2339)
emp1.example = 'hello';

该emp1变量的类型为Employee，因此尝试设置与该类型不兼容的属性会给我们带来错误。

你不需要设置所有的required属性

required但是，一旦您使用了类型断言，您就不需要设置所有属性。

索引.ts
interface Employee {
  id: number;
  name: string;
  salary: number;
}

const emp1 = {} as Employee;

emp1.id = 1; // ✅ OK

我们已经告诉 TypeScript 变量emp1存储了一个Employee类型，所以它已经假定emp1变量具有一个类型的所有属性
Employee。

使用 Partial 初始化一个类型化的空对象

或者，您可以使用Partial实用程序类型并将界面中的所有属性设置为可选。

索引.ts
interface Employee {
  id: number;
  name: string;
}

const emp1: Partial<Employee> = {};

emp1.id = 1;

emp1.name = 'Bobby Hadz';

Partial实用程序类型使我们能够将该类型的所有属性设置为可选。

这样我们就可以将类型变量声明为空对象而不会出错。

此解决方案与之前的解决方案之间的区别在于，我们明确表示该类型的所有属性Animal都是可选的。

如果您事先不知道类型属性的所有名称，请使用索引签名。

索引.ts
interface Employee {
  id: number;
  name: string;
  [key: string]: any;
}

const emp1 = {} as Employee;

emp1.id = 1;
emp1.name = 'Alice';

emp1.years = [2022, 2023];
emp1.salary = 100;

该{[key: string]: any}语法是
TypeScript 中的索引签名，当我们事先不知道类型属性的所有名称和值的形状时使用。

示例中的索引签名意味着当一个对象被索引为 a 时string，它将返回一个any类型的值。

使用 Record 初始化一个类型化的空对象

您还可以使用Record实用程序类型来初始化类型化的空对象。

索引.ts
interface Employee {
  id: number;
  name: string;
}

const emp1: Employee | Record<string, never> = {};

该emp1变量可以设置为空对象或 type 的值
Employee。

我还写了一篇关于
如何检查对象是否实现接口的文章。

使用类初始化类型化的空对象

您还可以使用类来初始化类型化的空对象。

索引.ts
interface Employee {
  id: number;
  name: string;
}

class Employee implements Employee {
  id = 0;
  name = '';
}

const emp1 = new Employee();
console.log(emp1); // 👉️ Employee { id: 0, name: '' }

emp1.id = 1;
emp1.name = 'Bobby Hadz';

console.log(emp1); // 👉️ Employee { id: 1, name: 'Bobby Hadz' }

该类Employee创建 类型的对象Employee。

Each instance is initialized to have an id property with a value of 0 and a
name property with a value of an empty string.

If you need to check if an object is empty in TS, click on the
following link.

I’ve also written an article on
how to create an object based on an interface in TS.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: