TypeScript 报错：Readonly<{}> 类型上不存在属性 'val'

在 TypeScript 开发中，你可能会遇到这样的报错信息：Readonly<{}> 类型上不存在属性 'val'。这个报错信息出现在使用 Readonly 泛型类型的时候，而且可能让你很不解。

本文将详解什么是 TypeScript 的 Readonly 泛型类型，以及为什么它出现这个报错信息，如何解决这个问题。

什么是 TypeScript 的 Readonly 泛型类型？

在 TypeScript 中，Readonly 是一个泛型类型，它可以用来将一个类型中的所有属性变成只读的。例如：

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

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = { name: 'Alice', age: 30 };

person.name = 'Bob'; // 报错：Cannot assign to 'name' because it is a read-only property.

上面代码中，我们定义了一个名为 Person 的接口，它包含了 name 和 age 两个属性。然后我们使用 Readonly 泛型类型创建了一个名为 ReadonlyPerson 的类型，它是 Person 类型中所有属性都是只读的。最后我们创建了一个 ReadonlyPerson 类型的变量 person，并尝试修改其中一个只读的属性 name，这将导致一个编译时错误。

为什么会出现 Readonly<{}> 类型上不存在属性 'val' 的报错信息？

在 TypeScript 中，我们可能会使用 Readonly 泛型类型来定义一些只读的对象。例如：

interface ReadonlyTest<T> {
    readonly val: T;
}

const test: ReadonlyTest<number> = { val: 123 };

上面代码中，我们定义了一个名为 ReadonlyTest 的泛型接口，它包含了一个只读属性 val。我们使用 number 类型实例化了这个泛型接口，并且尝试创建一个名为 test 的只读变量。

然而，如果你这样定义，可能会遇到这样的报错信息：

Readonly<{}> 类型上不存在属性 'val'。

这个报错信息的意思是表示，你的 Readonly<T> 泛型类型是空的，它没有任何属性，所以它无法使用 val 属性。

如何解决 Readonly<{}> 类型上不存在属性 'val' 的报错信息？

要解决这个问题，我们需要告诉 TypeScript 在泛型类型的定义中包含 val 属性。例如：

interface ReadonlyTest<T> {
    val: Readonly<T>;
}

const test: ReadonlyTest<number> = { val: 123 };

上面代码中，我们把 Readonly<T> 作为 val 属性的类型，在实例化泛型接口的时候，我们可以像 123 这样传入一个 number 类型的变量。

现在，你应该可以使用 ReadonlyTest<number> 类型，并且可以访问它的 val 属性了。

本文介绍了 TypeScript 的 Readonly 泛型类型以及它常见的报错信息 'Readonly<{}> 类型上不存在属性 'val''，并提供了解决方案。祝你在使用 TypeScript 开发中避免遇到这个问题。