Ts接口中的readonly修饰符的用法

含义

readonly是Ts中修饰符的其中一种, 其作用可以让类, 接口, 类型别名只读不可更改🤓

写法

在变量前, 属性前, 类型前加上readonly

用法

• 在类型别名中约束🤨

    type User = {
    // 约束id只读
      readonly id: string
      name: string
      age: number
      // 约束arr只读不能替换, 但是可以调用Array属性的方法改变内容
      readonly arr: number[]
    }

    let u: User = {
      id: '123',
      name: '张三',
      age: 123,
      arr: [123],
    }
    u.id = "222" // 报错：无法分配到 "id" ，因为它是只读属性
    u.name = "李四"
    u.arr = [1238] // 报错：无法分配到 "arr" ，因为它是只读属性。
    u.arr.push(123) // 可以使用 -> arr === [ 123, 123 ]

• 在接口中约束同上

数组用法

• 特殊写法👈

    // 和readonly number[] 等同
    let arr: ReadonlyArray<number> = [123]

• 在类型约束前加readonly, 约束这个数组只读, 并不约束变量, 意味着可以替换整个变量🤔

    let arr: readonly number[] = [123] 
    arr = [1234] // 此时arr=[1234]
    arr.push(123) // 类型“readonly number[]”上不存在属性“push”。

如果要数组整个可读, 可以使用const约束

• 在接口和类中约束

interface User  {
 // 约束变量和这个数组内容 都只读
    readonly arr: readonly number[],
}

编译结果🙊🙊

编译结果js文件中，不含有readonly修饰符