手册（进阶）——3.1 高级类型 代码报错

[gjssss]

手册（进阶）——3.1 高级类型 代码报错

[zhongsp]

Hi @gjssss ,

报错是因为启用了 strictNullChecks 编译选项。如果关闭该选项，代码就可以运行了。

但根本原因是这段代码确实有 bug，因为它直接在 first 上调用了 first.hasOwnProperty(prop)，但 first 上不一定有该方法。例如 first = Object.create({}, null)。

extend 函数将两个参数的自身可枚举属性复制到 result 上。您说的无法获取 log 方法指的是哪里？

[gjssss]

Hi @gjssss ,

报错是因为启用了 strictNullChecks 编译选项。如果关闭该选项，代码就可以运行了。

但根本原因是这段代码确实有 bug，因为它直接在 first 上调用了 first.hasOwnProperty(prop)，但 first 上不一定有该方法。例如 first = Object.create({}, null)。

extend 函数将两个参数的自身可枚举属性复制到 result 上。您说的无法获取 log 方法指的是哪里？

您好，谢谢您的回答，我关闭了strictNullChecks的编译选项，我这边说的log方法指的是最后一句代码jim.log(jim.name);

而当我试图显示其log属性时显示undefined

为什么会出现这种情况呀，看样子好像是函数extend中second对象没有log属性，我试着打印second的内容发现显示出[LOG]: ConsoleLogger: {} 是一个空对象，不清楚出了什么状况。
下面是我运行的完整代码，不知道是不是因为我代码出了错。

function extend<First, Second>(first: First, second: Second): First & Second {
    const result: Partial<First & Second> = {};
    for (const prop in first) {
        if (first.hasOwnProperty(prop)) {
            (result as First)[prop] = first[prop];
        }
    }
    for (const prop in second) {
        if (second.hasOwnProperty(prop)) {
            (result as Second)[prop] = second[prop];
        }
    }
    // 显示second时是空对象
    console.log(second);
    return result as First & Second;
}

class Person {
    constructor(public name: string) { }
}

interface Loggable {
    log(name: string): void;
}

class ConsoleLogger implements Loggable {
    log(name: string) {
        console.log(`Hello, I'm ${name}.`);
    }
}

const jim = extend(new Person('Jim'), ConsoleLogger.prototype);
// 运行错误
jim.log(jim.name);
// console.log(jim); // jim对象只有name属性

最后谢谢您的回答和热心帮助！

[zhongsp]

@gjssss Aha! 我在重现的时候顺手设置了 target: es5 所以没问题，Playground 默认应该是 ESNext。手册里写了，可能没注意：下面是如何创建混入的一个简单例子("target": "es5")：。

在目标为 ES5 时，TS 会将 class 转换成 function，而 ESNext 则直接使用 class。这两者对可枚举属性的定义不同。ES5 下 log 是可枚举属性，内部属性 [[Enumerable]]: true。而 ES6 以后，ConsoleLogger.prototype 上的 log 是不可枚举属性，内部属性 [[Enumerable]]: false。

[gjssss]

@zhongsp 啊！谢谢！我可能没搞清楚("target": "es5")是什么意思，谢谢！麻烦啦！