如何在带有 Typescript 的 Vue 中使用 Object.freeze？

Question

有一个例子：

<template>
  <h1>hello</h1>
</template>

<script lang="ts">
import Vue from 'vue'

type DataOptions = {
  name: string
  age: number
  flags: { t: number; l: number }[]
}

export default Vue.extend({
  name: 'HelloWorld',

  data(): DataOptions {
    return {
      name: 'zs',
      age: 18,
      flags: []
    }
  },

  methods: {
    refresh() {
      const response = [
        { t: 1, l: 1 },
        { t: 2, l: 2 }
      ]

      this.flags = Object.freeze(response)
    }
  }
})
</script>

Typescript 会报告：Type 'readonly { t: number; l：数字； }[]' 是 'readonly' 并且不能分配给可变类型 '{ t: string; l：字符串； }[]'。

Answer 1

将您的数据属性 flags 设为只读数组，以便为​​其分配响应：

type DataOptions = {
  name: string
  age: number
  flags: ReadonlyArray<Record<'t'|'l', number>>
}