TypeScript 学习总结 —— 参数属性

问题描述

• 在类中，可以对属性或方法进行权限约束，例如 public(默认)、protected、private、readonly(ts)
• 我们可能会写这样的代码

class Person {
    public name
    protected jobs
    private age
    readonly sex
    
    constructor (name, jobs, age, sex) {
        this.name = name
        this.jobs = jobs
        this.age = age
        this.sex = sex
    }

    say () {
        console.log(this.name, this.jobs, this.age, this.sex)
    }
}

let p = new Person('aa', 'bb', 12, '女')

p.say()

解决方式

• 如果使用参数属性的话，上面的代码可以更简洁

class Person {
	// 在构造函数的形参前面使用权限描述，该形参就是参数属性
    constructor (public name, protected jobs,  private age,  readonly sex) {
    }

    say () {
        console.log(this.name, this.jobs, this.age, this.sex)
    }
}

let p = new Person('aa', 'bb', 12, '女')

p.say()

• 上面这两段代码功能一致，但第二种更简洁
• 看下第二种编译出来的js文件

var Person = /** @class */ (function () {
    function Person(name, jobs, age, sex) {
        this.name = name;
        this.jobs = jobs;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.say = function () {
        console.log(this.name, this.jobs, this.age, this.sex);
    };
    return Person;
}());
var p = new Person('aa', 'bb', 12, '女');
p.say();

• 可以看到实例属性的赋值语句已经自动生成好了

总结

• 参数属性只能在类的构造函数形参列表中使用
• 使用参数属性，ts在编译时，会自动生成实例属性的赋值语句，简化编码
• 通过参数属性的形式，将属性的声明、权限、赋值集中在了一起，使代码更加易读