深入理解TypeScript构造函数中的参数属性与编译行为：避免冗余赋值

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

class TestB {
    public name: string; // 显式声明属性
    constructor(name: string) {
        this.name = name; // 显式赋值
    }
}

"use strict";
class TestA {
    constructor(name) {
        this.name = name; // 自动生成的赋值
    }
}

class TestB {
    constructor(name) {
        this.name = name; // 手动编写的赋值
    }
}

class Coder {
    age : number; // 这是一个普通的类属性，不在参数属性讨论范围内

    constructor(
        public readonly name : string, // 参数属性：public + readonly
        age : number, // 普通参数
        public lang : string, // 参数属性：public
        private address : string, // 参数属性：private
        protected id : number = 234 // 参数属性：protected + 默认值
    ) {
        // 对参数属性进行显式赋值
        this.name = name; // 冗余赋值
        this.age = age; // 非参数属性，此处赋值是必要的
        this.lang = lang; // 冗余赋值
        this.address = address; // 冗余赋值
        this.id = Math.random(); // 冗余的初始赋值，然后被覆盖
    }

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

"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(); // 覆盖了自动生成的this.id = id;
    }
    getName() {
        return `My name is ${this.name}`;
    }
}

class Coder {
    age: number; // 普通类属性，需要手动声明和赋值

    constructor(
        public readonly name: string, // 参数属性，TypeScript自动处理
        age: number, // 普通参数，需要手动赋值给对应的类属性
        public lang: string, // 参数属性，TypeScript自动处理
        private address: string, // 参数属性，TypeScript自动处理
        protected id: number = 234 // 参数属性，TypeScript自动处理
    ) {
        // 对于 'age'，因为它没有访问修饰符，所以必须手动赋值给类属性
        this.age = age;

        // 对于 'name', 'lang', 'address'，TypeScript已经通过参数属性处理了声明和赋值
        // 无需再写 this.name = name; 等语句。

        // 对于 'id'，如果我们需要在构造函数中修改其初始值（由参数提供），
        // 可以在参数属性自动赋值之后进行。
        // 这里的 Math.random() 会覆盖由参数属性自动赋的 id 值。
        this.id = Math.random();
    }

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

// 示例使用
let coder = new Coder('Nayan', 28, 'JavaScript', 'LMP');
console.log(coder.getName()); // My name is Nayan
console.log(coder.age); // 28
// coder.name = 'Golu'; // 报错：name是只读属性
console.log(coder.id); // 每次运行都会是不同的随机数

"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.age = age;
        this.id = Math.random(); // 覆盖了上面的 this.id = id;
    }
    getName() {
        return `My name is ${this.name}`;
    }
}