TS中的修饰符

169 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情

ts 中的修饰符主要对起到约束成员作用。

readonly(只读修饰符)

普通使用

let num: readonly number[] = [1, 2, 3]; 

num = [2, 3, 4] //可以重新赋值

num.push(5);//error! 由于数组是只读的, 所以使用 push 是错误的

注意:这里的 readonly number[] 修饰的是值是一个只读的数组, 而不是修饰的变量, 所以在这里一切能改变数组数据的方法都不能使用, 例如: push、pop、splice、sort、shift、unshift、都不能使用, 以及 num[0] = xxx 也是不行的。

如果你想 修饰 num 不能从重新被赋值, 使用 const num

在接口中使用

interface User {
    readonly name: string //在成员前面加上修饰符
    readonly age: number[] //这里表示的是 age 一但赋值不能修改
    test: readonly string[] //和上面的普通使用一样
    readonly num: readonly number[] //相当于第一次赋值之后 就只能获取值, 其他操作全部进制
}

const u:User = {
    name: 'John', // 在第一次赋值之后, name 只能获取, 不能改变值
    age: [30],
    test: ['2'],
    num:[1,2,3]
}

u.name = 'Jane' // error! 不支持

u.age = [1] // error! 不支持

u.test = ['1'] //success 支持

u.num.push(1) // error! 不支持

u.num. = [1,4,5] // error! 不支持

在类中使用

class User {
    //===== S 属性列表 ===== 
    readonly name: string  //readonly
    age: number
    sex: '男' | '女' = '男'
    //===== E 属性列表 =====

    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

访问修饰符

访问修饰符可以控制类中的某个成员的访问权限。

public:默认的访问修饰符, 公开的, 所有代码均可以访问


class User {
    name: string  //readonly
    age: number
    sex: '男' | '女' = '男'
}

上面的写法相当于

class User {
    public name: string  //readonly
    public age: number
    public sex: '男' | '女' = '男'
}

private: 私有的, 只有在类中访问

class User {
    name: string
    age: number
    sex: '男' | '女' = '男'
    private test:string = '我只能在内部使用' //私有属性

    constructor(name, age) {
        this.name = name
        this.age = age
    }

    printTest(){
        console.log(this.test) //在类中可以访问
    }
}

在外部不能访问

const u: User = new User('张三', 18)

u.test //这里访问不到 test 属性

修饰符配合类的语法糖

class User {
    name: string
    constructor(name: string) {
        this.name = name
    }
}

这种对 name 进行机械化的处理可以使用 修饰符配 语法糖简写的

class User {
    constructor(public name: string) {
    }
}

class User {
    constructor(private name: string) {
    }
}

这种写法等同于上面机械化操作

protected: 受保护的成员

protected 只能在自身类和子类中访问

举个栗子

class Person {
    protected name: string = '人';
}
class Student extends Person {
    sayHello(){
        console.log(this.name); //在子类并且是内部访问
    }
}
const s = new Student();

s.name = '学生';//error 不能在外部访问