TypeScript参数属性与重复声明详解

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《TypeScript参数属性与重复声明解析》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

本文深入探讨TypeScript类构造函数中，当同时使用参数属性（带有访问修饰符的构造函数参数）和手动属性赋值时，编译为JavaScript代码可能出现的重复变量声明问题。文章解释了TypeScript参数属性的编译机制，指导开发者如何避免这种冗余，以编写更简洁高效的代码，并提升对TypeScript底层编译行为的理解。

理解TypeScript的类与构造函数

在TypeScript中，我们使用class关键字定义类，并通过constructor方法来初始化类的实例。类可以包含属性和方法，属性可以预先声明，也可以在构造函数中初始化。为了更好地控制属性的可见性和可变性，TypeScript引入了访问修饰符（public、private、protected）和readonly修饰符。

一个典型的TypeScript类结构如下：

class Product {
    public id: number;
    private name: string;
    protected price: number;

    constructor(id: number, name: string, price: number) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

    getDescription(): string {
        return `Product ID: ${this.id}, Name: ${this.name}`;
    }
}

参数属性：TypeScript的语法糖

TypeScript提供了一种便捷的语法，允许开发者在构造函数参数中直接声明和初始化类属性。这种特性被称为“参数属性”（Parameter Properties）。当你在构造函数参数前加上访问修饰符（public, private, protected）或readonly修饰符时，TypeScript编译器会自动完成两件事：

1. 在类上声明一个同名的属性。
2. 在构造函数体内部，将该参数的值赋给对应的类属性（即this.propertyName = parameterName）。

例如，以下TypeScript代码：

class TestA {
    constructor(public readonly name: string) {
        // 无需手动赋值
    }
}

编译为JavaScript后，等价于：

class TestA {
    constructor(name) {
        this.name = name; // 自动声明并赋值
    }
}

可以看到，public readonly name: string 不仅声明了name属性为公共只读，还在构造函数内部自动执行了this.name = name;的赋值操作。

重复声明问题及其根源

当开发者不了解参数属性的这一自动行为时，可能会在构造函数中同时使用参数属性，又手动进行赋值，从而导致编译后的JavaScript代码出现重复的属性声明和赋值。

考虑以下TypeScript代码示例：

class Coder {
    // age 属性未在参数中声明访问修饰符
    age: number;

    constructor(
        public readonly name: string, // 参数属性
        age: number,
        public lang: string,         // 参数属性
        private address: string,     // 参数属性
        protected id: number = 234   // 参数属性
    ) {
        // 手动赋值，与参数属性的自动行为重复
        this.name = name;
        this.age = age; // age不是参数属性，手动赋值是必要的
        this.lang = lang;
        this.address = address;
        this.id = Math.random(); // id也是参数属性，这里进行了二次赋值
    }

    getName(): string {
        return `My name is ${this.name}`;
    }
}

这段代码编译为JavaScript后，会产生类似如下的冗余：

"use strict";
class Coder {
    constructor(name, age, lang, address, id = 234) {
        // TypeScript自动生成的赋值（来自参数属性）
        this.name = name;
        this.lang = lang;
        this.address = address;
        this.id = id;

        // 开发者手动添加的赋值（与自动生成的部分重复）
        this.name = name; // 重复
        this.age = age; // 必要
        this.lang = lang; // 重复
        this.address = address; // 重复
        this.id = Math.random(); // 重复且覆盖了之前的赋值
    }
    getName() {
        return `My name is ${this.name}`;
    }
}

从编译后的JavaScript代码可以看出，name、lang、address和id属性都被赋值了两次。第一次赋值是TypeScript编译器根据参数属性自动生成的，第二次赋值是开发者在构造函数体内部手动添加的。这种重复不仅违反了DRY（Don't Repeat Yourself）原则，也可能导致意料之外的行为（例如id属性最终会被Math.random()的值覆盖）。

正确使用参数属性

为了避免这种重复和冗余，当你在构造函数参数中使用了访问修饰符或readonly修饰符时，就不应该在构造函数体内部再次手动为这些属性赋值。

修正后的Coder类应如下所示：

class Coder {
    // 如果age不是参数属性，则需要在此处声明或在构造函数内手动赋值
    // 或者直接将其也作为参数属性
    // public age: number; // 方式一：预先声明

    constructor(
        public readonly name: string,
        public age: number, // 将age也声明为参数属性，简化代码
        public lang: string,
        private address: string,
        protected id: number = 234
    ) {
        // 只有age属性需要手动赋值，因为它在原始问题中没有访问修饰符
        // 如果将age也改为参数属性（如上），则构造函数体可以完全清空
        // this.age = age; // 如果age不是参数属性，则需要此行

        // 如果需要对参数属性进行额外处理或覆盖其初始值，
        // 则在参数属性自动赋值之后进行即可。
        this.id = Math.random(); // 覆盖了默认值或传入的id值
    }

    getName(): string {
        return `My name is ${this.name}`;
    }
}

在这种修正后的代码中，name、age、lang、address和id都作为参数属性，TypeScript编译器会自动为它们创建类属性并进行赋值。只有当你有意覆盖参数属性的初始值（如this.id = Math.random();），才需要在构造函数体中显式地再次赋值。

编译后的JavaScript将更加简洁：

"use strict";
class Coder {
    constructor(name, age, lang, address, id = 234) {
        this.name = name;
        this.age = age;
        this.lang = lang;
        this.address = address;
        this.id = id; // 自动赋值

        this.id = Math.random(); // 覆盖之前的赋值
    }
    getName() {
        return `My name is ${this.name}`;
    }
}

注意事项与总结

• 理解参数属性的本质： 它们是TypeScript提供的语法糖，用于简化类属性的声明和初始化。
• 避免冗余赋值： 当构造函数参数带有访问修饰符时，TypeScript会自动完成属性的声明和赋值。除非有特殊需求（如在赋值后立即修改属性值），否则不要在构造函数体内部重复赋值。
• 提高代码可读性与简洁性： 正确利用参数属性可以显著减少类的代码量，使其更加简洁易读。
• 特殊情况： 如果某个属性的初始化逻辑比较复杂，或者需要根据其他逻辑来决定其值，那么将其作为普通参数传入并在构造函数体中手动赋值是更合适的选择。

通过深入理解TypeScript的编译行为，特别是参数属性的工作原理，开发者可以编写出更符合DRY原则、更高效且无冗余的TypeScript代码。

理论要掌握，实操不能落！以上关于《TypeScript参数属性与重复声明详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！