面试题：TypeScript接口只读与可选属性在函数参数中的应用

Question

编写一个TypeScript函数，该函数接受一个接口类型的参数，接口中包含一个只读属性`readonlyValue`（类型为布尔值）和一个可选属性`optionalValue`（类型为数组，数组元素为数字）。在函数内部，尝试修改`readonlyValue`并访问`optionalValue`，解释会出现什么情况以及为什么，同时说明如何在函数中正确处理这两种属性。

Answer 1

interface MyInterface {
    readonly readonlyValue: boolean;
    optionalValue?: number[];
}

function myFunction(param: MyInterface) {
    // 尝试修改readonlyValue会报错，因为它是只读属性
    // param.readonlyValue = false; 
    // 上述代码会报错，错误信息类似于：
    // Cannot assign to'readonlyValue' because it is a read - only property.

    // 访问optionalValue是可以的，需要先检查其是否存在
    if (param.optionalValue) {
        console.log(param.optionalValue);
    }
}

解释：

• 对于只读属性readonlyValue，TypeScript 不允许在定义后对其进行修改，这是为了保证数据的不可变性。如果尝试修改，TypeScript 编译器会抛出错误，以防止意外的数据篡改。
• 对于可选属性optionalValue，在访问它之前需要先检查其是否存在，因为该属性不一定会在传入的对象中定义。如果不进行检查直接访问，在运行时可能会导致undefined引用错误。

正确处理方式：

• 不要尝试修改readonlyValue。如果确实需要修改该值的逻辑，应该重新设计数据结构，例如将其变为普通属性或者通过某种可变更的代理机制来处理。
• 对于optionalValue，在使用前通过if语句检查其是否存在，确保代码在运行时不会因为访问undefined而报错。