TypeScript中访问myStackObj.isProd报错，如何正确访问接口属性？

你的代码问题在于：MyStack类仅在构造函数中接收了props参数，但没有将props里的isProd存储为类的实例属性，所以实例myStackObj根本不存在isProd这个可访问的属性。

修正方案1：显式声明实例属性并赋值 #

最直观的写法，先在类里声明对应属性，再在构造函数中把传入的isProd赋值给它：

interface MyStackProps {
    readonly isProd?: boolean;
}

class MyStack {
    // 声明与props匹配的实例属性（可选、只读）
    readonly isProd?: boolean;

    constructor(props?: MyStackProps){
        // 用可选链处理props可能为undefined的情况
        this.isProd = props?.isProd;
    }
}

let myStackObj = new MyStack({isProd: true});
myStackObj.isProd; // 现在可正常访问，值为true

修正方案2：使用TypeScript参数属性语法（简洁写法） #

TypeScript支持在构造函数参数前添加修饰符（如readonly），自动将参数转为实例属性：

interface MyStackProps {
    readonly isProd?: boolean;
}

class MyStack {
    // 直接将props参数转为实例的只读属性
    constructor(readonly props?: MyStackProps){
    }
}

let myStackObj = new MyStack({isProd: true});
myStackObj.props?.isProd; // 通过props属性访问isProd

修正方案3：解构参数直接提取isProd #

如果不想通过props层级访问，可在构造函数中解构参数：

interface MyStackProps {
    readonly isProd?: boolean;
}

class MyStack {
    readonly isProd?: boolean;

    // 解构props，默认空对象避免无参数时报错
    constructor({isProd}: MyStackProps = {}){
        this.isProd = isProd;
    }
}

let myStackObj = new MyStack({isProd: true});
myStackObj.isProd; // 直接访问isProd属性

内容的提问来源于stack exchange，提问作者Gigi