如何通过构造函数传入对象高效设置TypeScript类实例属性？

云上老周

2026-7-15

高效解决TypeScript接口与类属性冗余问题

你可以利用TypeScript的参数属性特性，结合接口约束，彻底消除重复声明属性的冗余，同时完美支持可选字段，还能保持直接访问实例属性的便利性。

核心方案：构造函数参数属性直接绑定

直接在构造函数参数前添加readonly修饰符，TypeScript会自动帮你创建对应的类属性并完成赋值，无需手动声明和赋值步骤：

interface MyInterface {
    readonly valA?: number; // 支持可选字段
    readonly valB: number;
}

class MyClass implements MyInterface {
    // 直接通过参数属性实现接口成员，自动完成属性创建与赋值
    constructor(
        public readonly valA?: number,
        public readonly valB: number
    ) {}
}

// 可选字段可省略
const myClassInstance = new MyClass(undefined, 2);
console.log(myClassInstance.valA); // undefined
console.log(myClassInstance.valB); // 2

// 也可以传入完整参数
const anotherInstance = new MyClass(1, 3);
console.log(anotherInstance.valA); // 1

进阶：解构接口对象入参

如果希望构造函数接收一个完整的接口对象（像原示例那样），可以通过解构参数结合参数属性实现，同样无需重复声明：

interface MyInterface {
    readonly valA?: number;
    readonly valB: number;
}

class MyClass implements MyInterface {
    public readonly valA?: number;
    public readonly valB: number;

    constructor({ valA, valB }: MyInterface) {
        // 解构后直接赋值，只需维护接口定义即可
        this.valA = valA;
        this.valB = valB;
    }
}

const myClassInstance = new MyClass({ valB: 2 });
console.log(myClassInstance.valA); // undefined
console.log(myClassInstance.valB); // 2